`
blessdyb
  • 浏览: 239130 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

viewporthtml5mobile webjavascriptcss3 
阅读更多

      再挖一个坑 ，canvas的游戏开发基础暂时没时间弄了，等过一段时间闲下来了做一下。工作需要，补上一系列Mobile Web 开发的基础知识总结与相关文章的翻译。本系列针对传统的桌面浏览Web前端开发者。

 

      我们先来一个基础的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设置等诸多的具体配置使用细则。

 

 

 

分享到：
| 几个常用的检索排序算法的JavaScript实现
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics