1.2 HTML5与移动Web开发

HTML5技术早在2011年就已经被各大浏览器厂商所支持，但是该标准真正制定的完成时间是2014年10月29日。HTML5具有以下特性，以适应移动Web开发。

语义化：HTML5拥有更加丰富的标签，对微数据、微结构等有着非常友好的支持，赋予网页更好的语义和结构。

本地存储：HTML5使Web应用拥有更短的启动时间，更快的联网速度，甚至可以做到离线使用。

设备兼容：HTML5为开发者提供了非常丰富的API，让开发者能够在功能上有更好的体验和优化选择。

连接特性：Server-Sent Event和WebSocket技术，使得连接效率更高，特别是在实时聊天和网页游戏方面，大大改善了用户体验。

多媒体：支持音频和视频播放，打破了对Flash等外部插件的依赖，降低开发成本，提高开发效率，改善了用户体验。

图形特效：HTML5提供了如Canvas、WebGL等图形和三维功能，使普通网页也能呈现惊人的视觉效果。

除以上这些实用特性之外，HTML5还提供了更多新功能，这些新功能在移动Web开发中至关重要，简单说明如下。

视口控制。

设计师在设计网页时，一般都会固定网页宽度，如在PC端是1000像素或者1200像素等，在移动端是640像素或者750像素等。然而，这些网页在移动设备上被浏览时会不完整显示，因为设备的宽度远远不够。例如，iPhone 6的视口宽度是375像素，完全满足不了网页需求。

为了弥补这一点，移动设备的浏览器会把视口放大，一般是980像素或1024像素。但这样会让浏览器出现横向滚动条，因为设备实际可视区域比浏览器自设的这个宽度要小很多。要想解决这个问题，就需要引入Viewport属性。

Viewport属性通过一个<meta>标签引入，例如：

上面代码的作用是让当前Viewport的宽度等于设备的宽度，同时不允许用户手动缩放。

媒体查询。

CSS3新增媒体查询功能，允许开发者基于设备的不同特性来应用不同的样式。例如，通过对视口宽度的判断，网页输出不同的展示效果。如网页在iPhone 7下默认字号为12像素，而在iPhone 7 Plus下默认字号采用14像素；如设备是iPad，可采用多列布局展示等。

除此之外，还有各种布局方式，以及丰富的设备API，这些在后续的章节中都会向读者一一介绍。