移动端开发之viewport的理解

一、viewport的概念

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分

区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都

是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设

备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区

域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度

二、利用meta标签对viewport进行控制

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

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽

度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

content属性值 :

width：可视区域的宽度，值可为数字或关键词device-width；width=device-width ：表示宽度是设备屏幕的宽度

height：同width

intial-scale：页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

minimum-scale、maximum-scale：可视区域允许的缩放程度，所有的缩放值都必须在0.01–10的范围之内

user-scalable：是否可对页面进行缩放，no 禁止缩放。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。

总结一下，要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以

及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。

所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病：

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

target-densitydpi

<meta name="viewport" id="viewport" content="target-densitydpi=device-dpi,width=640, maximum-scale=0.5"><script>    document.getElementById('viewport').setAttribute('content', 'target-densitydpi=device-dpi,width=640, maximum-scale=' + window.screen.width / 640);</script>

它表示目标设备的密度等级，作用是决定css中的1px代表多少物理像素

target-densitydpi

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

device-dpi –使用设备原本的 dpi 作为目标 dpi。不会发生默认缩放。即css中的1px会等于物理像素中的1px。

high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。

medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 中低像素密度设备相应缩小。这是默认的target density。

low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。

 

WebKit内核默认按照160的DPI来排版。假如设备真实DPI是480，宽度是1080，在WebKit会按160DPI，360宽度来排版。排版结束后在放大到1080宽。

所以当取window.innerwidth之类的值的时候，取的是WebKit实际排版宽度360，而不是1080.

target-densitydpi=device-dpi可以强制内核以480DPI排版，使画面更精细，window.innerwidth也将为屏幕宽度1080.

 

因为这个属性只有安卓支持，并且安卓已经决定要废弃target-densitydpi 这个属性了，WebKit从去年开始取消了对target-densitydpi的支持，所以这个属性我们要避免进行使

用。

想实现target-densitydpi=device-dpi的效果有什么方法？提交此次补丁的WebKit开发者说可以用responsive images 和 CSS device units来替代。

 

测试获取 viewport 的 width ：

document.documentElement.clientWidth

1、在 iphone 上是读取 device-width 的值，并自动计算出 target-densitydpi 去适配，在 iphone4 上读取的值为 320  。

2、在 android 上，读取的是 target-densitydpi  。在不设置的情况下，默认选择的是 medium-dpi(160)  。

参考自：http://blog.csdn.net/dhx20022889/article/details/14447423

 

移动前端开发之viewport深入理解

请参考：http://www.cnblogs.com/2050/p/3877280.html

 远程实时调试手机上的WEB页面

请参考：https://www.douban.com/note/289846168/