再挖一个坑
，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设置等诸多的具体配置使用细则。
分享到：
相关推荐
**jQuery Mobile Web API 开发详解** 在Web应用开发中，jQuery Mobile 和 Web API 结合使用可以构建出功能强大且响应式的移动应用。本教程将深入探讨如何利用jQuery Mobile与C#实现的Web API2接口进行交互，展示...
《Head First之Mobile Web》是一本专为初学者设计的移动网页开发教程，以其独特的图文并茂的教学方式，深入浅出地介绍了移动互联网世界的各个方面。这本书涵盖了从基础概念到实践应用的所有关键知识点，旨在帮助读者...
为了应对移动设备屏幕的碎片化，我们在开发Mobile Web应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性，用户在切换了屏幕的方向后，有些设计上或实现上的问题就会...
### 低碳的终端Web开发——2012阿里技术嘉年华演讲精粹 #### 移动Web开发背景与挑战 在2012年的阿里技术嘉年华上，来自淘宝和一淘的前端工程师分享了关于“低碳的终端Web开发”的演讲内容。随着移动互联网的发展，...
【标题】"图文并茂让你必须弄懂viewport配套示例代码.rar"的资源是一份针对网页开发中的关键概念——“视口”（viewport）的详细教程。这份压缩包包含了一个HTML示例页面（视口--viewport.html）、一个链接到相关...
HTML5移动端开发中，`<viewport>`标签是一个至关重要的元素，它主要负责调整网页在不同设备上的显示方式，尤其在移动设备上。`<meta name="viewport">`元标签允许开发者精确控制页面的布局视口（layout viewport）、...
在开发Mobile Web应用时，处理手机设备的横竖屏问题是必不可少的。这涉及到对不同屏幕尺寸和方向的适应，以确保用户体验的流畅性和界面的视觉一致性。本文将深入探讨两种常用的技术方法：window.orientation属性和...
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”...一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下： <meta name=”viewport” content
Java Web开发环境及Web编程基础实验报告 本实验报告的目的是学习和掌握Java Web开发环境的搭建和配置，包括JDK、Eclipse和Tomcat的安装和配置，以及简单Web程序的发布。此外，还学习了HTML、CSS和JavaScript的基本...
此外，为了确保移动网站在不同设备上能够有良好的显示效果，开发者需要在网页的部分添加一个<meta> viewport标签。这个标签能够控制页面在移动设备上的布局方式，确保内容以适合屏幕的尺寸来正确显示。一个常用的...
随着移动互联网技术的迅猛发展，为iOS等智能终端开发应用程序成为了开发者的重要技能之一。iOS，作为Apple公司推出的移动操作系统，已经广泛应用于iPhone、iPod Touch、iPad等设备中。iOS应用开发主要有原生应用...
在移动Web开发中，`viewport` 和 `Android Webview` 是两个至关重要的概念。`viewport` 是一个虚拟的浏览区域，决定了网页在不同设备上的显示方式，尤其是对于智能手机和平板电脑这样的小屏幕设备。而`Android ...
Viewport简单来说，就是移动设备屏幕上用于显示网页的那一块区域，它可以是浏览器窗口的一部分，也可能包含在应用内的Web视图。默认情况下，移动设备的viewport通常设置得比浏览器可视区域大，以适应传统为桌面...
viewport响应式模板
一个功能强大的viewport程序实例，可以满足你多种需要调节。
### Web大学生网页作业成品——抗击疫情网站设计与实现(HTML+CSS)详解 #### 一、网站题目 本项目的主题围绕“抗击疫情”展开，旨在通过网站的形式表达对抗疫英雄们的敬意以及对疫情期间发生的感人故事进行记录。...
### 一、项目概述 该项目是一项面向学生的HTML5期末考核大作业，旨在通过实际操作让学生掌握HTML、CSS以及JavaScript的基本应用。项目的核心是创建一个旅游主题的网站，包含多个页面，涉及不同类型的网页设计，例如...
【前端开源库-viewport-list】是一个专为前端开发者设计的工具库，它的主要功能是提供一个设备视区的列表，帮助开发者更好地理解和处理不同设备在渲染网页时的可见区域，即视口。在Web开发中，视口是浏览器用于显示...