手机网页 viewport 元素标记说明

用法：

[html] view plain copy

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

我们用一个网页来测试，未加viewport标记的原始网页内容：

[html] view plain copy

<!doctype html>
<html>
<head>
<title>Hello world!</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>

显示结果如下图：

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

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

然后，我们在网页上加上viewport标签，内容如下：

[html] view plain copy

<!doctype html>
<html>
<head>
<title>Hello world!</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p>Hello world!</p>
</body>
</html>

显示结果：

这个viewport的元标记是许多智能电话上的支持，从iPhone到Android的webOS（PALM）甚至InternetExplorer Mobile中的Opera Mini和Opera Mobile。

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

[html] view plain copy

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

在上面这个代码中，禁止用户进行缩放，你也可以允许让用户自行缩放，代码如下：

[html] view plain copy

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

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

[html] view plain copy

<meta name="HandheldFriendly" content="true"/>

或者

[html] view plain copy

<meta name="MobileOptimized" content="320"/>

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

Android上的规则属性

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

这里有一个Android下的viewport标签的例子：

[html] view plain copy

<meta name="viewport" content="target-densitydpi=device-dpi" />

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。