手机网页 viewport 元素标记说明

7 篇文章 0 订阅
4 篇文章 0 订阅

用法:

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


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

<!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标签,内容如下:

<!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标记

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

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

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

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

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


或者

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

 

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

Android上的规则属性

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

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

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


 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值