移动端web app开发

移动端Web APP开发

CDC � 设计研发中心 � miyukizhang �

自我介绍 �

•  张小雪 o Miyukizhang o 用户研究与体验设计部

•  重构&前端

目录 �

•  Web Applications? •  HTML5 •  Web APP开发 � •  佳实践 � •  PhoneGap �

Web Applications �

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

Web App on iPhone �

案例 �

http://forecast.io/ http://apps.ft.com/

Web App和Native App之争 �

Native App �

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

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

Hybrid App �

定义： � Apps that wrap a mobile web interface inside a native container. � �

案例 �

LinkedIn iPad App �

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

Web vs. Hybrid vs. Native �

这个世界上，从来没有好的技术或是编程

语言，只有恰当的选择和与之匹配的解决

方案。 �

目录 �


What is HTML5 �

HTML5 ~= HTML + CSS3 + JS API �

详细：http://slides.html5rocks.com/#landing-slide �

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/

HTML5 Elements for Mobile �

•  Offline Support: Web database, LocalStorage, App Cache

•  Canvas •  Video •  GeoLocation •  Advanced Forms •  Workers •  Camera �

目录 �


基本概念#1 �

•  CSS pixels与device pixels o CSS pixels： � 浏览器使用的抽象单位。 � o device pixels： � 显示屏幕的小物理单位，每个dp包

含自己的颜色、亮度。 �

•  1 CSS pixels = (𝑑𝑒𝑣𝑖𝑐𝑒𝑃𝑖𝑥𝑒𝑙𝑅𝑎𝑡𝑖𝑜)↑2  ∗ device pixels �

基本概念#2 �

•  PPI/DPI：每英寸所拥有的像素数目

� 𝑃𝑃𝐼= √𝑋↑2 + 𝑌↑2  /𝑆𝑐𝑟𝑒𝑒𝑛 𝑆𝑖𝑧𝑒  � �

屏幕分辨率（pixel）： � X*Y �

屏幕尺寸（inch）: � Screen � Size，即手机屏幕对角线的长度 �

基本概念#2 �

•  PPI/DPI：每英寸所拥有的像素数目

𝑃𝑃𝐼(𝑖𝑃ℎ𝑜𝑛𝑒 4)= √960↑2 + 640↑2  /3.5  � = � 330 � � � � � �

𝑃𝑃𝐼(𝑖𝑃ℎ𝑜𝑛𝑒 5)= √1136↑2 + 640↑2  /4  � = � 326 � � � � � �

基本概念#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

基本概念#3 �

•  密度决定比例

xxhdpi 6%

xhdpi 25%

hdpi 35%

tvdpi 1%

mdpi 23%

ldpi 10%

Android Density

数据来源：Android Screen Sizes and Densities �

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”/>

Web APP开发#1 �

•  Small Screen CSS o media query �

@media only screen and (max-device –width: 480px){ #test{ color: red; } }

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))){}

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;

Web APP开发#3 � •  iPhone Browser & Viewport meta

Status Bar: 20px

URL Bar: 60px

Viewport: 320*356px �

Button Bar: 44px

iPhone (非retina): 320*480px �

Web APP开发#3 �

•  Viewport Meta

<meta name=“viewport” content=”width=device-width” />

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: 不允许用户点击屏幕放大浏览 �

Web APP开发#4 �

•  Safari UI(URL Bar, Status Bar)

•  JS滚动

<meta name=”apple-mobile-web-app-capable” content=“yes” /> <meta name=”apple-mobile-web-app-status-bar-style” content=“black” />

window.addEventListener(‘load’, function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100); })

Web APP开发#4 �

•  Safari UI(URL Bar, Button Bar)

Web APP开发#5 � •  主屏icon

•  iPhone和iPod: o  57*57px o  114*114px（retina）

•  iPad: o  72*72px o  144*144px（retina）

�

<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" />

composed

如果图标带有 � -precomposed 后缀 � (如: apple-touch-icon-precomposed.png) �

Web APP开发#6 � •  闪屏

�

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" />

Web APP开发#7 �

•  iOS中禁止用户保存图片＼复制图片

•  iOS中禁止用户选中文字

•  iOS横竖屏字体变化

*{ -webkit-touch-callout: none; }

*{ -webkit-user-select: none; } .text{ -webkit-user-select: text; }

*{ -webkit-text-size-adjust: none; }

Web APP开发#8 �

•  Orientation

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);

Web APP开发#9 �

•  Orientation Style

<body class="portrait">

window.addEventListener('load', setOrientation, false);

window.addEventListener('orientationchange', setOrientation, false);

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; }

Web APP开发#10 �

•  Touch事件 o  touchstart o  touchend o  touchmove o  touchcancel

•  event对象 o  touches ( 包括pageX和pageY等 ) o  targetTouches

•  Demo �


•  手势( gesture事件 ) o gesturestart o gestureend o gesturechange

•  event对象 o  event.scale o  event.rotate


•  特殊链接

•  避免 �

<a href="tel:12345678900">Call me</a>

<meta content=”telephone=no” name=”format-detection” />

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/[email protected]) � repeat; � � � � � � } � } �

Web APP开发#13

•  Retina: inline images o  JS for image replacement �

if � (window.devicePixelRatio � === � 2) � { � � � � � //Replace � your � img � src � with � the � new � retina � image � } �

Web APP开发#13

•  Retina: retina.js o  Easy Javascript way


•  CSS动画 o CSS Transitions o CSS 2D Transformations o CSS 3D Transformations o CSS Animations

•  效果案例

兼容性： � http://caniuse.com/


•  CSS 3D Transformations(开启GPU加速)

•  -webkit-transform: o  translate3d(tx,ty,tz); o  scale3d(sx,sy,sz); o  rotate3d(rx,ry,rz,angle);

•  Demo �


•  调试 o Chrome调试工具 o weinre: Web Inspector Remote, 远程实时调试 �

演示weinre �

目录 �


体验#1 �

•  不要刻意模仿 � iOS 的默认样式和交互 •  不要做得像个网站 •  块级化a标签

o  42*42px

•  不要自己实现滚动条 o  -webkit-overflow-scrolling: touch

体验#2 �

•  模拟click事件 o  300ms延时 o  FastClick �

性能#1 �

•  缩短class和id的命名 o  hd, bd, ft;

•  慎用DataURI: 多消耗53%左右的CPU资源，内存多出4倍左右，耗时平均高出24.6倍 o base64编码增加文件大小 o 解析消耗内存和CPU o 无论是否缓存，重新解码

性能#2 �

•  Zepto.js代替 jQuery.js •  尽可能少的使用box-shadows与gradients

o 扁平化设计

•  使用3D CSS动画，即使你只需要2D的效果。 •  避免使用opacity •  使用AppCache �

目录 �


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/

PhoneGap的理念 �

PhoneGap特征 �

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

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

How it work �

1.用HTML5技术写一个web App HTML5/CSS/JS �

How it work �

2.用PhoneGap打包你的Web App �

How it work �

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

End � Thanks �