viewport深入理解和使用

什么是viewport ?

viewport是用户网页的可视区域，也可叫做视区。手机浏览器是把页面放在一个虚拟的窗口(viewport)中，通常这个虚拟的窗口比屏幕宽，这样就不用把网页挤到很小的窗口中，用户可以通过平移和缩放来看网页的不同部分。

下图为常见一些设备浏览器默认viewport宽度：

css中的1px不等于设备的1px

在css中经常使用px做单位，PC端浏览器中的1px往往都是对应电脑屏幕的1个物理像素，这救我让我们误以为1px就是一个物理像素，事实并非如此，在不同设备不同环境下，css的1px所代表的设备物理像素是不同的。用户缩放也会影响。如果把页面放大一倍，那么css1px所代表的物理像素也会增加一倍，反之，也会缩小一倍。

移动端浏览器中，window对象有devicePixelRadio属性，官方定为为：设备物理像素和独立像素的比例。

devicePixelRadio = 物理像素 / 独立像素

css中的px就可以看作独立像素。

学习viewport的具体用法之前，先搞清楚几个概念：

　　layout viewport：是网页的所有内容，可以全部或者部分展示给用户。

　　　　　　　　　　可通过 document.documentElement.clientWidth来获取

　　visual viewport：当前显示给用户内容的窗口，可以拖动或者放大缩小网页。

　　　　　　　　　　可通过 window.innerWidth 来获取。

　　ideal viewport： 移动设备的屏幕宽度。

　　　　　　　　　　ideal viewport并没有一个固定尺寸，所有的iphone的ideal viewport宽度都是320px,也就是css中的320px就代表iphone屏幕的宽度。但是安卓手机机型较多，有320px、360px、384px等，所以各个设备ideal viewport不同。　　　　　　

设置viewport

该meta的作用是让当前viewport的宽度等于设备的宽度，不允许用户手动缩放。

分别对meta的各个属性介绍如下：

width	设置viewport的宽度，为一个正整数，或字符串‘device-width’
initial-scale	设置页面的初始缩放值，是一个数字，可以是小数
maximum-sacle	设置页面最大缩放值，是一个数字，可以是小数
user-scalable	是否允许用户进行缩放，值为'yes'或者'no',yes表示可缩放，no表示禁止缩放
minimum-scale	允许用户缩放的最小值，是一个数字，可以是小数
height	设置layout viewport的高度，这个属性很少使用

这些属性可以同时使用，使用时用逗号隔开，也可以单独使用。

此外，安卓手机还支持target-densitydpi 这个私有属性，它表示目标设备的密度等级，决定css中1px代表多少物理像素。

target-densitydpi

值可以为数值或 high-dpi、medium-dpi、low-dpi、device-dpi这几个字符中的一个

target-densitydpi = device-dpi时，css的1px就等于物理像素1px。由于只有安卓支持，所以我们尽量避免使用它，作为了解就好了。

缩放原理

缩放是相对于ideal viewport来缩放的，缩放值越大，当前viewport的宽度就会越小，反之亦然。

举例：在iphone中，如果我们设置 initial-scale = 2 ，也就是默认放大2倍，此时viewport就缩小了2倍变成了160px。就是原来的1px变成了2px的长度，放大之后原来需要320px才能填满的宽度，现在只需要160px就可以做到。因此我们可以得出一个公式：

visual viewport宽度 = ideal viewport宽度 / 当前缩放值

当前缩放值 = ideal viewport宽度 / visial viewport宽度

ps: visual viewport的宽度指的是浏览器可视区域的宽度。

大多数浏览器都符合这个理论，但是安卓上的原生浏览器以及IE有些问题。安卓自带的webkit浏览器只有在 initial-scale = 1 以及没有设置width属性时才是表现正常的，也就相当于这理论在它身上基本没用；而IE则根本不甩initial-scale这个属性，无论你给他设置什么，initial-scale表现出来的效果永远是1。

好了，现在再来说下initial-scale的默认值问题，就是不写这个属性的时候，它的默认值会是多少呢？很显然不会是1，因为当 initial-scale = 1 时，当前的layout viewport宽度会被设为 ideal viewport的宽度，但前面说了，各浏览器默认的 layout viewport宽度一般都是980啊，1024啊，800啊等等这些个值，没有一开始就是 ideal viewport的宽度的，所以 initial-scale的默认值肯定不是1。安卓设备上的initial-scale默认值好像没有方法能够得到，或者就是干脆它就没有默认值，一定要你显示的写出来这个东西才会起作用，我们不管它了，这里我们重点说一下iphone和ipad上的initial-scale默认值。

根据测试，我们可以在iphone和ipad上得到一个结论，就是无论你给layout viewpor设置的宽度是多少，而又没有指定初始的缩放值的话，那么iphone和ipad会自动计算initial-scale这个值，以保证当前layout viewport的宽度在缩放后就是浏览器可视区域的宽度，也就是说不会出现横向滚动条。比如说，在iphone上，我们不设置任何的viewport meta标签，此时layout viewport的宽度为980px，但我们可以看到浏览器并没有出现横向滚动条，浏览器默认的把页面缩小了。根据上面的公式，当前缩放值 = ideal viewport宽度 / visual viewport宽度，我们可以得出：

当前缩放值 = 320 / 980

也就是当前的initial-scale默认值应该是 0.33这样子。当你指定了initial-scale的值后，这个默认值就不起作用了。

总之记住这个结论就行了：在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。

动态修改

方法1：使用document.write动态输出meta标签

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

方法2：通过setAttribute来改变

<meta id="testViewport" name="viewport" content="width = 380">

<script>

 var mvp = document.getElementById('testViewport');

 mvp.setAttribute('content','width=480');

</script>

说了那么多废话，最后还是有必要总结一点有用的出来。

第一：如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。

第二：每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale=1也有把viewport的宽度设为理想宽度的作用。所以，我们可以使用

<meta name="viewport" content="width=device-width, initial-scale=1">

来得到一个理想的viewport（也就是前面说的ideal viewport）。

为什么需要有理想的viewport呢？比如一个分辨率为320x480的手机理想viewport的宽度是320px，而另一个屏幕尺寸相同但分辨率为640x960的手机的理想viewport宽度也是为320px，那为什么分辨率大的这个手机的理想宽度要跟分辨率小的那个手机的理想宽度一样呢？这是因为，只有这样才能保证同样的网站在不同分辨率的设备上看起来都是一样或差不多的。实际上，现在市面上虽然有那么多不同种类不同品牌不同分辨率的手机，但它们的理想viewport宽度归纳起来无非也就 320、360、384、400等几种，都是非常接近的，理想宽度的相近也就意味着我们针对某个设备的理想viewport而做出的网站，在其他设备上的表现也不会相差非常多甚至是表现一样的。