梳理：移动端Viewport的知识
Posted jaykoo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了梳理：移动端Viewport的知识相关的知识，希望对你有一定的参考价值。
———— 再次阅读了《viewports剖析》，写一点自己对移动端的总结和想法。
文章里定义了移动端有两个Viewport：
- Layout Viewport：布局视口
- Visual Viewpor：视觉视口
之前一直在这两个知识点上学习，但我认为弄懂移动端，还需要加上一个关键知识点，就是 —— 屏幕大小。下面简单地总结一下。
Layout Viewport （布局视口）
- CSS pixel度量
- 尺寸获得：document.documentElement.clientWdith/Height
在PC端已经知道，网页的viewport是高于html元素的属于页面最高级别的容器。这个尺寸就是页面布局的宽度（高度）。
我们根据视觉稿布局网页的时候，所做的页面就是基于此容器。
----------------在说Visual Viewport之前，先来总结一下屏幕大小。
屏幕大小
- 设备的pixel（DP）度量
- 尺寸获得：screen.width/height
虽然在前端开发中并不关心屏幕大小，因为移动设备太多，分辨率，尺寸，比例也不尽相同。往往会用一套适配进行开发，但有必要了解。
eg. 以iphone6举例：
分辨率（基于DIP）：750*1334 （宽*高）
以上尺寸获得的屏幕大小：375*667 ，这就是我们获得的设备屏幕宽度。
屏幕是Retina屏，DPR=2
DPR（device pixel ratio），物理像素与设备像素比例。DPR=2，即 1 个设备像素= 2*2 个物理像素
以上这些关于屏幕数据，开发人员无法改变，手机厂商在手机设计制作的时候已将其定义好。
Visual Viewport（视觉视口）
- CSS pixel度量
- 尺寸获得：window.innerWidth/Height
Visual Viewport虚拟视口可以当做是阅读Layout Viewport的窗口。可以用以上js代码来获得其尺寸，注意，尺寸是会随着用户或代码控制缩放而变化的！
PC端通过这个代码获得浏览器宽度（高度），其值也是会通过缩放而变化，当然在PC端也可以通过用户人为改变浏览器大小。
缩放
之前一直在这个缩放地方做困扰，其实缩放改变的是视觉视口的大小（即视口的宽与高）。而缩放又是基于屏幕大小的。
这么说也难以理解，其实（拿宽度举例）是以 "screen.width除以window.innerWidth" ，如下：
- 当缩放值 = 1 ， 1CSS pixel（宽） = 1设备像素（宽）
- 当缩放值 = 2 ， 1CSS pixel （宽）= 2设备像素 （宽）
eg，当缩放值为2的时候，在iphone6，设备像素为 375*667 大小的屏幕中，只显示了 188*334 个CSS像素点（VIsual Viewport）。那么在这个屏幕中可以显示的元素变少，给用户的感觉就是“放大”了，用户拿了一个2倍的“放大镜”，去“看”这个Layout Viewport。
最后再次回到这句话上面
<html>
...
<meta name="viewport" content="width=device-width initial-scale=1.0">
...
</html>
(一个meta扩展标签，现在已经来做前端的屏幕适配)
width：定义了Layout Viewport的宽度
device-width：设备宽度
initial-scale：设定默认初始值，以多少大小的Visual Viewport去“看”Layout Viewport
还有maximum-scale，minimum-scale等~~~
以上是关于梳理：移动端Viewport的知识的主要内容，如果未能解决你的问题，请参考以下文章