有两组属性可以获取视口尺寸的高度和宽度: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