HTML5与移动Web开发：开发概述，像素区别，HTML5和其他技术

1，开发概述

1.1，移动互联网

移动互联网：移动互联网是移动和互联网融合的产物，继承了移动随时随地随身和互联网分享、开放、互动的优势，是整合二者优势的“升级版本”，即运营商提供无线接入，互联网企业提供各种成熟的应用。移动互联网被称为下一代互联网web3.0。

移动互联网的特点：“小巧轻便”及“通讯便捷”两个特点，决定了移动互联网与PC互联网的根本不同之处，发展趋势及相关联之处。可以“随时、随地、随心”地享受互联网业务带来的便捷，还表现在更丰富的业务种类、个性化的服务和更高服务质量的保证。当然，移动互联网在网络和终端方面也受到了一定的限制。

• 便捷性：不仅体现在用户携带的便捷性，更表现在用户使用时间的便捷性，可随时地非常方便地接入无线网络。
• 即时性：由于有了上述便捷性，人们可以充分利用生活中、工作中的碎片化时间，接受和处理互联网的各类信息。不再担心有任何重要信息、时效信息被错过了。
• 智能性：移动互联网相比较传统互联网，在操作方面更加智能，可通过手动、语音、智能手机自动识别获取等功能实现信息收集而进行智能机操作。
• 个性化：移动互联网可在用户许可的情况下自动获取关于用户的位置、历史记录、日常使用习惯，并对此进行后台处理、分析，从而将最为符合用户习惯的个性化内容呈现给用户，提高用户体验。
• 网络局限性：移动互联网业务在便携的同时，也受到了来自网络能力和终端能力的限制：在网络能力方面，受到无线网络传输环境、技术能力等因素限制；在终端能力方面，受到终端大小、处理能力、电池容量等的限制。

1.2，移动Web

 移动WEB的终端设备 ——智能手机的发展：

（1）WAP1.0 时代

• 2000年基本只有彩铃、图片等服务内容。

（2）WAP2.0 时代

• 2006年出现了新闻资讯、即时聊天

（3）3G 时代

• 硬件设备的提升：各种单核、双核甚至四核CPU的推出。
• 平台的开放性：Android系统的免费开源让各家手机制造商可以制造出体验更好、功能更强的手机。
• 更好的用户体验：丰富的软件、游戏开发接口以及可定制的用户界面。
• 丰富的应用程序：手机移动操作系统厂商建立了手机设备应用程序市场。
• 创业机会

（4）4G时代：4G网络被称为“3G与WLAN一体化”网络，它不仅能够快速的传输数据、高质量、音频、视频和图像等，同时还能够满足绝大部分用户对无线网络以及电视服务的要求，在传输速度上，4G网有着不可比拟的优越性。

（5）5G时代：三个“极”，极高的速率、极大的容量以及极低的延迟

移动WEB的支撑系统——智能手机系统：

• Android(安卓)系统
• iOS(苹果)系统
• Windows Phone系统
• Blackberry OS(黑莓)

移动WEB的应用环境——智能手机浏览器：随着智能手机的发展，Android系统的智能手机和iOS系统的iPhone手机不断推出各种应用程序，并且都会在系统中内置一款移动Web浏览器。

平台	内置浏览器
IOS	Safari
安卓	安桌Webkit或Chrome
黑莓	黑莓Webkit
Windows Phone	IE

移动浏览器包括：内置浏览器、可下载浏览器、代理浏览器以及WebView：

• 内置浏览器：每部手机都有内置浏览器，也就是说这个浏览器属于固件，通常时操作系统厂商开发的，大多数内置浏览器都被紧密集成到底层的操作系统中，也就是说，无法单独升级浏览器。
• 可下载浏览器：有许多浏览器是用户能够下载并且自行安装的，Opera、Firefox、Chrome、UC就是其中几个重要的浏览器。
• 代理浏览器：代理浏览器相比渲染引擎能够解析和执行HTML、CSS和javaScript。但并不是运行在设备上，而是在远程服务器上
• WebView：WebView是留给原生应用的一个操作系统浏览器接口。

移动Web浏览器特点：

• 屏幕尺寸有限
• 硬件设备的完善
• 基于Webkit核心
• 触屏、缩放等交互操作

1.3，移动Web开发

移动Web开发与原生APP（JAVA）的不同：

