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

什么是视口(viewport)?

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

新建ch02r03.html

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

    
       
       
                 
     
            HTML5 Cookbook    
     
    
     
    
      
Lorem ipsum
    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.    
     
    
     
    
     
  

运行效果图：

       

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

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

该行代码主要用来应对老版本的PalmOS、AvantGo和黑莓设备。对于微软的PocketPC,需要使用一个特别的"MobileOptimized"属性。

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

因此该问题最完整的解决方案代码是：

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

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

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

关于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