现在做的项目要重新写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://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml
http://www.cnblogs.com/2050/p/3877280.html