HTML5之viewport标签,用于iPhone、iPad等手机网页开发。

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

属性意义:
width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度。
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放

此标签主要用于iPad、iPhone等手机网页开发。

简单来说,就是手机浏览器把自己冒充为拥有一个更宽的屏幕,这样页面的布局就能跟桌面浏览器一样了。不同浏览器冒充的数值不一样:iPhone是神奇的980;Android是保守的800——冒充一个800*600的显示器;而Windows Phone 7则是1024。

经过实践,要想一个页面支持不同的设备屏幕尺寸,还真是很困难的,最完美的办法只能是辛苦一些,给不同大小的尺寸多做几种页面,不至于1000px的页面在iPhone上显示得那么别扭。

2 Comments
Leave a Reply