viewport的深入调研

 

1、viewport概念:viewport就是设备的屏幕上能用来显示我们的网页的那一块区域.

viewport的默认值980px或1024px等,以下是浏览器的默认viewport宽度 

2、css中的1px

devicePixelRatio = 物理像素 / 独立像素

css中的px是设备的独立像素,分辨率约到,1px代表的物理像素越大,devicePixelRatio越大,所以在1080*1920这样的设备上,默认情况下div的宽度设计为300ox(视devicePixelRatio的值而定)就铺满整个屏幕了.

浏览器默认的viewport叫layout viewport,可通过document.documentElement.clientWidth来获取,layout viewport宽度大于浏览器的可视区域宽度.

浏览器的可视区域叫visual viewport,可通过window.innerWith获取

移动设备的理想viewport叫做ideal viewport,不同设备的ideal viewport不同,可在http://viewportsizes.com查看不同设备的宽度

4、meta的viewport

1)<meta name="viewport" content=“width=device-width">测试结果: 

 

 

注意:在iphone和ipad中ideal viewport都是竖屏的宽度

2)<meta name="viewport" content=“initial-scale=1”>可以达到1)中同样的效果,因为这个放大是相对于ideal viewport宽度的,放大1倍,就是相对ideal viewport 100%缩放 

 

Window phone的IE无论横屏还是竖屏都按照竖屏设为ideal viewport

3)<meta name="viewport" content="width=400, initial-scale=1">

浏览器会取width和放大较大的值作为viewport值,例如with=400,ideal viewport 为480,取ideal viewport宽度

总结:把当前的viewport 设置为ideal viewport既可以是width=device-width也可以是设置inital-scale=1,但这两个均有小的不见兼容性,所以建议把两者都写上,inital-scale=1解决了iphone、ipad的毛病,width=device-with则解决了IE的问题

 

5、缩放相对于ideal viewport 来缩放,缩放值越大,当前的viewport宽度越小,例如iphone中ideal viewport 的宽度是320px,设置initial-scale=2,此时viewport就变成160px了,

因此得到公式:

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

大部分浏览器符合这个理论,安卓自带的webkit浏览器只有在 initial-scale = 1 以及没有设置width属性时才是表现正常的,IE上根本不管inittial-scale,永远表现出来的是1

 

6、initial-scale的默认值,显然不是1,为1的时候layaout viewport 宽度等于ideal viewport宽度

安卓上好像没有默认值

iphone和ipad上的默认值很神奇,为了让页面完美展现在设备上(不出现滚动条),是自己计算的,

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

例如320手机,当前缩放值 = 320 / 980,也就是0.33

 

7、动态改变meta viewport标签

1)document.write

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>

 

有英文读写能力可以参考:

 

https://www.quirksmode.org/mobile/viewports.html

https://www.quirksmode.org/mobile/viewports2.html

https://www.quirksmode.org/mobile/metaviewport/