Tweet
Tweet

Slide 1

Slide 1 text

平板时代 S01E01

Slide 2

Slide 2 text

S01E01

Slide 3

Slide 3 text

% 2 2

Slide 4

Slide 4 text

iPad

Slide 5

Slide 5 text

⼀一个坑爹的时代！ Pad x

Slide 6

Slide 6 text

WebKit ⼀一统江湖

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

｛ ｛ iOS WebKit 4 5 6 Android...

Slide 9

Slide 9 text

iOS 6 27% iOS 5.1 57% iOS 5.0 10% iOS 4.3 6%

Slide 10

Slide 10 text

操作习惯

Slide 11

Slide 11 text

MouseOver 拆 TouchEvent

Slide 12

Slide 12 text

⼿手势、多点触摸

Slide 13

Slide 13 text

Click 拆 Tap

Slide 14

Slide 14 text

16px 16px 44px 44px

Slide 15

Slide 15 text

7mm ~ 10mm

Slide 16

Slide 16 text

PPI 像素密度 每英⼨寸距离的图像包含的像素数⺫⽬目 iPad (132 / 264) iPhone1~3 ipad mini (163) iPhone 4~5 (326)

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Retina Display

Slide 19

Slide 19 text

Image@2x

Slide 20

Slide 20 text

canvas@1x

Slide 21

Slide 21 text

CSS fonts ux.etao.com/fonts

Slide 22

Slide 22 text

1024 x 768 1280 x 800 1024 x 600 窗口大小

Slide 23

Slide 23 text

窗⼝口⼤大⼩小 768 x 1024

Slide 24

Slide 24 text

响应式设计

Slide 25

Slide 25 text

width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no

Slide 26

Slide 26 text

width= 1024 " name="viewport" />

Slide 27

Slide 27 text

mediaqueri.es

Slide 28

Slide 28 text

wiki.ued.taobao.net/doku.php?id=ued.bj:f2e:rd

Slide 29

Slide 29 text

性能问题

Slide 30

Slide 30 text

快、流畅

Slide 31

Slide 31 text

zeptojs.com

Slide 32

Slide 32 text

Application Cache

Slide 33

Slide 33 text

电池 http://www2012.wwwconference.org/ proceedings/proceedings/p41.pdf

Slide 34

Slide 34 text

Demo

Slide 35

Slide 35 text

No content