获取不同浏览器下视口的尺寸

概述

最近在学习JavaScript高级程序设计（第三版）时，学习了获取不同浏览器中视口的大小，为了方便以后查阅，将相关的代码进行记录

代码实现

function getViewportSize() {
  var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
  // 判断浏览器是否支持innerWidth
  if (typeof pageWidth !== 'number') {
    // 文档渲染模式是标准模式
    if (document.compatMode == 'CSS1Compat') {
      pageWidth = document.documentElement.clientWidth;
      pageHeight = document.documentElement.clientHeight;
    } else {
      // 文档渲染模式是混杂模式或怪异模式
      pageWidth = document.body.clientWidth;
      pageHeight = document.body.clientHeight;
    }
  }
  return {
    pageWidth,
    pageHeight
  }
}

参考资料

• 《JavaScript高级程序设计-第三版》第八章BOM--》窗口大小

  • 学习笔记

• 文档渲染模式

  • 学习笔记