This is a presentation to review and summarize the mobile websites that I have involved in. It includes many practical skills and my own experiences in the development of mobile websites.

1. 移动端Web APP开发
CDC 设计研发中心
miyukizhang

2. 自我介绍
• 张小雪
o Miyukizhang
o 用户研究与体验设计部
• 重构&前端

3. 目录
• Web Applications?
• HTML5
• Web APP开发
• 最佳实践
• PhoneGap

4. 目录
• Web Applications?
• HTML5
• Web APP开发
• 最佳实践
• PhoneGap

5. Web Applications
定义：Apps implemented with HTML5
and JavaScript that operate entirely
inside a browser.

6. Web App on iPhone

7. Web App on iPhone

8. 案例
http://forecast.io/ http://apps.ft.com/

9. Web App和Native App之争

10. Native App
定义：Apps developed exclusively for
a specific mobile platform that can
leverage all device capabilities.

11. Web vs. Native
Web Native
Dev Cost Reasonable Expensive
Dev Time Short Long
Portability High No
Performance Fast Very Fast
Native Functionality No All
Distribution No Yes

12. Hybrid App
定义： Apps that wrap a mobile web
interface inside a native container.

13. 案例
LinkedIn iPad App

14. Web vs. Hybrid vs. Native
Web Hybrid Native
Dev Cost Reasonable Reasonable Expensive
Dev Time Short Short Long
Portability High High No
Performance Fast Fast Very Fast
Native
Functionality No Yes All
Distribution No Yes Yes

15. Web vs. Hybrid vs. Native
这个世界上，从来没有最好的技术或是编程
语言，只有最恰当的选择和与之匹配的解决
方案。

16. 目录
• Web Applications?
• HTML5
• Web APP开发
• 最佳实践
• PhoneGap

17. What is HTML5
HTML5 ~= HTML + CSS3 + JS API
详细：http://slides.html5rocks.com/#landing-slide

18. HTML5 for Mobile Browsers
OS or Browser Platform Score
(*/500)
BlackBerry 10.1 » BlackBerry Q or Z series 485
Opera Mobile 15 » Android 428
Firefox Mobile 22 » Multiple platforms 422
Chrome 25 » All Android 4 devices 417
Opera Mobile 12.10 » Multiple platforms 406
iOS 6.0 » Apple iPhone, iPad and iPod Touch 386
iOS 5.0 » Apple iPhone, iPad and iPod Touch 258
Windows Phone 8 » Nokia Lumia 822, HTC 8X and
others 320
Android 4.0 » Samsung Galaxy Nexus 297
http://html5test.com/

19. HTML5 Elements for Mobile
• Offline Support: Web database,
LocalStorage, App Cache
• Canvas
• Video
• GeoLocation
• Advanced Forms
• Workers
• Camera

20. 目录
• Web Applications?
• HTML5
• Web APP开发
• 最佳实践
• PhoneGap

21. 基本概念#1
• CSS pixels与device pixels
o CSS pixels： 浏览器使用的抽象单位。
o device pixels： 显示屏幕的最小物理单位，每个dp包
含自己的颜色、亮度。
• 1 CSS pixels = (푑푒푣푖푐푒푃푖푥푒푙푅푎푡푖표)↑2 ∗
device pixels

22. 基本概念#2
• PPI/DPI：每英寸所拥有的像素数目
屏幕分辨率（pixel）： X*Y
屏幕尺寸（inch）: Screen Size，即手机屏幕对角线的长度
푃푃퐼= √ 푋⁠↑2 + 푌↑2 /푆푐푟푒푒푛 푆푖푧푒

23. 基本概念#2
• PPI/DPI：每英寸所拥有的像素数目
푃푃퐼(푖푃ℎ표푛푒 4)= √ ⁠960↑2 + 640↑2 /3.5 = 330
푃푃퐼(푖푃ℎ표푛푒 5)= √ ⁠1136↑2 + 640↑2 /4 = 326

24. 基本概念#3
• 密度决定比例
ldpi mdpi hdpi xhdpi
密度分界 120 160 240 320
常见屏幕尺寸 240*320 320*480 480*800 640*960
默认缩放比例 0.75 1.0 1.5 2.0

25. 基本概念#3
• 密度决定比例
xxhdpi
6%
Android Density
xhdpi
25%
hdpi
35%
mdpi
23%
tvdpi
1%
ldpi
10%
数据来源：Android Screen Sizes and Densities

