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

最新推荐文章于 2024-05-17 09:40:17 发布

hmg_monkey

最新推荐文章于 2024-05-17 09:40:17 发布

阅读量651

点赞数

分类专栏： Mobil web 文章标签： mobile web开发移动设备

Mobil web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

    Html代码   
    
  
 <!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.对以上代码进行修改,如下：

    Java代码   
    
  
 <!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设置

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

可以看出，它阻止用户对网页进行缩放操作，如果我们将配置改为下面的

    Html代码   
    
 <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. 这个属性主要是允许开发者指定当前网页是为哪种屏幕分辨率而开发的，同时也指出了如何处理媒体（如图片的缩放）等。如下：

    Html代码   
    
 <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设置等诸多的具体配置使用细则。

hmg_monkey

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Mobile Web开发基础之一————viewport标签

我们先来一个基础的HTML5的网页框架，如下Html代码 > html> head> meta charset="utf-8"> title>基本HTML5网页架构title> head> body> p>HelloWorldp> body>
复制链接

扫一扫

专栏目录