• Native[neiteiv] App（原生APP），也就是完全使用移动设备系统语言写的客户端，iPhone iPad就是纯Object-C，安卓就是纯JAVA, 就是用户看到的界面啦体验到的交互啦都是原生的。这是性能最棒的开发方式，但灵活性就没下面的好。
• Web App，在移动浏览器里打开的，纯HTML+CSS+JS，但是对设备硬件调用较弱。
• Hybrid[ˈhaɪbrɪd] App.[HTML5 in mobile devices]，实际上是使用原生写了一个容器，然后使用HTML+CSS+JS来实现用户界面和交互。Web App的短处便可以克服（因为自己写的容器可以辅助暴露偏底层的接口，比如本地存储或者麦克风控制之类），同时比起纯原生的java或者object-c开发灵活性要高。

基于原生SDK的开发的优劣势：

（1）优势：

• 更好的用户体验和交互操作。
• 不受网络限制，节省宽带成本。
• 可以充分发挥设备硬件和操作系统的特性。

（2）劣势：

• 平台间移植困难，存在版本间的兼容问题的风险。
• 开发周期长，维护成本高，调试困难。
• 需要依赖第三方应用商店的审核上架。

设计移动Web需要考虑的问题：

• 移动设备的屏幕尺寸和分辨率。
• 移动用户需要的内容。
• 使用的HTML、CSS及JavaScript是否有效且简洁。
• 网站是否需要为移动用户使用独立域名。
• 网站需要通过怎样的测试。

2，分辨率

2.1，概念

设备像素DP：也被称作为物理像素，它表示显示设备的真实像素，此像素是设备的固有属性，也就是说，从出厂的那一刻，设备像素已经固定，不会再发生改变。通常使用分辨率来描述设备像素，例如1920*1080（笔记本像素），表示设备横向有1920像素点，纵向有1080个像素点。

像素密度PPI：每英寸长度的像素点数量，数值越高，代表屏幕能以更高的密度显示图像。

 

设备独立像素DIP：随着技术的进步，很小的屏幕能容纳很高的物理像素，比如1920*1080以前只能应用于大的显示器，现在可能被容纳于一个小的移动端设备中。

在web浏览器中，传统开发并不考虑到任何缩放，1px实际等于1个物理像素点（1pixel），如果引用到移动端。设置一个<div>高度为80px，那么理论上：

• iphone3GS（320*480），显示480/80=6个<div>元素
• iphone4S（640*960），显示960/80=12个<div>元素

这样同样大小的屏幕，显示的信息量就会完全不同，4s虽然能显示更多信息，但是屏幕太小反而其他信息视觉上显得小，效果不佳。

设备像素比DPR：其定义了物理像素和设备独立像素的对应关系。

设备像素比=物理（设备）像素/设备独立像素

即

CSS像素：是web编程的概念，用于逻辑上衡量像素的单位（无实际意义），也就是我们做网页时用到的像素，是抽象的，不是实际存在的。web开发过程中，我们基本使用的都是CSS像素。例如：width: 128px的元素在缩放200%以后，宽度依然是128个css像素，只不过每个css像素的宽度和高度变为原来的两倍。CSS像素相当于多少个设备像素取决于屏幕的特性（是否高密度）和用户进行的缩放。当用户放大的越大，一个CSS像素覆盖的设备像素就越多。

2.2，设备像素和设备独立像素

因为设备独立像素是包含了CSS像素的大类，所以我们可以直接讨论设备独立像素和设备像素之前的区别和联系。

PC端 —— 1个设备独立像素 = 1个设备像素 （在100%，未缩放的情况下，如果缩放到200%可以说1个设备独立像素 = 2个设备像素）。

移动端 —— 根据设备不同有很大的差异，根据 PPI不同我们可以得到不同的换算关系，标准屏幕（160PPI）下 1个设备独立像素 = 1个设备像素。其中：

• 120-160之间的手机被归为低密度手机。
• 160-240被归为中密度，240-320被归为高密度。
• 320以上被归为超高密度（例如苹果公司的Retina显示屏）。

早期的移动设备，只有设备像素，没有设备独立像素，在不缩放的前提下，CSS 中的 1px 就代表着 1 个物理像素。比如 iphone3 的物理像素是 320 * 480，那么 width: 320px; 的元素将会占满 iphone3 的屏幕宽度。

