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"属性，对于这些浏览器你需要使用如下的代码来处理视口宽度问题：
<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开发（九）——优化浏览器视口宽度设置的更多相关文章
- 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 ...
随机推荐
- HashSet和HapMap取distinct value
public class TestHashSetAndHashMap { private final int setNum=5000; @Test public void doTest(){ List ...
- Linux（centeros）安装weblogic10.3.6教程
http://wenku.baidu.com/link?url=yCLXoDpK7AMdy1_TgGXDncY42Bz6ptdaNq58GdicFWqyI5i-fCvui6mFuIYDt6jkqSiY ...
- 像素&分辨率
1.像素 是组成图像的基本单元:点 2.分辨率 是指在长和宽的两个方向上各拥有的像素的个数. 3.一张640*480的图片,表示图片在每个长度方向上都有640个像素,在宽度方向上都有480个像素,总数 ...
- Resellerclub –Cpanel 主机中如何设置 index 缺省首页
管理面板,点击[文件管理器],如图: ],如图 1. 进入 cPanel 管理面板,点击[文件管理器],如图: 选中[主目录] 显示隐藏文件],如图: ],如图 2. 选中[主目录]和[显示隐藏文件] ...
- php中的mysql 和 mysqli 区别
mysql是非持续连接函数,每次链接都会打开一个连接进程 mysqli是持续连接函数,多次运行将使用同一连接进程,从而降低服务器开销.
- linux OS install oracle database
#!/bin/bash#Purpose:Create and config oracle install.#Usage:Log on as the superuser('root') #1.creat ...
- Lucene.net 实现近实时搜索（NRT）和增量索引
Lucene做站内搜索的时候经常会遇到实时搜索的应用场景,比如用户搜索的功能.实现实时搜索,最普通的做法是,添加新的document之后,调用 IndexWriter 的 Commit 方法把内存中的 ...
- openwrt-智能路由器hack技术（2）---"网路信息监控和窃取"
openwrt-智能路由器hack技术(2)---"网路信息监控和窃取" 1 导读 PS:之前写的一个文章,现在发现结构内容排版不是太好,导致阅读体验太差,影响传播和SEO,所 ...
- Wix 安装部署教程(十五) --CustomAction的七种用法
在WIX中,CustomAction用来在安装过程中执行自定义行为.比如注册.修改文件.触发其他可执行文件等.这一节主要是介绍一下CustomAction的7种用法. 在此之前要了解InstallEx ...
- 【读书笔记】WebApi 和 SPA(单页应用)--knockout的使用
Web API从MVC4开始出现,可以服务于Asp.Net下的任何web应用,本文将介绍Web api在单页应用中的使用.什么是单页应用?Single-Page Application最常用的定义:一 ...