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

每个移动设备都有自己默认的视口宽度，如果你不显示的设置它的值，在渲染页面的时候你可能会得不到你想要的效果。比如，如果不设置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

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

HTML5移动Web开发实战 PDF扫描版
<HTML5移动Web开发实战>提供了应对这一挑战的解决方案.通过阅读本书,你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能,横跨多个移动平台.全书共分10章,从移动Web. ...
浅淡HTML5移动Web开发
说实话,我们这次开发移动端的项目,整个项目组的人都是第一次,最初立项的时候为是选择native app和web app还争论了一番,最后综合考虑,我们选择了web(我们选择了h5)开发.但从这两种开发 ...
HTML5移动Web开发
1. 响应式web设计说到这个,移动开发面对的屏幕尺寸那叫一个丰富,其中安卓阵营就够让人头痛的.我们在PC端常用的两种布局方式就是固定布局和弹性布局,前者设置一个绝大多数电脑能正常显示的固定宽度居中 ...
HTML5移动Web开发（八）——避免文本字体大小重置
适用设备:iOS.Windows Mobile在一些移动设备上,比方说iPhone,Windows Mobile,当用户把手机切换到横屏时,浏览器会自动地重置文本字体大小.这可能会对我们造成困扰,因为 ...
Web开发须知的浏览器内幕缓存与存储篇（2）
本文禁止转载,由UC浏览器内部出品. 3. HTTP Cache 综述 HTTP Cache是完全按照IETF规范实现的,最新的RFC规范地址是 https://tools.ietf.org/html ...
HTML5移动Web开发（十）——在浏览器中启动手机原生应用
用户可以在浏览器中启动移动设备的原生应用程序,比如地图.电话.短信等,具体能够启动哪些应用程序,这取决于该移动设备上哪些原生应用是否允许从浏览器启动. 新建ch02r05.html <!doct ...
html5移动web开发实战必读书记
原文 http://itindex.net/detail/50689-html5-移动-web 主题 HTML5 一.配置移动开发环境 1.各种仿真器.模拟器的下载安装 http://www.mob ...
HTML5移动Web开发（一）——HTML5和移动网站基本概念以及一些模拟器
当前,手机设备发展迅猛.屏幕尺寸各不相同.存储和性能仍有局限性,如何结合HTML5的功能,在多平台上创建高性能.响应式的移动网站,是Web开发者所要面对的首要挑战.HTML5以及移动网站都是很有前景的 ...
Web开发须知的浏览器内幕缓存与存储篇（1）
本文禁止转载,由UC浏览器内部出品. 0.前言大纲浏览器缓存和存储相关的功能分为四类: 加载流程 Memory Cache Application Cache(简称AppCache) HTTP C ...

随机推荐

PhoneGap(二维码扫描 )
关于 phoneGap 如何做二维码扫描 1. 先配置好, 环境 http://coenraets.org/blog/cordova-phonegap-3-tutorial/http: ...
(转C#中Enum用法小结)
enums枚举是值类型,数据直接存储在栈中,而不是使用引用和真实数据的隔离方式来存储. (1)默认情况下,枚举中的第一个变量被赋值为0,其他的变量的值按定义的顺序来递增(0,12,3...),因此以下 ...
工作当中实际运用（3）——js原生实现鼠标点击弹出div层在点击隐藏
function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...
解剖SQLSERVER 第十五篇 SQLSERVER存储过程的源文本存放在哪里？（译）
解剖SQLSERVER 第十五篇 SQLSERVER存储过程的源文本存放在哪里?(译) http://improve.dk/where-does-sql-server-store-the-sourc ...
分享:用 NDK C++做底层开发的Android 浏览器,纯免费,无广告
分享:用 NDK C++做底层开发的Android 浏览器,纯免费,无广告操作简单,傻瓜一看就会无毒.无广告.无负作用,完全免费下载地址1:http://awdjcfeizb.l33.yunpa ...
跨平台开源通讯组件elastic communication
elastic communication是基于c#开发支持.net和mono的通讯组件(简称EC),EC的主要目的简化mono和.net下的通讯开发难度,通过EC可以非常快速地开发基于mono和.n ...
JDBC学习1：详解JDBC使用
什么是JDBC JDBC(Java Database Connectivity),即Java数据库连接,是一种用于执行SQL语句的Java API,可以为多种关系数据库提供同一访问,它由一组用Java ...
nw.js FrameLess Window下的窗口拖拽与窗口大小控制
nw.js FrameLess Window下的窗口拖拽与窗口大小控制很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...
作业三（代码规范、代码复审、PSP）
1.代码规范: 我支持代码要有规范,理由如下. (1).艺术是一个很带有个人风格的学科,天马行空才能凸显出自己的价值.但不要忘了,会艺术的不是生下来就会艺术, 他也需要按照前辈的步骤一步一步的学习基础 ...
<HTML5和CSS3响应式WEB设计指南>译者序
"不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...

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

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

随机推荐

热门专题