浅谈移动端的viewport

viewport是移动互联网的产物， iphone 3gs上市后，超大的屏幕，加上2008普及3G网络，为移动互联网发展提供了有利条件。
可在当时，大部分的网页是为pc设计开发的，宽度都在900+以上，而当时手机的横向物理像素都在480以下。如果强行1：1显示，布局会乱掉。ios safari对此进行了优化， 在针对移动设备上没有进行适配的网站也没有设置viewportr的情况下，默认视口为980px，这样就可以兼容pc站点了，用户通过放大和移动来浏览网页信息。

下面是其他移动浏览器的默认视口宽度

#### 视口（viewport）

上面做法最大的问题是，使用css3媒体查询，布局视口（layout viewport），在900以上，那么针对小于480或320的监听就不会触发了，为了解决这个问题， ios safari 中引入了 viewport meta 标签，让开发人员控制视口大小和比例，其他移动浏览器厂商也纷纷支持这个标签，但它还不属于Web标准，

布局视口可以通过window.innerWidth 获取（也有其他文章说通过document.documentElement.clientWidth获取，但我测试过之后发现 window.innerWidth输出了文档的宽度），

documentElement.clientWidt输出设备宽度，叫它虚拟视口（visual viewport）

已经有两个视口了，浏览器厂家觉得应该还要一个视口，能代表最理想的布局大小 完美视口（ideal viewport），所谓的完美是指，用户不用缩放，在任何设备显示都是一致的。看下图了解一下三者的关系

• 布局视口一般大于设备可视区域（如果没有适配的话）
• 虚拟视口等于设备宽度（如果有设置 viewport width=device-width,默认它跟布局视口一样大小），
• 完美视口，无法通过js取到，在各个设备之间，大小也不一样。

一个meta示例

content的值还可以是下面一个或多个

键	值	说明
initial-scale=1.0	1	初始缩放值，如果只设置此项且值为1，等同设置了 width=device-width
width	device-width	虚拟视口(visual-viewport)宽度，值还可能是具体的值 如320px
height	device-height	虚拟视口(visual-viewport)高度 值还可能是具体的值 如480px
user-scalable	yes/no	是否允许用户缩放，默认yews,不建议设置为no
maxium-scale	2	最大缩放值, 可以为小数
minium-scale	1	最小缩放值，可以为小数

随着苹果发布了第4代iphone， 此时它的分辨率达到 640 x 960，ppi326

ppi(pixels per inch) 每英寸像素量， ppi计算公式，以iphone4为例，

E = 640^2 * 960^2

\sqrt[2]{E} / 3.5 ≈ 326

devicePixelRatio 显示比例

单位尺寸里容下了更多像素，视觉上变得清晰了，可问题也随之而来，以前css的1像素在手机上也是1像素，可现在如果还是这样显示，你的16px,在iphone4里显示只有 iphone3gs 的一半大，于是浏览器厂商又进行了改进，devicePixelRatio， 以ppi 163为基准，而 iphone4 ppi 恰好是 163 的二倍，那么在iphone4上显示，css 1px x 1px 在 iphone4 上显示成 2px x 2px大小 , 这样就保证了在所有不同ppi的设备上显示大小基本一致，我们也变得轻松了，设置 viewport，剩下的事就交给浏览器了。

好了，今天就先聊到这里，有不对的地方，欢迎留言。