《跨终端 Web》- 读书笔记(二)
来源:互联网 发布:java和php哪个就业好 编辑:程序博客网 时间:2024/05/21 22:39
接上一篇文章《跨终端 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…
- 《跨终端 Web》- 读书笔记(二)
- 《跨终端 Web》- 读书笔记(一)
- 跨终端读书笔记
- 跨终端 Web
- 初识跨终端Web
- 跨终端web
- 《Agile Web Development with Rails》读书笔记(二)
- professional javascript for web developers 2nd_edition读书笔记(二)
- 精通CSS:高级web标准解决方案之读书笔记(二)
- Professional JavaScript for Web Developers 读书笔记(二)
- 深入分析java web技术内幕----读书笔记(二)
- 《Web设计大全》读书笔记之二
- PHP和MySQL Web开发读书笔记二
- 《php与MySQL Web开发》-读书笔记二
- 终端灵活使用(二)
- mac 终端常用命令(二)
- 第一讲:跨终端Web解决方案(学习笔记)
- TIJ读书笔记(二)
- iOS开发企业版IPA分发
- Spring整合JMS——基于ActiveMQ实现
- Struts2中的(Interceptor)拦截器的执行顺序
- Jingle协议详解
- nyoj 1276 机器设备(DFS)
- 《跨终端 Web》- 读书笔记(二)
- javaScript高级程序设计学习笔记(5中)
- 反射_通过反射越过泛型检查
- iOS开发UILabel篇:iOS 8 下中划线失效的解决方法
- Vue 深入探秘
- 为OLED屏增加GUI支持6:进度条控件
- Spring整合JMS(四)——事务管理
- 7.Scala类的属性和对象私有字段实战详解
- urllib的parse模块