关于css屏幕尺寸的几个问题


我们在写js的时候经常碰到获得屏幕宽度，屏幕高度的问题，经常容易搞混淆，那么今天我们今天来探究下。

常用的几个js属性

  • window.outerWidth / outerHeight
  • window.innerWidth / innerHeight
  • screen.availWidth/ availHeight
  • document.documentElement.clientWidth / clientHeight
  • document.documentElement.offsetWidth / offsetHeight
  • document.documentElement.scrollWidth / scrollHeight

以上几个属性便是我们经常用来获取屏幕尺寸相关的属性了，稍稍不慎就很容易用错，接下来我们以chrome 浏览器来测试下这几个属性。

1.window.outerWidth / outerHeight

关于window.outerWIdth的定义 MDN上有一段说明, 关于window.outerHeight的定义也是类似:

概述
Window.outerWidth 获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边（window chrome）和调正窗口大小的边框（window resizing borders/handles）。

这里有个window的概念, 就是窗体的意思。
也就是说window.outerWidth 包含了浏览器窗体的宽度。
随便打开一个窗口打印下这两个数据, 然后量尺寸：

image.png

可以看到window.outerWidth 和 window.outerHeight 是 977 * 777, 而我们截图出来的图也是 977 * 777,
而且图还带有透明的边。可以看出MDN上说的这两个属性是要包含窗口镶边的，这个由chrome的窗口决定的。至于为什么会这样，可以参考 知乎

分析：

  1. window.outerWidth 和 window.outerHeight 是浏览器的窗口大小（包括滚动条），就是浏览器在windows或者mac上占用的大小，这不等同于网页的大小。

2.window.innerWidth / innerHeight

关于window.innerWidth的定义 MDN - window.innerWidth 上也有一段说明, 关于window.innerHeight的定义也是类似:

概述
浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它。

这里提到了viewport的概念，不同于上面window的概念， 一个网页显示的区域大小可能小于整个浏览器窗口的大小。而viewport反馈的正是网页显示区域的大小。

我们可以在Chrome上按F12，让弹出来的开发者工具挤占显示区域:

可以看出 window.innerWidth 明显 小于 window.outerWidth, window.innerWidth也正好是显示区域的宽度

分析：

  1. window.innerWidth 和 window.innerHeight 是浏览器的视口(viewport)大小（包括滚动条），就是浏览器窗口内显示网页的区域大小。
    2.一般来说 window.innerWidth要比 window.outerWidth小， 除非浏览器窗口等于你的显示器屏幕大小。
    开发时一般都用 window.innerWidth 和 window.innerHeight, 这个跟视口宽度是挂钩的。

3.screen.availWidth / availHeight

这一组是跟屏幕有关的,跟网页没有关系，常用的是:

1
2
3
4
5
6
screen.availWidth  // 显示屏幕可用宽度 （不包括Windows任务栏）
screen.availHeight // 显示屏幕可用高度（不包括Windows任务栏）
screen.width  // 屏幕宽度
screen.heigh t// 屏幕高度
screen.colorDepth  // 回目标设备或缓冲器上的调色板的比特深度
screen.pixelDepth// 返回屏幕的颜色分辨率（每象素的位数）

4.document.documentElement.clientWidth / clientHeight

获取浏览器窗口文档显示区域的宽度/宽度，不包括滚动条。document.documentElement 是文档里的html元素，它的显示区域是被滚动条挤压的，所以它不包含滚动条的的高度和宽度。

标签对上述属性的影响

PC上这个属性可以忽略，主要讨论的是移动端浏览器。
在移动端显示网页我们一般是加上

1
  <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

意思就是：
设置视口宽度等于设备宽度，禁止缩放，伸缩比例1:1

| width | 正整数 device-width | 定义视口的宽度，单位为像素|