Mobile上的viewport及各类概念澄清贴

device Pixel & CSS Pixel

物理像素指显示设备上的物理像素点，好比HTC G11宽是480px，这的480是用物理像素衡量的。 CSS像素的话则指咱们写页面时理解的那个像素单位。能够理解为是设备本身作了一层缩放，让2个物理像素表明一个咱们css里说的像素，也就是dp（设备独立像素）的概念。行业内有个约定俗成的规范，即通常这个数值是320。 有的很高密度的手机略做了调整。

想知道设备的物理像素的话，通常去取 screen.width 就能够。 但苹果只会给你dp的数值，也就是320。这个时候就得用实际上的虚拟像素数（即dp个数）乘以设备像素和css像素的比值计算出来设备像素值。

screen.width * devicePiexlRation

区分好啥时候说的是设备的物理像素，啥时候说的是通常意义上的px对后面的理解很是重要！

DPI & PPI

• Dpi 指 Dots Per Inch ;
• PPI指 Pixels Per Inch。

用于衡量设备的物理像素密度；dpi主要见于Google Android开发文档，Screen Support这一章节。这篇文章主要是讲安卓开发，所以请不要被带跑，看关键的几个部分就好。

在我看来，显示设备上的Dots和pixels其实是一回事：这里的px指的实际上就是物理像素，而不是css文档里的那个相对单位px,和Dots的含义是一致的。

计算方法即是用物理像素数除以尺寸；例如iPhone4s, 尺寸为对角线3.5英寸，分辨率960×640，那么对角线上大约有1152个物理像素，1152除3.5可得dpi约为329。

Lea Verou写的dpi计算工具

dip, dppx & devicePixelRatio

按照正确的作法，如下三个值都是由浏览器决定，不能由于meta viewport设置改变的。（但坑爹浏览器老是存在的好比三星上的海豚。。）

• dip: device-independent pixel, 设备独立像素。这一律念主要见于Android开发文档； 安卓和WP的话使用 screen.width/devicePixelRatio 就能够获得dip数量； IOS上直接获取 screen.width 就是。

• dppx : device pixel / css pixel; 这个词其实我是在Lea的dpi计算工具里见到的。

  (dppx) for the amount of device pixels per CSS pixel

• devicePiexlRatio :webkit浏览器（包括opera）支持的一个window属性，在console里面打window.devicePiexlRatio就能看到啦。可参见PPK写的相关博文，devicePixelRatio及后续More about devicePixelRatio; 国内的张鑫旭也写了很不错的分析： 设备像素比devicePixelRatio简单介绍

后面两个值dppx和devicePiexlRatio其实表明的是同一个数值；至于dip，俗称dp, 通常见于安卓开发的时候使用，我的认为其实就等同于前端这边使用的css概念里的那个相对单位px。

layout viewport & visual viewport

关于两个viewport的具体指南，请移步PPK经典大做：A tale of two viewports 和PART 2. 该文只作概要。

meta设置的取值分两类：width, height 和 scale：

width & height

这一设置改变的是layout viewport的宽度。layout viewport的宽度即是咱们的文档真正依托的布局宽度。

对应 documentElement.clientWidth 。

注意！这里所说的html的宽度是外界限制定的，css不能控制，不是说你设meta里width为320，把body宽度设置成640，这个layout就变成640了。实际上仍是320，而后滚动条出现啦！除非你还禁止了缩放，那连滚动条都没了。

scale（initial\max\min）

定义visual viewport初始的缩放比例。这是能够看到的那个小窗口，咱们关心的是这个小窗口里能够看到多少像素。**这个值改变不影响layout viewport！** 能够设置scale,容许用户缩放的话用户本身动手也能够改变：放大时可见的像素点减小；缩小时，可见的像素点增长；

浏览器在初始载入页面的时候，先是猜测当前文档的宽度（即html元素的宽度，可以使用documentElement.clientWidth 获取到），若是meta设置了width, 那么就会以此为layout宽度，若是文档内有元素宽度超出，且meta定义容许用户缩放，那么就会有滚动条啦。换言之不容许缩放还超出了，那用户基本甭想看到超出去那块内容了。这一宽度便是layout viewport的宽度。

而为了能让用户看到更多的内容呢，浏览器会根据layout viewport的宽度来调整缩放比率，也就是调整visual viewport的大小，若是meta设置里没有对此作任何规定， 那么layout viewport是多少这个就是多少；若是meta里设了 initial-scale=1 , 那么视窗宽度就等于dp宽度，也就是通过设备自行缩放后的宽度。正像咱们以前说的，通常就是320啦。

举个栗子： meta里这么写： width=700, 那么layout宽度700，visual viewport宽度也会是700，恰好显示所有文档；

meta要是改为width=700,initial-scale=1,layout依然是700，但visual viewport就变成了320！

Tips!

• chrome dev tool模拟的时候直接无视meta, 彻底按照物理像素来

• 浏览器喜欢保存你上次的缩放比。。。因此测试很是具备混淆性；改url比较保险 实际上有两层缩放：

• iphone那个旋转到landscape后的bug，实际上就是在容许用户缩放的状况下，当页面从portrait旋转到landscape的时候，页面会自行放大。用户必须双敲两下才会还原。解决的方法通常就是在旋转时使用js修改meta，设置最大缩放比率为1：maximum-scale=1 （参见iPhone Safari Viewport Scaling Bug）