两种viewport

两种viewport

原文链接：
A tale of two viewports — part one
A tale of two viewports — part two

预备知识

css像素与设备像素是两种不同的东西。

举例：当缩放页面的时候，浏览器会自动缩放元素。元素的css像素大小不变，但实际所占的设备元素已经变了。默认无缩放时，设备像素等于css像素大小。

浏览器窗口的尺寸：

1. document.documentElement.clientWidth/clientHeight（含滚动条）

2. window.innerWidth/Height（不含滚动条）(亦是后文中移动设备的visual viewport的尺寸)

---

(我们之所以有两对属性是浏览器大战的产物。当时Netscape只支持window.innerWidth/Height，而IE只支持document.documentElement.clientWidth/clientHeight。当所有其他浏览器开始支持document.documentElement.clientWidth/clientHeight的时候，IE仍旧不支持window.innerWidth/Height)

html页面的尺寸

document.documentElement.offsetWidth/offsetHeight

(亦是后文中移动设备的layout viewport的尺寸)

点击事件的坐标

1. pageX/Y给出相对于html元素（后文中移动设备的layout viewport）的坐标，单位是css像素
   

2. clientX/Y给出相对于浏览器窗口（后文中移动设备的visual viewport）的坐标，单位是css像素
   

3. screenX/Y给出相对于屏幕的坐标，单位是设备像素
   

专门讨论移动设备：

两个viewport

1. visual viewport:屏幕上可见的窗口区域（可以通过缩放被改变）
   [图片上传失败...(image-be1634-1532612674701)]

2. layout viewport：不会变更大小的图/网站页面

   CSS布局，尤其是百分比宽度，是以layout viewport做为参照系来计算的。

缩放

很显然两个viewport都是以CSS像素度量的。但是当进行缩放的时候，visual viewport的尺寸会发生变化，layout viewport的尺寸仍然跟之前的一样。

1. 缩到最小时，使得layout viewport与visual viewport一样宽。
   
   缩小

2. 放大时layout viewport比visual viewport大。
   
   放大

3. 旋转屏幕时，浏览器会 拉伸css像素 来适配，使得layout viewport与visual viewport一样宽（同1）。

旋转屏幕

那么如何获取layout viewport与visual viewport呢？

1. layout viewport：document.documentElement.clientWidth/Height

• 意义：Layout viewport的尺寸
• 度量单位：CSS像素
• 完全支持Opera, iPhone, Android, Symbian, Bolt, MicroB, Skyfire, Obigo。

2. 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标签。当你设置的时候，你就设置了layout viewport的宽度为320px。你可以把layout viewport的宽度设置为任何你想要的尺寸，包括device-width。device-width会把screen.width（以设备像素为单位）做为其值，并相应的重置layout viewport的尺寸。

问题

position: fixed。一个固定的元素，是相对于viewport来进行定位的。但是相对于哪个viewport？