viewport 和 meta

PC 页面在移动设备的展示？
移动设备开发入门第一步就是了解 viewport。
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

viewport的概念

移动设备上的viewport就是屏幕上能用来显示我们的网页的那一块区域，但 viewport 又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。

在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的宽度相对于桌面电脑来说都比较小。

为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的）。

但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

下图是一些设备上浏览器的默认viewport的宽度。

meta标签和viewport

移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。

获取 ideal viewport

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

meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。这样就不会出现横向滚动条。

用户缩放对 px 的影响

css 中的 px 只是一个逻辑像素，在 PC 中一般来说一个 px 对应着一个物理像素，这也就是为什么 pc 端分辨率提高之后图标和字体会变小。

当用户对页面进行缩放后，px 的尺寸也会跟随缩放变化。这也就是为什么将一个页面放大之后，看到的字体和图片都会放大。如果放大一倍，那么 px 对应的尺寸也就是原来的两倍。字体自然变大。

常见设备的的 dpr

window自带属性获得设备像素比：

window.devicePixelRatio

MacBook pro 2015： 3.5
dell Inspiron 15 3000 series: 1

iphone 设备：
iPhone4, 4s, 5, 5s, 6, 6s, 7，8 都是Retina屏（ppi大于等于326），dpr为2。
6p，6sp，7p，8p dpr为3， ppi 为 441

Retina 屏

每英寸像素数大于等于326ppi。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。最先在 iphone 4 上使用。

initial-scale

无论给layout viewpor设置的宽度是多少，而又没有指定初始的缩放值的话，那么移动设备会自动计算initial-scale这个值，以保证当前layout viewport的宽度在缩放后就是浏览器可视区域的宽度，也就是说不会出现横向滚动条。