26. Web APP开发#1
• Small Screen CSS
o media queries
<link media=“only screen and (max-device-width: 480px)”
href=“mobile.css” type=“text/css” rel=“stylesheet”/>
<link media=“screen and (min-device-width: 481px)”
href=“standard.css” type=“text/css” rel=“stylesheet”/>

27. Web APP开发#1
• Small Screen CSS
o media query
@media only screen and (max-device –width: 480px){
#test{
color: red;
}
}

28. Web APP开发#2
• UserAgent
1. Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebkit/420.1 (KHTML,
like Gecko) Version/3.0 Mobile/4A93 Safari/419.3
2. Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebkit/420+ (KHTML,
like Gecko) Version/3.0 Mobile/1A543 Safari/419.3
3. Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebkit/
531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
Javascript:
If((navigator.userAgent.match(/iPhone/i))){}

29. Web APP开发#2
var pixelRatio = window.devicePixelRatio || 1;
var iPhone = /iPhone/i.test(navigator.userAgent);
var iPhone4 = (iPhone && pixelRatio == 2);
var iPhone5 = /iPhone OS 5_0/i.test(navigator.userAgent);
var iPad = /iPad/i.test(navigator.userAgent);
var android = /android/i.test(navigator.userAgent);
var webos = /hpwos/i.test(navigator.userAgent);
var iOS = iPhone || iPad;
var mobile = iOS || android || webos;

30. Web APP开发#3
• iPhone Browser & Viewport meta
Status Bar: 20px
URL Bar: 60px
Viewport: 320*356px
Button Bar: 44px
iPhone
(非retina):
320*480px

31. Web APP开发#3
• Viewport Meta
<meta name=“viewport” content=”width=device-width” />

32. Web APP开发#3
• Viewport Meta
<meta name=”viewport” content=”width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0;”/>
• Initial-scale=1.0: 强制让文档的宽度与设备的宽度保持1:1
• Maximum-scale=1.0: 文档最大宽度比例是1:1
• User-scalable=0: 不允许用户点击屏幕放大浏览

33. Web APP开发#4
• Safari UI(URL Bar, Status Bar)
<meta name=”apple-mobile-web-app-capable” content=“yes” />
<meta name=”apple-mobile-web-app-status-bar-style” content=“black” />
• JS滚动
window.addEventListener(‘load’, function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
})

34. Web APP开发#4
• Safari UI(URL Bar, Button Bar)

35. Web APP开发#5
• 主屏icon
<link rel="apple-touch-icon" href=“apple-icon-iphone-57x57.png" />
<link rel="apple-touch-icon“ sizes=“72*72” href=“apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon“ sizes=“114*114” href=“apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon“ sizes=“144*144” href=“apple-touch-icon-144x144.png" />
如果图标带有 -precomposed 后缀 (如: apple-touch-icon-precomposed.png)
• iPhone和iPod:
o 57*57px
o 114*114px（retina）
• iPad:
o 72*72px
o 144*144px（retina）
composed

36. Web APP开发#6
• 闪屏

37. Web APP开发#6
• 闪屏
<!– iPhone -->
<link rel="apple-touch-startup-image“ media=“(device-width:320px) and
(device-height:480px) and (-webkit-device-pixel-ratio:1)”
href=“apple-touch-startup-image-320x460.png" />
<!– iPhone4/iPhone4S-->
<link rel="apple-touch-startup-image“ media=“(device-width: 320px) and
(device-height: 480px) and (-webkit-device-pixel-ratio:2)”
href=“apple-touch-startup-image-640x920.png" />
<!– iPhone5 -->
<link rel="apple-touch-startup-image“ media=“(device-width: 320px) and
(device-height: 568px) and (-webkit-device-pixel-ratio:2)”
href=“apple-touch-startup-image-640x1096.png" />

38. Web APP开发#7
• iOS中禁止用户保存图片＼复制图片
*{ -webkit-touch-callout: none; }
• iOS中禁止用户选中文字
*{ -webkit-user-select: none; }
.text{ -webkit-user-select: text; }
• iOS横竖屏字体变化
*{ -webkit-text-size-adjust: none; }

39. Web APP开发#8
• Orientation

40. Web APP开发#8
• Orientation
function checkOrientation(){
switch(window.orientation){
case 0:
alert(‘Orientation: Portrait’);
break;
case 90:
case -90:
alert(‘Orientation: Landscape’);
break;
}
}
addEventListener(‘orientationchange’, checkOrientation);

