《跨终端 Web》- 读书笔记（二）

接上一篇文章《跨终端 Web》- 读书笔记（一）

Mobile Web

1. HTML 5

Mobile Web 和 PC Web 主要的差异性体现在 HTML 5 的广泛应用以及 “Hybrid App” 的相关 Device API。

HTML 5 的新特性主要体现在8个方面：

1. Semantic 语义化 - header /footer / nav /fig 等含有语义的标签以及一系列的属性;
2. Offline & Storage - 主要包括 Local Storage / Indexed DB / File API;
3. Device Accesses - 例如定位信息、视频 / 音频，移动设备的传感器;
4. Connectivity - 增加了 Web Socket 特性以及服务器数据推送;
5. Multimedia - 增加了 video / audio 标签，提供视频和音频的访问;
6. GDI - 图形接口，增加 canvas 标签，提供 2D / 3D;
7. Performance & Integration: Web Worker / XMLHttpRequest 2;
8. CSS 3;

2.移动端的 HTML

2.1 Viewports

又于移动端的小尺寸屏幕，PC 的 Web 页面虽然可以正常显示，但是这种体验师非常糟糕的，用户为了看清某一部分内容通常要放大好多倍；

因此，为了适应移动端屏幕尺寸和特殊性，我们需要在 HTML 中加入以下标签：

// viewport: 指定 meta 标签为视图入口配置标签
// width: 控制 Viewport 视图的大小
// initial-scale: 初始缩放比例
// maximum-scale: 允许用户缩放到的最大比例
// minimun-scale: 允许用户缩放到的最小比例
// user-scalable: 是否允许用户进行缩放
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />

Viewport 最初是 iOS Safari 的私有属性。在开发移动端的时候，以上的属性最好不好省略，否则在某些 Android 设备的 WebView 上会出现 BUG。

作者在此推荐了两篇文章：

• 《A tale of viewprots》
• 《在移动浏览器中使用viewport元标签控制布局》

想要了解更多，请仔细阅读。

2.2 Touch Icon

为了兼容 iOS 4.2+ 和 Android 2.1+ 的通用写法是：

<link rel="apple-touch-icon-precomposed" href="http://your.touch.icon/path" />
<!-- rel="apple-touch-icon-precomposed" 是指告诉浏览器不要给 icon 添加额外的效果 -->

并且值得一提的是，touch-icon 的尺寸建议是144*144，兼容 iPhone / iPad retina / iPad 非retina / Android 绝大部分设备。

2.3 apple-mobile-web-app-capable

• 从桌面 icon 启动 iOS Safari 是否进入全屏状态;
• 取值： yes | no;
• 判断全屏状态可以使用 window.navigator.standalone.

2.4 apple-mobile-web-app-status-bar-style

• iOS Safari 再启动全屏状态状态下的状态栏样式;
• 取值：default | black | black-translucent;
• 若此设置生效，必须将 apple-mobile-web-app-capable = yes.

2.5 format-detection

• iOS 设备上禁止将数字识别为可点击的 tel link.

3.触屏事件

Android 与 iOS 的触屏事件基本相同，只是在事件命名上略有差异。

1. (Android) Touch = (iOS) Tapping: 触击
2. (Android) Long Press = (iOS) Long Press: 长按
3. (Android) Swipe = (iOS) Swiping: 划动
4. (Android) Pinch = (iOS) Pinching in or out | Rotating: 捏
5. (Android) Long Press Drag = (iOS) Panning or Dragging: 长按并拖动
6. (Android) Double Touch: 双击
7. (Android) Double Touch Drag: 双击并拖动

Hammer.js 是目前比较应用广泛的事件库，很好的处理了不同移动平台的触屏事件差异，并对 PC 和 Mobile 的事件做了兼容处理，详情请点击这里。

基准

1. GBS (Graded Browser Support)

GBS 是分级浏览器支持，其目的是应对日益增长的多浏览器兼容问题。

GBS 的核心价值在于”以有限的测试资源最大化测试覆盖率“。

GBS 提出了分层的概念，将待测试的浏览器分为 C、A、X 这3个级别：

C级：是支持的基础级别，提供核心内容和方法。
A级：最高支持级别，充分利用现在 Web 标准的强大能力，完美呈现高级功能和全部内容。
X级：是为未知的、零散的、很少使用或停止开发的浏览器而准备的。

最后，作者在这里提到了关于 优雅降级 和 渐进增强。

• 优雅降级：允许较少使用的浏览器提供更少的内容给用户。
• 渐进增强：以内容为核心，允许最多使用的浏览器展现更多内容给用户。

二者概念相近，但是渐进增强的方式却更为健康和有前瞻性，因此 渐进增强 才是分级浏览器支持的核心概念。

2. MGBS (Mobile Graded Browser Support)

作者收集、整理和分析了具有参考价值的数据源，总结得出了 MGBS。

同 GBS 类似，MGBS 中也具有级别概念，只不过 MGBS 将级别分为 A、B、C 三个级别，A 级最高，B 级次之，C 级为可选。

其精简内容为下图：

当然，上图只能说明当时的实际情况。

to be continued…