移动web开发viewport记录

现在做的项目要重新写viewport，就研究了一下。本来就对这一块迷迷糊糊的，看了几位大牛的文章就更迷糊了，好歹最后是弄得差不多了，赶紧记录下来。

先来看下viewport是什么意思，字面意思是视图窗口，就是显示页面的地方，如果不设置他的属性，一般咱们在移动设备上看到的网页都比设备本身的大，下面是viewport的属性：

width 可视区域的宽度，为一个正整数，或字符串”width-device”

initial-scale 设置页面的初始缩放值，为一个数字，可以带小数

minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数

maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数

height 可视区域的高度，这个属性对我们并不重要，很少使用

user-scalable 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

iPhone 和 Android 平台上，WebKit 内核的浏览器使用 980 像素宽的视见区或逻辑尺寸，相当于viewport的width=980px。当页面加载后，内容通常被完全缩放以便整个页面都可见，尽管内容会被缩放得非常小，甚至不可读。

iPhone3GS及以上设备的Safari和Android4.0以上的浏览器支持修改viewport的width来改变页面的缩放情况，你可以将width指定为页面设计的宽度，如此一来，你的页面正好充满viewport并全屏显示，而不会缩放。如当页面设计宽度为480px时，可以设置viewport的width=480px：

<

meta

name=”viewport” content=”width=480px, user-scalable=no” />

因为现在的项目是在320px宽的模板上做出来的，所以放到移动设备上的时候，比较简单的方法就是在320Px的基础上缩放。也就是现在viewport的width的值就是固定的320px。再根据后面scale的值来缩放整个网页，就会得到想要的效果。

按照这个思路走下去，只要获取移动设备屏幕的宽度再除以320就得到scale值了。但是这个想法，在实践的时候却遇到了问题。

获取屏幕宽度的方法是：

window.screen.width

在苹果6s上得到的是375，我们都知道的屏幕的正常宽度，但是在小米3上得到值是1080，这显然不是正常手机的实际屏幕宽度。经过几个安卓手机测试，这个值跟屏幕的实际宽度相差dpr(设备像素比 device pixel ratio)倍。也就是可以得到以下公式：

真实屏幕宽度=window.screen.width/dpr

得到真实屏幕的宽度之后，就可以再除以320得到scale的值了。

以上是针对高分辨率安卓手机的优化。苹果手机相对简单，只要把viewport的width值设置成320，就会自动缩放成合适的大小了。

下面是参考资源：

http://www.cnblogs.com/plums/archive/2013/01/10/WebApp-fixed-width-layout-of-multi-terminal-adapter-since.html#3077467

http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml

/article/5062193.html

http://caibaojian.com/js-name.html#t10

http://f2e.souche.com/blog/yi-dong-duan-zi-gua-ying-fang-an/?utm_source=tuicool&utm_medium=referral#clue

http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041