JS 如何获取浏览器视图窗口尺寸

有两组属性可以获取视口尺寸的高度和宽度:innerWidth 和innerHeight,以及clientWidth 和clientHeight。

getWindowDims 函数返回一个包含宽度和高度属性的对象:

function getWindowDims() {
  let docs = document,
    win = window;
  let docsEl = (docs.compatMode && docs.compatMode === 'CSS1Compat') ?
    docs.documentElement : docs.body;
  let width = docsEl.clientWidth;
  let height = docsEl.clientHeight;
  if (win.innerWidth && width > win.innerWidth) {
    width = win.innerWidth;
    height = win.innerHeight;
  }
  return {
    width: width,
    height: height
  };
}
let win = getWindowDims();
console.log(win);

innerWidth 和innerHeight 是window 对象的属性,clientWidth 和clientHeight 属性是为文档对象的body 或者documentElement 属性获取的。

innerWidth 和innerHeight 属性包含垂直和水平滚动条的宽度和高度。
clientWidth 和 clientHeight 属性提供滚动条内的尺寸。
如果查看器使用移动设备,则 clientWidth 和 clientHeight 属性会更可取,因为它给出了移动设备上可视视口的大小。

日期:2020-06-02 22:16:19 来源:oir作者:oir