Viewport是html5里的东西，在很多网站上，为了在移动设备上有更好的用户体验，使用了viewport这么一个东西。我把viewport理解成一个缓冲，html页面首先被绘制到这个缓冲上，然后再被投影到屏幕上。下面是对手头上几个不同的设备针对viewport做了个简单的实验。记录下了不同viewport设置下，获取到的屏幕宽度的区别。每一项两组数据，横屏时的数据和竖屏的。
viewport content=””
nexus 4 980*1324 980*509
ipad2 980*1185 980*644
HTC 603e 980*1408 980*453
Viewport content=”width=device-width”
Ipad2 768*928 768*504
603e 320*460 534*247
N4 384*519 598*311
Viewport content=”width=480”
N4 480*648 598*311
Ipad 768*928 1024*672
603e 480*690 534*247
Viewport content=”width=800”
603e 800*1150 800*370
Ipad 800*967 1024*672
N4 800*1081 800*416
Viewport 默认值为980px，不给width设置值的话，默认使用980.
width=device-width 为每个设备的默认值，在ipad上，横屏和竖屏的宽度是一致的，所以在翻转的时候，加上ios自带的旋转效果，整个页面看上去非常的顺畅，其他设备横竖屏时的宽度并不一致，所以UI可能需要略微调整。
当width设定的值大于device-width默认值，取设定的值，当设定的值小于device-width默认值，取device-width默认值。
分析多个网站，大多数网站都使用width=device-width来适配。但是有部分网站对ipad没有使用viewport技术，可以认为他们把ipad归到PC的范围了。
- EOF -
本站文章除注明转载外，均为本站原创或编译。欢迎任何形式的转载，但请务必注明出处，尊重他人劳动。
转载请注明：文章转载自 Binkery 技术博客 [https://binkery.com]
本文标题： HTML5 viewport 的一点试验
本文地址： https://binkery.com/archives/330.html