每个移动设备都有自己默认的视口宽度，如果你不显示的设置它的值，在渲染页面的时候你可能会得不到你想要的效果。比如，如果不设置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"属性，对于这些浏览器你需要使用如下的代码来处理视口宽度问题：

<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

HTML5移动Web开发（九）——优化浏览器视口宽度设置的更多相关文章

  1. HTML5移动Web开发实战 PDF扫描版​

    <HTML5移动Web开发实战>提供了应对这一挑战的解决方案.通过阅读本书,你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能,横跨多个移动平台.全书共分10章,从移动Web. ...

  2. 浅淡HTML5移动Web开发

    说实话,我们这次开发移动端的项目,整个项目组的人都是第一次,最初立项的时候为是选择native app和web app还争论了一番,最后综合考虑,我们选择了web(我们选择了h5)开发.但从这两种开发 ...

  3. HTML5移动Web开发

    1. 响应式web设计 说到这个,移动开发面对的屏幕尺寸那叫一个丰富,其中安卓阵营就够让人头痛的.我们在PC端常用的两种布局方式就是固定布局和弹性布局,前者设置一个绝大多数电脑能正常显示的固定宽度居中 ...

  4. HTML5移动Web开发（八）——避免文本字体大小重置

    适用设备:iOS.Windows Mobile在一些移动设备上,比方说iPhone,Windows Mobile,当用户把手机切换到横屏时,浏览器会自动地重置文本字体大小.这可能会对我们造成困扰,因为 ...

  5. Web开发须知的浏览器内幕 缓存与存储篇（2）

    本文禁止转载,由UC浏览器内部出品. 3. HTTP Cache 综述 HTTP Cache是完全按照IETF规范实现的,最新的RFC规范地址是 https://tools.ietf.org/html ...

  6. HTML5移动Web开发（十）——在浏览器中启动手机原生应用

    用户可以在浏览器中启动移动设备的原生应用程序,比如地图.电话.短信等,具体能够启动哪些应用程序,这取决于该移动设备上哪些原生应用是否允许从浏览器启动. 新建ch02r05.html <!doct ...

  7. html5移动web开发实战必读书记

    原文  http://itindex.net/detail/50689-html5-移动-web 主题 HTML5 一.配置移动开发环境 1.各种仿真器.模拟器的下载安装 http://www.mob ...

  8. HTML5移动Web开发（一）——HTML5和移动网站基本概念以及一些模拟器

    当前,手机设备发展迅猛.屏幕尺寸各不相同.存储和性能仍有局限性,如何结合HTML5的功能,在多平台上创建高性能.响应式的移动网站,是Web开发者所要面对的首要挑战.HTML5以及移动网站都是很有前景的 ...

  9. Web开发须知的浏览器内幕 缓存与存储篇（1）

    本文禁止转载,由UC浏览器内部出品. 0.前言 大纲 浏览器缓存和存储相关的功能分为四类: 加载流程 Memory Cache Application Cache(简称AppCache) HTTP C ...

随机推荐

  1. html中使用js实现内容过长时部分

    有时数据内容太长时我们并不希望其全部显示出来,因为这样可能会导致用于显示这些内容的标签被撑开影响美观. 这时就希望能够实现默认只显示部分内容,在鼠标放上去的时候再将全部的内容显示出来. 这里提供一个简 ...

  2. nginx.conf各参数的意义

    搬运+翻译至 http://qiita.com/syou007/items/3e2d410bbe65a364b603 /etc/nginx/nginx.conf 记录各个参数的意义 user user ...

  3. 快速学习C语言二: 编译自动化, 静态分析, 单元测试，coredump调试，性能剖析

    上次的Hello world算是入门了,现在学习一些相关工具的使用 编译自动化 写好程序,首先要编译,就用gcc就好了,基本用法如下 gcc helloworld.c -o helloworld.o ...

  4. 谈谈eclipse使用技巧一

    俗话说的好啊,“工于利启事,必先善其器”,如果说你的编程功底是一个枪法的话,那么强大的eclipse就是android战士们最好的武器. 这里,我们来总结eclipse的使用技巧,从而使我们的编程达到 ...

  5. DataPager 分页样式（css）

    <asp:DataPager ID="> <Fields> <asp:NextPreviousPagerField ShowFirstPageButton=&q ...

  6. 测试了几款 C# 脚本引擎 , Jint , Jurassic , Nlua, ClearScript

    测试类 public class Script_Common { public string read(string filename) { return System.IO.File.ReadAll ...

  7. 来科普下游标(MSSQL)这东西。。。

    刚刚接到一个面试电话,对头的先生问我懂不懂触发器和存储过程,当时是觉得有些好笑,毕竟“视图.触发和存储”是咱数据库工程师的吉祥三宝,怎么可能不认识?只是稍后他还问了下游标这东西,仔细想想我是不常使用C ...

  8. RCP：eclipse的DEBUG机制

    Eclipse debug文档翻译 运行一个程序需要添加launch configurable,在自定义launch configuration的时候会指定模式,比如run,debug,profile ...

  9. C# 关于Try/Catch对系统性能影响的总结

    自从开始考虑代码的运行效率和性能以后,写代码考虑的东西越来越多了,比如什么时候应该加try/catch?加太多的try/catch会不会降低性能?今天就来分享一下对try/catch对性能影响的一些看 ...

  10. [HIMCM暑期班]第1课:概述

    作为这个系列的开始,我会把每一节课上过的内容,与同学们互动后发现他们的闪光点记录下来,以后其他要准备该比赛的人借鉴和参考. 第一节课是概述,主要讲什么是数学建模,还有建模可以帮助我们做什么.举了三个例 ...