从 iphone4 开始，苹果公司便推出了所谓的 Retina 屏，物理像素变成 640 * 960，但是屏幕尺寸没有变化，也就是说单位面积上的物理像素的数量增加了，或者说屏幕密度增加了。如果还按照原来那样，1px CSS 像素由 1 个物理像素来渲染， 那么 width: 320px; 的元素只会占据半个屏幕的宽度。原来在 iphone3 上能够占满屏的网页，在 iphone4 上只会占一半的屏幕，同时 font-size: 20px; 的字体在 iphone4 上的尺寸也会缩小。

为了让同一个网页在 iphone4 和 iphone3 上的有相同的显示效果，引入了独立像素的概念。iphone4 的独立像素为 320 * 480，是 iphone4 的物理像素的一半，和 iphone3 的物理像素一样。也就是说，iphone4 上的 1 个独立像素 == 2 个物理像素。在 iphone4 上，在不缩放的前提下，CSS 中的 1px 便由 1 个独立像素来渲染，相当于 2 个物理像素。这样，width: 320px; 的元素由 320 个独立像素来渲染，也就是由 640 个物理像素来渲染，正好占满 iphopn4 的屏幕宽度。font-size: 20px; 的字体在 iphone3 和 iphone4 上的尺寸也相同，只不过在 iphone4 上的字体更清楚。

可看到同一张图片在各屏幕显示大小不一，我们希望不同屏幕显示图片的大小要一致。 我们要计算图片缩放比例，计算公式： 图片逻辑像素大小px1 / 图片缩放后实际像素大小px2 = 设备像素dp / 设备独立像素dips

2.3，CSS像素

当我们缩放页面的时候，元素的css像素数量不会改变，改变的只是每个css像素的大小。也就是说width: 128px的元素在缩放200%以后，宽度依然是128个css像素，只不过每个css像素的宽度和高度变为原来的两倍。如果原本元素宽度为128个设备像素，那么缩放200%以后元素宽度为256个设备像素（css像素宽度始终是128）。在没有缩放的情况下，1个css像素等同于一个设备独立像素。

CSS像素在视觉上是很容易改变大小的，比如缩放浏览器页面，就是改变的CSS像素，当放大一倍，那么一个CSS像素在横向或者纵向上会覆盖两个设备独立像素。例如宽度100px像素，当页面放大一倍，它会在横向上由原本占据100个设备独立像素，变成占据200个设备独立像素；如果缩小，则恰好相反，只能占据50个设备独立像素。

（1）设备像素(深蓝色背景)、CSS像素(半透明背景)。

（2）左图表示当用户进行缩小操作时，一个设备像素覆盖了多个CSS像素。

（3）右图表示当用户进行放大操作时，一个CSS像素覆盖了多个设备像素。

无论CSS像素是缩小还是放大，它是像素数目是不变的，比如100px，无论缩放，它依然是100px，只不过它占据的设备独立像素发生了变化（体积发生了变化，视觉大小上发生了变化而已）。

3，HTML5和其他技术

3.1，HTML5的基本内容

HTML5是近十年来Web标准最巨大的飞跃。和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上视频、音频、图像、动画，以及与电脑的交互都被标准化。

HTML5实际上指的是包括HTML、CSS和JavaScript脚本在内的一整套技术的组合，希望通过HTML5能够轻松地实现许多丰富的网络应用需求，而减少浏览器对插件的依赖，并且提供更多能有效增强网络应用的标准集。

HTML5建立的新规则：

• 新特性应该基于HTML、CSS、DOM以及JavaScript；
• 减少对外部插件的需求，例如Flash；
• 更优秀的错误处理；
• 更多取代脚本的标记；
• HTML5应该独立于设备；
• 开发进程应对公众透明。

HTML5的优势：

• WEB浏览器之间的兼容性很低：在某个WEB浏览器上可以正常运行的HTML、CSS、JavaScript等WEB程序，在另一个WEB浏览器上就不一定能正常运行了。导致这种问题的主要原因就是规范不统一，没有被标准化。在HTML5中，这个问题被解决了。HTML5的使命是详细分析各WEB浏览器所具有的功能，然后以此为基准，要求这些浏览器内部的功能都要符合一个通用标准。
• 文档结构不够明确：在HTML5之前的HTML版本中，文档结构不够明确、清晰。例如为了要表示标题、正文、之前一般都会使用DIV元素，但是严格来说，DIV元素不是一个能把文档结构表示的很清楚的元素，使用过多会导致阅读时不仔细研究或者很难去看出文档结构，而且对于搜索引擎或者屏幕阅读等等应用程序来说，过多的使用DIV元素，那这些程序从哪到哪算是正文都很难确定。在HTML5中，为了解决这个问题，增加很多和结构相关的元素。

