文章来自:http://blessdyb.iteye.com/blog/1534051
我们先来一个基础的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设置等诸多的具体配置使用细则。
相关推荐
**jQuery Mobile Web API 开发详解** 在Web应用开发中，jQuery Mobile 和 Web API 结合使用可以构建出功能强大且响应式的移动应用。本教程将深入探讨如何利用jQuery Mobile与C#实现的Web API2接口进行交互，展示...
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 中国餐饮协会 <!-- 引入外部CSS文件 --> <li><a href="#">首页</a></li> <li><a href="#">美食介绍</a></li> <li><a href...
《Head First之Mobile Web》是一本专为初学者设计的移动网页...通过《Head First Mobile Web》的学习，你将能够构建出针对移动设备优化的网页，并掌握现代移动开发的核心技术，为进入移动互联网领域打下坚实的基础。
HTML5移动端开发中，`<viewport>`标签是一个至关重要的元素，它主要负责调整网页在不同设备上的显示方式，尤其在移动设备上。`<meta name="viewport">`元标签允许开发者精确控制页面的布局视口（layout viewport）、...
### 低碳的终端Web开发——2012阿里技术嘉年华演讲精粹 #### 移动Web开发背景与挑战 在2012年的阿里技术嘉年华上，来自淘宝和一淘的前端工程师分享了关于“低碳的终端Web开发”的演讲内容。随着移动互联网的发展，...
为了应对移动设备屏幕的碎片化，我们在开发Mobile Web应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性，用户在切换了屏幕的方向后，有些设计上或实现上的问题就会...
Java Web开发环境及Web编程基础实验报告 本实验报告的目的是学习和掌握Java Web开发环境的搭建和配置，包括JDK、Eclipse和Tomcat的安装和配置，以及简单Web程序的发布。此外，还学习了HTML、CSS和JavaScript的基本...
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”...一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： <meta name=”viewport” content
在开发Mobile Web应用时，处理手机设备的横竖屏问题是必不可少的。这涉及到对不同屏幕尺寸和方向的适应，以确保用户体验的流畅性和界面的视觉一致性。本文将深入探讨两种常用的技术方法：window.orientation属性和...
【标题】"图文并茂让你必须弄懂viewport配套示例代码.rar"的资源是一份针对网页开发中的关键概念——“视口”（viewport）的详细教程。这份压缩包包含了一个HTML示例页面（视口--viewport.html）、一个链接到相关...
总结来说，jQuery Mobile通过提供一套简洁的API和丰富的主题机制，极大地降低了移动Web开发的复杂性。开发人员可以利用这个框架快速地开发出适合各种移动设备的网站和应用程序，同时保持它们的高性能和良好的用户...
在移动Web开发中，`viewport` 和 `Android Webview` 是两个至关重要的概念。`viewport` 是一个虚拟的浏览区域，决定了网页在不同设备上的显示方式，尤其是对于智能手机和平板电脑这样的小屏幕设备。而`Android ...
通过设置meta标签的viewport属性，可以控制视区的宽度、初始缩放比例、最小和最大缩放比例以及是否允许用户缩放页面，这些设置对于保证Web应用在移动设备上的用户体验至关重要。 为了开发出高性能的Native-like Web...
viewport响应式模板
jQuery Mobile 是一个轻量级...总的来说，这个资源包提供了一个基础的起点，帮助你理解并开始使用jQuery Mobile进行移动Web开发。通过研究“Hello World”示例，你可以逐步掌握如何构建响应式的、功能丰富的移动应用。
在Web开发中，视口是浏览器用于显示网页内容的区域，尤其在移动设备上，由于屏幕尺寸各异，视口的概念显得尤为重要。了解和管理不同设备的视口可以帮助开发者优化页面的响应式布局，确保在各种设备上都能提供良好的...
在移动端Web开发中，通过设置viewport元标签可以控制网页在移动设备上的布局和缩放行为。viewport元标签的基本用法如下： ```css @viewport { width: device-width; /* 设置宽度等于设备宽度 */ initial-scale: 1...