Mobile Web开发基础————viewport标签

最新推荐文章于 2022-11-17 18:02:36 发布

weistar103

最新推荐文章于 2022-11-17 18:02:36 发布

阅读量102

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/weistar103/article/details/84414674

版权

HTML5 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

文章来自:http://blessdyb.iteye.com/blog/1534051

我们先来一个基础的HTML5的网页框架，如下:

<!Doctype html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>基本HTML5网页架构</title>  
    </head>  
    <body>  
        <p>HelloWorld</p>  
    </body>  
 </html>

我们将其部署到Web服务器中，在桌面上的任何一个浏览器上访问，都会看到一致的体验，因为代码太简单了，根本没有什么跨桌面浏览器适配的坑。但如果我们使用移动浏览器如Mobile Safari来访问，就会看到一个问题----字太小了，如果不使用放大功能，根本就看不清上面的字。

宽度——我们做Mobile Web开发的第一个需要趟的河，因为移动设备的碎片片太严重了。以iPhone上的Mobile Safari为例，可能是因为Mobile Safari在请求到刚才的网页后，假设它是一个为桌面浏览器设计的网站（实际上可能大多数移动浏览器都是这样认为的)。因此Mobile Safari假设网页宽度是980像素（不同的浏览器可能默认不同），同时将其缩小以便全部显示。如果我们的网页是专门为移动终端设计的，那么我们就需要告诉移动浏览器不要以默认的宽度来显示。因此，我们需要使用viewport.对以上代码进行修改,如下：

<!Doctype html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width">  
        <title>基本HTML5网页架构</title>  
    </head>  
    <body>  
        <p>HelloWorld</p>  
    </body>  
 </html>

再次在Mobile Safari中浏览此网页，就可以看到网页显示中的字变得很清晰，协调了。在此也可以将width设置为数字，如320或480,但是由于不同的设备不同，我们只需要使用device-width,浏览喊叫将会自动识别。

再次认识一下viewport, 这个元标签配置目前已经被大多数移动终端浏览器所支持，如iOS,Android,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"/>

就可以允许用户使用手指缩放当前的网页了。

定制化Android系统的viewport属性

Android的官方文档(http://developer.android.com/reference/android/webkit/WebView.html)中列举了一些特别的元标签属性，比如target-densitydpi. 这个属性主要是允许开发者指定当前网页是为哪种屏幕分辨率而开发的，同时也指出了如何处理媒体（如图片的缩放）等。如下：

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

【注】强烈建议所有需要从事Mobile Web网站开发的工程师们，阅读Apple提供的Safari HTML References(http://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/SafariHTMLRef.pdf).里面会有如默认宽度，viewport设置等诸多的具体配置使用细则。