viewport深入理解

http://www.cnblogs.com/2050/p/3877280.html

viewport

就是指在移动端上显示网页区域的大小 或者说webView的大小 它并不等于浏览器可视区域的大小, 移动设备上的浏览器都会把自己默认的viewport设为980px或1024px,为了能在移动设备上正常显示pc网页, 但是这会导致一个问题,浏览器会出现滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

①layout viewport 布局视口

layout viewport 的宽度是大于浏览器可视区域的宽度的
这个layout viewport的宽度可以通过

document.documentElement.clientWidth

来获取。

② visual viewport 可视视口

visual viewport的宽度可以通过

window.innerWidth 来获取，但在Android 2, Oprea mini 和 UC 8中无法正确获取。

③*** ideal viewport*** 理想视口

最适合布局的视口,跟dpr有关,iphone的ideal viewport 为320,小米4c的为360

注意：在移动端开发过程中我们会添加如下标签

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

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

把当前的viewport width 设置成 device-width
layout viewport 就会和 ideal viewport 宽度 相同
要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，

initial-scale=1 解决了 iphone、ipad的毛病，

width=device-width则解决了IE的毛病

此外，在安卓中还支持 target-densitydpi 这个私有属性，它表示目标设备的密度等级，作用是决定css中的1px代表多少物理像素
target-densitydpi
值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个

特别说明的是，当 target-densitydpi=device-dpi 时， css中的1px会等于物理像素中的1px。
因为这个属性只有安卓支持，并且安卓已经决定要废弃target-densitydpi 这个属性了，所以这个属性我们要避免进行使用 。