HTML4中的内容标签级别相同，无法区分各部分内容。而HTML5中的内容标签互相独立，级别不同，搜索引擎以及统计软件等均可快速识别各部分内容。

• WEB应用程序的功能受到限制：HTML5与WEB应用程序的关系十分薄弱，WEB应用程序的特征是先从网络下载，然后忠实的运行。因此，他会对威胁到用户安全的功能进行限制，目前安全性的保障这方面已经做到了。但是对于WEB应用程序来说，一直以来HTML5真正所做出的贡献是很少的。例如 就连想同时上传多个文件都不允许。为了弥补这方便的不足，HTML5已经开始提供各种各样的WEB应用上的新API。各浏览器也在快速封装这些API。 HTML5已经丰富了WEB应用的实现变成了可能。

HTML5新增特性：

• 用于绘画的canvas元素；
• 用于媒介回放的video和audio元素；
• 对本地离线存储的更好的支持；
• 新的特殊内容元素，例如article、footer、header、nav、section；
• 新的表单控件，例如calendar、date、time、email、url、search。

基于HTML5的移动Web应用：

• 地理定位：这是一个HTML5独有的API，移动设备非常需要定位服务。
• 离线应用程序：因为移动设备经常处于移动中，而且并非始终在线，而离线应用程序在无论是否存在网络连接时都可以使用，因此十分适合移动设备。
• 语音识别：HTML5将speech属性加入表单标签中，而对手机说话比在上面写字要简单得多。
• 新输入类型：新的表单输入类型让表单在移动设备上变得更容易填写。
• 标签canvas-canvas：此标签十分适合用来在移动设备应用程序中添加动画、游戏以及图像。
• 视频及音频标签：这两种标签在Android以及iOS下都能获得很好的支持，可以使用它们来轻松地在Web应用程序中添加视频及音频。
• 移动设备事件touchstart和touchmove：此事件是专为触屏式移动设备设计的。

3.2，jQuery Mobile

jQuery Mobile 是一个用于创建移动端web应用的的前端框架。通过使用jQuery Mobile 可以 "写更少的代码，做更多的事情" : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。jQuery Mobile是jQuery 框架的一个组件（而非jquery的移动版本）。jQuery Mobile是一款基于HTML5的用户界面系统，旨在使所有智能手机，平板电脑和桌面设备上都可以访问的响应网站和应用。 jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。

jQuery Mobile 的特性：

• 基于jQuery构建
• 兼容绝大多数手机平台
• 轻量级的库
•  模块化结构
•  HTML5标记驱动的配置
• 渐进增强原则
• 响应设计
• 强大的Ajax的导航系统
• 易用性
• 支持触摸和鼠标事件
• 统一的UI组件
• 强大的主题化框架

3.3，其他技术

jQTouch：jQTouch 与jQuery Mobile 十分相似，也是一个jQuery插件，同样也支持HTML页面标签驱动，实现移动设备视图切换效果。但与jQuery Mobile不同在于，它是专为WebKit内核的浏览器打造的，可以借助该浏览器的专有功能对页面进行渲染；此外，开发时所需的代码量更少。如果所开发的项目中，目标用户群都使用WebKit内核的浏览器，可以考虑此框架。

Sencha Touch：Sencha Touch 是一套基于ExtJS开发的插件库。它与jQTouch相同，也是只针对WebKit内核的浏览器开发移动应用，拥有众多效果不错的页面组件和丰富的数据管理，并且全部基于最新的HTML 5与CSS 3的Web标准。与jQuery Mobile不同之处在于，它的开发语言不是基于HTML标签，而是类似于客户端的MVC风格编写JavaScript代码，相对来说，学习周期较长。

PhoneGap[ɡæp]：PhoneGap是一个基于HTML、CSS、JS创建跨平台移动应程序的快速开发平台。与传统Web应用不同的是，它使开发者能够利用iPhone、Android等智能手机的核心本地功能，比如GPS、传感器、震动。

• PhoneGap是一个能够让Web开发者快速进行移动app开发的开源框架。
• PhoneGap可以让不懂Object-C的开发者也可以开发IOS应用程序。
• PhoneGap实现了“一次开发，到处使用”。

Node.js：Node.js是一个javascript运行环境。它让javascript可以开发后端程序，实现几乎其他后端语言实现的所有功能，可以与PHP、Java、Python、.NET、Ruby等后端语言平起平坐。

• Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
• Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。