两种viewport
两种viewport
原文链接：
A tale of two viewports — part one
A tale of two viewports — part two
预备知识
css像素与设备像素是两种不同的东西。
举例：当缩放页面的时候，浏览器会自动缩放元素。元素的css像素大小不变，但实际所占的设备元素已经变了。默认无缩放时，设备像素等于css像素大小。
浏览器窗口的尺寸：
-
document.documentElement.clientWidth/clientHeight（含滚动条） -
window.innerWidth/Height（不含滚动条）<b>(亦是后文中移动设备的visual viewport的尺寸)</b>
(我们之所以有两对属性是浏览器大战的产物。当时Netscape只支持window.innerWidth/Height，而IE只支持document.documentElement.clientWidth/clientHeight。当所有其他浏览器开始支持document.documentElement.clientWidth/clientHeight的时候，IE仍旧不支持window.innerWidth/Height)
html页面的尺寸
document.documentElement.offsetWidth/offsetHeight
<b>(亦是后文中移动设备的layout viewport的尺寸)</b>
点击事件的坐标
-
pageX/Y给出相对于html元素（后文中移动设备的layout viewport）的坐标，单位是css像素
-
clientX/Y给出相对于浏览器窗口（后文中移动设备的visual viewport）的坐标，单位是css像素
-
screenX/Y给出相对于屏幕的坐标，单位是设备像素
专门讨论移动设备：
两个viewport
-
visual viewport:屏幕上可见的窗口区域（可以通过缩放被改变）
[图片上传失败...(image-be1634-1532612674701)] -
layout viewport：不会变更大小的图/网站页面CSS布局，尤其是百分比宽度，是以layout viewport做为参照系来计算的。
缩放
很显然两个viewport都是以CSS像素度量的。但是当进行缩放的时候，visual viewport的尺寸会发生变化，layout viewport的尺寸仍然跟之前的一样。
- 缩到最小时，使得
layout viewport与visual viewport一样宽。
缩小
- 放大时
layout viewport比visual viewport大。
放大
- 旋转屏幕时，浏览器会 <b>拉伸css像素</b> 来适配，使得
layout viewport与visual viewport一样宽（同1）。
旋转屏幕
那么如何获取layout viewport与visual viewport呢？
-
layout viewport：document.documentElement.clientWidth/Height
- 意义：Layout viewport的尺寸
- 度量单位：CSS像素
- 完全支持Opera, iPhone, Android, Symbian, Bolt, MicroB, Skyfire, Obigo。
-
visual viewport:window.innerWidth/Height
- 意义：Visual viewport的尺寸。
- 度量单位：CSS像素。
- 完全支持iPhone，Symbian，BlackBerry。
- 问题
- Opera和Firefox返回以设备像素为单位的屏幕宽度。
- Android，Bolt，MicroB和NetFront返回以CSS像素为单位的layout viewport尺寸。
viewport meta标签
- 意义：设置
layout viewport的宽度。 - 度量单位：CSS像素。
- 完全支持Opera Mobile，iPhone，Android，Iris，IE，BlackBerry，Obigo。
- 不支持Opera Mini，Symbian，Bolt，Firefox，MicroB，NetFront。
为什么？
假设你创建了一个简单的页面，并且没有给你的元素设置「宽度」。那么现在它们会被拉伸来填满layout viewport宽度的100%。大部分浏览器会进行缩放从而在屏幕上展示整个layout viewport，产生下面这样的效果：
所有用户将会立刻进行放大操作，这个是工作的，但是大部分浏览器完好无缺的保持元素的宽度，这使得文字很难阅读。
为了绕开这个问题苹果发明了viewport meta标签。当你设置<meta name="viewport" content="width=320">的时候，你就设置了layout viewport的宽度为320px。你可以把layout viewport的宽度设置为任何你想要的尺寸，包括device-width。device-width会把screen.width（以设备像素为单位）做为其值，并相应的重置layout viewport的尺寸。
问题
position: fixed。一个固定的元素，是相对于viewport来进行定位的。但是相对于哪个viewport？
