# 移动优先的跨终端Web

## 天猫前端 ## [@鬼道-徐凯](http://weibo.com/777865156)
### [2013 D2 @阿里技术嘉年华](http://adc.alibabatech.org/carnival/schedule#14th#ued1)
## 个人介绍

  • 13.04 - 至今   天猫前端
  • 11.04 - 13.03 百度商务搜索部
  • 09.10 - 11.04 爱立信、SAP、百度 实习
  • 08.09 - 11.04 同济大学，计算机硕士
  • 「靠谱单身男青年」 - 朋友的评价
## Demo：跨终端的Web 点击访问PC版
或
## 终端 vs 设备
## 跨终端的Web 目的：页面达到所有终端 1. 单页 - 多模板 2. 单页 - Media Query 3. 多页 - 自适应跳转 4. 多平台 App
## 跨终端的Web
## 移动优先 [《Mobile First》](http://www.lukew.com/ff/entry.asp?933)
  1. 移动端的用户和流量越来越多
  2. 各种屏幕让我们更聚焦业务的本质
  3. 移动设备有更先进的人机交互体验
## 解决方案
## 1. 基准

MGBS v.s. GBS

MGBS: Mobile Graded Browser Support

数据

数据：OS


数据：屏幕分辨率

数据：浏览器

基准

基准落地

遗留问题

  1. ipad retina (屏宽1536) 支持
  2. android 屏宽 720/800 支持
  3. 所有移动设备的横屏支持
  4. android 2.3.x与4.x的默认浏览器差异
  5. android qq浏览器是否仍然在使用WebView，是否有必要放在A级
  6. android qq浏览器有独立和内置两种形式，是否有差异
  7. windows phone 支持
## 2. 检测
多终端检测（MED: Multi End Detector）
## HTTP API ```javascript @param {Object} MED @param {string} MED.os // 'android' | 'ios' | 'wp' @param {string} MED.osVersion // 'a.b.c' @param {number} MED.screenWidth // px @param {number} MED.screenHeight // px // More ... ```
## 3. 接口
## IF：结构 前后端接口（IF: InterFace）
## IF：蓝图
## IF：流程
## IF：校验 本地校验 Demo
## IF：数据文件
## IF：接口文档 [接口文档生成工具 if-sync](https://npmjs.org/package/if-sync)
## IF：总结 [下载接口Demo](http://luics.github.io/demo/d2-demo/demo/if.zip) 0. 接口带来的流程可复用 0. 接口规范的单测、冒烟测试保障 0. 调试数据和接口文档的同步
## 4. 定位
## 多页面定位

## 多视图定位

## 定位的实现 * [History-API Demo](http://html5demos.com/history) * [History API 与 Hashbang 的对比](https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling)
## 5. 预览
## 跨终端预览工具 Focus
  1. 支持UA改写
  2. 支持多设备
  3. 与业务系统的深度整合
## Phone
## Pad
## PC
## 回顾：解决方案
## 重要资源 0. [跨终端的Web Demo](http://luics.github.io/demo/d2-demo/demo/sub.html) 0. [接口 Demo](http://luics.github.io/demo/d2-demo/demo/if.zip) 0. [接口文档生成工具 if-sync](https://npmjs.org/package/if-sync) 0. [Focus](http://focus.peaches.io) 0. [Mobile First](http://www.lukew.com/ff/entry.asp?933) 0. [触屏事件](https://github.com/kissyteam/kissy-mobile/issues/3) 0. [HTML5资源](http://www.cnblogs.com/luics/archive/2012/11/17/2775190.html) 0. [History-API Demo](http://html5demos.com/history) 0. [History API 与 Hashbang 的对比](https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling)
## 感谢 * 感谢，天猫前端所有提出建议的同学 * 感谢，老大 @三七 对大纲颠覆性的建议 * 感谢，「预览」Focus的 美女前端@闭月 * 感谢，「检测」MED的所有成员 * 感谢，天猫前端在「跨终端的Web」方向上坚定决心
## Q & A

## [@徐凯-鬼道](http://weibo.com/777865156) | [luics@github](http://luics.github.io)