CSS中的”外围“尺寸

一、device-width

表示”理想宽度“，也称为”ideal viewport“，是理想状态下外围容器宽度。针对移动端可以如下方式设定（这也是PC端是默认值，也不能修改）：

<meta name="viewport" content="device-width">

它的值对于PC端，指的是屏幕的物理像素宽（Mac电脑或部分4K屏幕windows是有优化，会小于物理值）

它的值，代表着body水平流动的最大值，如果body的强制设定宽度超过它，就会出现水平滚动条

在移动端的缺省值为980或1024(根据机器的不同,大部分为980,ipadpro为1024)

二、 document.body.clientWidth:

是指body元素的css宽度

其值受两个因素的影响：

* body的css的width属性
* 不设width时，由viewport的值做为上限，并随widnow.innerWidth的变化而变化

三、document.documentElement.clientWidth

是指document对象的容器宽度，学名：viewport，也可以称为"layout viewport"，它的值会影响着水平滚动条的出现（另两个因素，是默认viewport及body.clientWidth）

同时它的值也将成为body宽度水平流动的上限，即成为document.body.clientWidth自动变化的上限（当然也可以手动设定body的css）

是由以下方式进行指定(关注width部分)：

<meta name="viewport" content="3000, initial-scale=1.0 maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" >

以上设定，对PC端无任何效果，它的width恒为屏幕宽度（物理像素）,也可以理解为width=device-width

针对移动端：以上设置全部生效

四、window.innerWidth:

是指浏览器内部的实际内部宽度，以像素为单位

五、window.outerWidth:

pc端：是指浏览器外部的实际外部宽度，以像素为单位

移动端：是指浏览器的实际宽度，以DP为单位

六、window.innerHeight:

pc端： 是指浏览器内部的实际物理像素高度，但会比window.outerHeight要小（因为有地址栏，状态栏，工具栏等）

移动端：是指浏览器内部的实际物理像素高度

七、window.outerHeight:

移动端：是指浏览器的实际高度，以DP为单位

八、分析不同：

1. document.body.clientWidth 和document.documentElement.clientWidth

• 前者是一个css概念，可以对body元素设置width,min-width,max-width进行设定，也可以不指定（block的水平流动性）

• 后者是document对象的容器宽度，不能由CSS进行指定（可以由meta元素设定），学名：viewport。它是body元素的”水平流动宽度上限“（注意： 不是window.innerWidth）

  • 如果不由meta指定，对于PC端，它的大小随着window.innerWidth的变化而变化，极值是当前显示器的屏幕宽度（物理像素表示）; 对于移动端，它的大小会是一个定值（980px或1080px）
  • 如果由meta指定:
    • PC端无任何效果，即与不设定meta完全一样
    • 移动端：当width设定为固定值，将会覆盖980或1080；当width=device-width时，将设定为移动设备的idea port，如iphone6为：375*667。即viewport会成为固定值，不会根据window.innerWidth的变化而变化（其实手机也不能改变窗口的大小）

• 横向滚动条什么时候会出现

  • 情况一： 后者(viewport)的设定大于移动端默认viewport，即大于980或1080，会出现。（只有移动端有）
  • 情况二： 前者设定大于后者时，会出现。如果body的width或min-width设定成为大于viewport 的值时，会出现横向滚动条。（PC和移动端都会出现）
  • 情况三：body中的的某一元素宽度如果大于viewport时，会出现。子元素的宽度大于viewport，会将body实际上扩宽，但并不会更改body.clientWidth（即值没有变化，但尺寸却实际变大，目前我用bug来解释）（PC和移动端都出现）

2. window.innerWidth和window.outerWidth:

• PC端：指的都是浏览器的宽度，会随浏览器的宽度调整而变化，二者的值大小一样
• 移动端：前都是物理像素宽后都是”理想宽度“（如：iphone6:分别是1500和375），同一设备，二者的值是固定的。

3. window.innerHeight和window.outerHeight:

• PC端：指的都是浏览器的高度，会随浏览器的宽度调整而变化，前者的值小于后者（后者包括地址栏等）
• 移动端：前都是物理像素高度后都是”理想高度“（如：iphone6:分别是2668和667），同一设备，二者的值是固定的。

九、三种不同的viewport的理解

1. Ideal viewport

与设备相关的理想布局宽度

2. Visual viewport

一个整屏可以看到的宽度，介于ideal viewport和980(1024)之间的宽度

如果网页布局小于ideal viewport，则屏幕不会被全部使用

如果网页布局大于980，则需要横向滚屏。

4. Layout viewport

就是document.documentElement.clientWidth，目的是控制网页布局的最大宽度