再挖一个坑
，canvas的游戏开发基础暂时没时间弄了，等过一段时间闲下来了做一下。工作需要，补上一系列Mobile Web 开发的基础知识总结与相关文章的翻译。本系列针对传统的桌面浏览Web前端开发者。
我们先来一个基础的HTML5的网页框架，如下
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>基本HTML5网页架构</title>
</head>
<body>
<p>HelloWorld</p>
</body>
</html>
我们将其部署到Web服务器中，在桌面上的任何一个浏览器上访问，都会看到一致的体验，因为代码太简单了，根本没有什么跨桌面浏览器适配的坑。但如果我们使用移动浏览器如Mobile Safari来访问，就会看到一个问题----字太小了，如果不使用放大功能，根本就看不清上面的字。
宽度——我们做Mobile Web开发的第一个需要趟的河，因为移动设备的碎片片太严重了。以iPhone上的Mobile Safari为例，可能是因为Mobile Safari在请求到刚才的网页后，假设它是一个为桌面浏览器设计的网站（实际上可能大多数移动浏览器都是这样认为的)。因此Mobile Safari假设网页宽度是980像素（不同的浏览器可能默认不同），同时将其缩小以便全部显示。如果我们的网页是专门为移动终端设计的，那么我们就需要告诉移动浏览器不要以默认的宽度来显示。因此，我们需要使用viewport.对以上代码进行修改,如下：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>基本HTML5网页架构</title>
</head>
<body>
<p>HelloWorld</p>
</body>
</html>
再次在Mobile Safari中浏览此网页，就可以看到网页显示中的字变得很清晰，协调了。在此也可以将width设置为数字，如320或480,但是由于不同的设备不同，我们只需要使用device-width,浏览喊叫将会自动识别。
再次认识一下viewport, 这个元标签配置目前已经被大多数移动终端浏览器所支持，如iOS,Android,Opera Mini, Opera Mobile等。最后，我们再来看一个m.yahoo.com的viewport设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
可以看出，它阻止用户对网页进行缩放操作，如果我们将配置改为下面的
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
就可以允许用户使用手指缩放当前的网页了。
定制化Android系统的viewport属性
Android的官方文档(http://developer.android.com/reference/android/webkit/WebView.html)中列举了一些特别的元标签属性，比如target-densitydpi. 这个属性主要是允许开发者指定当前网页是为哪种屏幕分辨率而开发的，同时也指出了如何处理媒体（如图片的缩放）等。如下：
<meta name="viewport" content="target-densitydpi=device-dpi" />
【注】强烈建议所有需要从事Mobile Web网站开发的工程师们，阅读Apple提供的Safari HTML References(http://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/SafariHTMLRef.pdf).里面会有如默认宽度，viewport设置等诸多的具体配置使用细则。
分享到：
相关推荐
为了应对移动设备屏幕的碎片化，我们在开发Mobile Web应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性，用户在切换了屏幕的方向后，有些设计上或实现上的问题就会...
一般移动设备的浏览器都默认设置了一个viewport 元标签，定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所以pc上的网页基本...
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”...一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： <meta name=”viewport” content
viewport响应式模板
一个功能强大的viewport程序实例，可以满足你多种需要调节。
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备...
本节介绍 Ext的Border布局以及如何创建一个Viewport。 1、Viewport介绍： Viewport 是一类特殊的容器。它创建后会自动填充到整个页面区域，并能自动适应页面缩放。一般作为用用程序全局容器使用。 2、Border布局...
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建Viewport（2）源代码
h5 中viewport的详解，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。
3D视图自动切换捕捉脚本 Viewport Auto-Snap
Web-前端html+css从入门到精通 198. 移动端之viewport视口.zip
meta标签中的viewport可以控制设备屏幕的高度、宽度、初始的缩放比例等等，喜欢的朋友可以了解下
然而，每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢？学习html5 viewport的使用能帮你做到这一点……viewport 语法介绍： 复制代码代码如下: <!– ...
该程序是基于HelixToolkit.wpf，实现了3D模型的缩放旋转平移。
WPF三维立体动画源码 利用viewport3D来呈现
响应式 Web 设计 – Viewport 什么是 Viewport? viewport 是用户网页的可视...一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： width：控制 viewport 的大小，可以指定的一个值，如 600，或
前端开源库-viewport-list视区列表，返回设备及其视区的列表
[Bootstrap_3][中文]_02._Bootstrap原理，@media_與_viewport