41. Web APP开发#9
• Orientation Style
<body class="portrait">
window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);

42. Web APP开发#9
• Orientation Style
function setOrientation() {
var orient = Math.abs(window.orientation) === 90 ?
'landscape' : 'portrait';
var cl = document.body.className;
cl = cl.replace(/portrait|landscape/, orient);
document.body.className = cl;
}

43. Web APP开发#10
• Touch事件
o touchstart
o touchend
o touchmove
o touchcancel
• event对象
o touches ( 包括pageX和pageY等 )
o targetTouches
• Demo

44. Web APP开发#11
• 手势( gesture事件 )
o gesturestart
o gestureend
o gesturechange
• event对象
o event.scale
o event.rotate

45. Web APP开发#12
• 特殊链接
<a href="tel:12345678900">Call me</a>
• 避免
<meta content=”telephone=no” name=”format-detection” />

46. Web APP开发#13
• Retina: background images
.repeatingPattern {
background: url(../images/bgPattern.png) repeat;
background-size: 100px 100px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.repeatingPattern {
background: url(../images/bgPattern@2x.png) repeat;
}
}

47. Web APP开发#13
• Retina: inline images
o JS for image replacement
if (window.devicePixelRatio === 2) {
//Replace your img src with the new retina image
}

48. Web APP开发#13
• Retina: retina.js
o Easy Javascript way

49. Web APP开发#14
• CSS动画
o CSS Transitions
o CSS 2D Transformations
o CSS 3D Transformations
o CSS Animations
• 效果案例
兼容性： http://caniuse.com/

50. Web APP开发#14
• CSS 3D Transformations(开启GPU加速)
• -webkit-transform:
o translate3d(tx,ty,tz);
o scale3d(sx,sy,sz);
o rotate3d(rx,ry,rz,angle);
• Demo

51. Web APP开发#15
• 调试
o Chrome调试工具
o weinre: Web Inspector Remote, 远程实时调试

52. Web APP开发#15

53. 演示weinre

54. 目录
• Web Applications?
• HTML5
• Web APP开发
• 最佳实践
• PhoneGap

55. 体验#1
• 不要刻意模仿 iOS 的默认样式和交互
• 不要做得像个网站
• 块级化a标签
o 42*42px
• 不要自己实现滚动条
o -webkit-overflow-scrolling: touch

56. 体验#2
• 模拟click事件
o 300ms延时
o FastClick

57. 性能#1
• 缩短class和id的命名
o hd, bd, ft;
• 慎用DataURI: 多消耗53%左右的CPU资源，内
存多出4倍左右，耗时平均高出24.6倍
o base64编码增加文件大小
o 解析消耗内存和CPU
o 无论是否缓存，重新解码

58. 性能#2
• Zepto.js代替 jQuery.js
• 尽可能少的使用box-shadows与gradients
o 扁平化设计
• 使用3D CSS动画，即使你只需要2D的效果。
• 避免使用opacity
• 使用AppCache

59. 目录
• Web Applications?
• HTML5
• Web APP开发
• 最佳实践
• PhoneGap

60. What is PhoneGap
PhoneGap is a free and open source framework
that allows you to create mobile apps using
standardized web APIs for the platforms you care
about.
http://phonegap.com/

61. PhoneGap的理念

62. PhoneGap特征
• 开源、免费
• 跨平台框架，支持大多主流平台
• 基于HTML5标准，支持HTML5、CSS3和JS
• 只写一次，到处执行
• 支持云端编译
• 包含丰富的API

63. PhoneGap APIS
Accelerometer
Tap into the device’s motion sensor
Camera
Capture a photo using the device’s camera
Compass
Obtain the direction that the device is pointing
Contacts
Work with the devices contact database
Device
Gather device specific information
Event
Hook into native events through JavaScript
File
Hook into native file system through JavaScript
Geolocation
Make your application location aware
Media
Record and play back auto files
Network
Quickly check the network state
Notification
Visual, audible, and tactile device notification
Storage
Hook into the device’s native storage options

64. How it work
1.用HTML5技术写一个web App
HTML5/CSS/JS

65. How it work
2.用PhoneGap打包你的Web App

66. How it work
2.用PhoneGap打包你的Web App

67. How it work
3.将你的Hybrid App
部署到各个平台
（iOS, Android等）

68. End
Thanks