HTML5移动Web开发（九）——优化浏览器视口宽度设置

2022-12-05 22:26:00

每个移动设备都有自己默认的视口宽度，如果你不显示的设置它的值，在渲染页面的时候你可能会得不到你想要的效果。比如，如果不设置iPhone的视口宽度，它将会按照980像素的宽度渲染页面，如果你的页面设计不是按照这个像素宽度做的，你们出来的效果就会不尽如人意了。

什么是视口(viewport)?
为了手机能获得良好的网页浏览体验，Apple在移动版的Safari中引入了viewport meta标签，他的作用就是创建一个虚拟的视口，而这个虚拟窗口的分辨率接近于桌面显示器，Apple将其默认为980px，其他浏览器厂商也引入了这个技术，但是虚拟窗口的分辨率默认值就各有不同了。

新建ch02r03.html
我们可以通过如下的方式来优化上面提到的视口宽度问题。

<!doctype html>

<html>

  <head>

  <meta charset="utf-8">

  <!--

  1.如果没有这句，在移动设备上运行该例子，该页面的字体会变得非常小，很难辨认。

  2.加上该句，该属性会告诉浏览器视口的宽度已经等于设备的可视宽度，不需要缩放页面来适应设备的屏幕大小。因此对iPhone来说，视口的宽度在竖屏模式下是320px，横屏模式下是480px。

   -->

  <meta name="viewport" content="width=device-width">

    <style>

    </style>

  </head>

  <body>

    <header>

      HTML5 Cookbook

    </header>

    <div id="main">

    <h1>Lorem ipsum</h1>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    </div>

    <footer>

    </footer>

  </body>

</html>

运行效果图：

有些古老的移动设备浏览器不能识别"viewport"属性，对于这些浏览器你需要使用如下的代码来处理视口宽度问题：

关于Windows Phone上的IE浏览器的视口文档
有一篇关于Windows Phone7上的IE浏览器的视口问题的文章，给出了对开发中非常有用的信息，比如，Windows Phone7平台上的IE浏览器是如何实现"device-width"属性的等。
http://blogs.msdn.com/b/iemobile/archive/2010/11/22/the-ie-mobile-viewport-on-windows-phone-7.aspx

关于Safari的视口文档
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

关于黑莓的视口文档
http://docs.blackberry.com/en/developers/deliverables/4305/BlackBerry_Browser-4.6.0-US.pdf

码农公寓

相关文章