再挖一个坑
，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应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性，用户在切换了屏幕的方向后，有些设计上或实现上的问题就会...
鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐，传统方式根据主流系统分别开发相应的系统耗时又耗力，为了高效开发并节约开发项目成本，本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作...
vue.js vue.min.js vue-router.js vue-router.min.js
内容概要：本文档是关于DM8数据库系统的SQL语言使用手册，全面介绍了其SQL语言的基础特性、功能、语法规则及相关使用方法。手册首先概述了DM_SQL的特点和它支持的各种数据类型（例如：数值、字符串、日期时间类型等）及其对应的表达式。接下来深入探讨了一系列高级话题，涵盖数据定义语句-DDL、数据操纵语句-DML和数据控制语句，具体讲解了多种表类型（常规表、HUGE表、外部表）的创建与管理，以及索引机制（全文索引、位图连接索引等）。此外还提供了丰富的实例示范，确保读者能直观理解并应用于实际项目。同时，文档也阐述了各种系统级别的功能，如日志和检查点管理、MPP管理和统计信息生成等功能的使用方法。 适合人群：具有一定数据库基础知识并且有意深入了解DM8数据库系统特性的开发工程师、数据库管理人员或相关专业技术人员。 使用场景及目标：①指导开发人员掌握DM8中各类SQL命令的实际运用技巧；②帮助运维人员学会通过SQL来进行有效的数据维护与优化，从而提升数据库的整体性能。 其他说明：该手册不仅仅是SQL理论的讲述，而是通过大量的实例演示让使用者更加熟悉日常的工作任务。对于复杂的企业级应用场景尤其有
1108_ba_open_report
anslow_02_0109
opencv下载安装教程
aronson_01_0707
Wang Chi, Szeto Donald - Designing Deep Learning Systems. A software engineer's guide
使用Python语言对Django框架进行设计，选用豆瓣读书网站(https://book.douba n.com/)作为研究对象，基于用户的阅读行为数据，运用网络爬虫技术来抓取所需数据，随后对这些数据进行深度清理，存储到数据库中。借助ECharts的可视化工具，深入分析和直观展示，实现数据分析与可视化。
barbieri_01_0108
brown_3ck_01_0718
关键词：学生选课系统；Python语言；MySQL数据库 学生选课系统采用B/S架构，数据库是MySQL。网站的搭建与开发采用了先进的Python进行编写，使用了Django框架。该系统从三个对象：由管理员和学生、教师来对系统进行设计构建。主要功能包括：个人信息修改，对学生、教师信息、课程信息、课程分类、选择课程、班级、成绩通知、教室信息、系统管理等功能
ganga_02_0909
毕设-springboot大学生竞赛管理系统（免费领取）
agenda_3cd_01_0716
Swift语言教程：从入门到实践 Swift是苹果公司开发的一种多范式编程语言，用于iOS、macOS、watchOS和tvOS应用开发。它结合了C和Objective-C的优点，同时提供了现代编程语言的许多特性，如安全性、速度以及表达力。以下是从入门到实践的Swift语言教程。 一、Swift基础 1. Swift环境设置 Xcode安装：下载并安装最新版本的Xcode，这是开发Swift应用的集成开发环境（IDE）。 创建项目：在Xcode中创建一个新的Swift项目，了解项目结构。 2. 基本语法 变量与常量：使用var声明变量，使用let声明常量。 数据类型：整数（Int）、浮点数（DoubleFloat）、字符串（String）、布尔值（Bool）等。 类型安全：Swift是强类型语言，每个变量和常量在声明时都需要指定类型（尽管Swift也能自动推断类型）。 运算符：算术运算符、比较运算符、逻辑运算符等。 3. 控制流 条件语句：if、else if、else。 循环语句：for循环、while循环、repeat-while循环。 控制转移语句：break、continue
【宝城期货-2025研报】钢材、铁矿石日报：关税扰动不断，钢矿弱势运行.pdf
anslow_05_0110
介绍了清理C盘空间的多种方法，包括使用系统工具、清理临时文件、卸载残留文件、移动用户文件夹、清理系统日志和虚拟内存等，旨在帮助用户有效释放C盘空间，提升电脑性能。