HTML5 viewport 的一点试验

January 9, 2014

Viewporthtml5里的东西,在很多网站上,为了在移动设备上有更好的用户体验,使用了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 ---

添加新评论