读《移动 Web 手册》

【荷兰】Peter Paul Koch

奇舞团翻译

2015年6月第1版。

月影领着翻译的

360奇舞团（奇虎75Team）是 奇虎360公司Web平台部前端工程师 + 部分特约嘉宾 组成的一个前端团队。

http://caibaojian.com/75team

固定布局、流动布局二选一

现在是弹性布局。

分析及解决方案。

挑战：操作系统、浏览器、Android机型适配到开发过程中要用到的视口、CSS特性、触屏事件。

1，浏览器，PC 五种，移动二三十种。

2，视口，PC一个 veiwport，移动三个。

3，触摸事件。

如果所有的网络或操作系统都一样，消费者何必关心这些，所以厂商们才会在差异化上面下工夫。

消费者会狂热地追求价格和质量。

基础手机，功能手机，智能手机

全球设备市场根本不存在。都是区域的

第一章，介绍了手机市场的信息。虽然不是很有用，但有个观点很对，想对什么手机写应用就要了解那个手机所在的市场的情况。

浏览器

手机浏览器有4种：内置，可下载，代理，webView。

代理浏览器没有客户端交互（Javascript）

混合浏览器

ios 的 chrome（使用的是 ios webview） 和 安卓的 chrome 是二个东西

赚钱：

1，出售你的公司（还有浏览器）

2，出售你浏览器的使用许可。

3，跟搜索引擎合作（每家浏览器，暗箱操作）。

安卓：

安卓WebKit，chrome

设备厂商对内置浏览器做了修改，为了区分为了特性。那怕版本一样。

检查用户代理字符串（user agent string , navigator.userAgent），并看它是否包含单词 Chrome 。如果包含就是 Chrome（可能不是 google chrome）

不包含就是 安卓 WebKit

响应式设计

<meta name="viewport" content="width=device-width, initial-scale=1">

@media screen and (max-width: 480px) {

    // 书写宽度不超过 480px 时的样式

}

上面两个内容：meta 视口标签，宽度媒体查询

苹果公司创建了视口，其他所有的移动端浏览器都复制了它。

目前没有标准文档说明。

设备象素

CSS象素：一个抽象的层。

视口，初始包含块。

布局视口

视觉视口

理想视口

position: fixed;

各种移动端对此支持迥异，文字很难说清。

为了支持真正的固定定位。浏览器必须支持每个层的独立滚动，而实际上浏览器做不到。

触摸事件

touchstart, 在用户的手指触摸屏幕的瞬间触发。

touchmove, 在用户移动手指的过程中连续触发。

touchend, 用户的手指离开屏幕的瞬间触发。

touchcancel, 含义取决于浏览器

手势事件

缩放事件

触摸事件，触摸点数组

touches

ChangedTouches

targetTouches

function handleTouch( e ) {

    var touch = e.changedTouches[0];

    var coorX = touch.clientX;

    var coorY = touch.clientY;// 视觉视口左上角

    // pageX/Y 布局视口左上角。

}

参考书

《PPK谈JavaScript》：一个PC前端工程师迁移到移动前端所需要的书。

quirksmode.org

前端浏览器BUG：

quirksmode.org/mobilewebhandbook

《跨终端 Web》

《webkit 技术内幕》