手机网页viewport元素标记说明

用法&＃xff1a;

我们用一个网页来测试&＃xff0c;未加viewport标记的原始网页内容&＃xff1a;

Hello world!

显示结果如下图&＃xff1a;

未加标记时&＃xff0c;浏览器会认为网站默认宽度为980时&＃xff0c;这样显示的文字就显得非常小&＃xff0c;根本无法阅读&＃xff0c;只能通过放大网页查看。

当然&＃xff0c;我们也可以通过告诉浏览器网页是针对手机浏览的。通过设置viewport的宽度等于“设备宽度”&＃xff08;width&＃61;device-width&＃xff09;&＃xff0c;告诉浏览器&＃xff0c;手机设备宽度是320px&＃xff0c;而不是默认980px价值。如果我们设置宽度&＃61; 320&＃xff08;width&＃61;320&＃xff09;将在iPhone和其他一些智能手机上实现了相同的显示结果&＃xff0c;但并不是所有的手机都有这个确切的宽度&＃xff0c;所以最好简单地设置设备的宽度&＃xff0c;并让手机浏览器弄清楚。

然后&＃xff0c;我们在网页上加上viewport标签&＃xff0c;内容如下&＃xff1a;

Hello world!

显示结果&＃xff1a;

这个viewport的元标记是许多智能电话上的支持&＃xff0c;从iPhone到Android的webOS&＃xff08;PALM&＃xff09;甚至InternetExplorer Mobile中的Opera Mini和Opera Mobile。

以下是m.yahoo.com上的viewport标记

在上面这个代码中&＃xff0c;禁止用户进行缩放&＃xff0c;你也可以允许让用户自行缩放&＃xff0c;代码如下&＃xff1a;

由于viewport标记并不是所有浏览器都支持&＃xff0c;当以上代码无效时&＃xff0c;你可以尝试通过其它方式实现&＃xff0c;如下&＃xff1a;

或者

最后&＃xff0c;如果你的网页中的DOCTYPE是XHTML-MP或WML&＃xff0c;您的网站将被认定为一个移动优化网站。

Android上的规则属性

官方Android文档中列出了一个特殊的属性&＃xff0c;Android已经加入到meta标签&＃xff1a;target-densitydpi。这个属性允许开发人员指定屏幕分辨率页面已开发的&＃xff0c;或者更具体如何处理的媒体&＃xff0c;如图像的缩放。

这里有一个Android下的viewport标签的例子&＃xff1a;