移动端开发最佳实践

拔⾚&完颜F2EofTaobao&eTao2012-07-07移动Web开发最佳实践完颜F2EofeTao拔⾚F2EofTaobao移动设备的演化200520081999纠结的去学习Objective-C万维⽹万维⽹响应式设计⼩组•平台选择•MediaQuery•⽂字排版•流体布局•图⽚载⼊•Dom操作性能优化•触屏事件•…=ued.bj:f2e:rd•⼀套项⽬代码•⼀套开发环境•⼀个URL•内容所见即所得•不会因为终端升级⽽导致不可⽤•…响应式设计独特之处3204807681024偷懒的做法…⼀种偷懒的做法是：等⽐缩放但等⽐缩放后的页⾯⽂字像蚂蚁⼀样看不清楚百分⽐宽度+浮动布局容器.wrapper{width:100%;}.wrapper.item{float:left;}960px520px200px200px20px20px定宽布局90%50%20%20%5%5%流体布局复杂的页⾯怎么办?功能减法FewerFeatures样式2样式3样式1更⾼分辨率的样式=viewportcontent=width=device-width,initial-scale=1•width=device-width•user-scalable=1•initial-scale=1•maximum-scale=1•minimum-scale=1ViewPortMeta参数Visualviewport=LayoutviewportLayoutviewportViewPort参数最佳组合metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1metaname=viewportcontent=width=device-width,initial-scale=1ViewPort参数最佳组合metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1metaname=viewportcontent=width=device-width,initial-scale=1/*PC宽屏样式*//*iPad及以下，所有小于（不等于）960宽度的平板电脑*/@mediaonlyscreenand(max-width:959px){}/*仅iPad竖版，所有小于（不等于）960宽度的平板电脑的竖版*/@mediaonlyscreenand(min-width:768px)and(max-width:959px){}/*iPhone及以下*/@mediaonlyscreenand(max-width:767px){}/*仅iPhone横版，包括某些平板电脑的竖版*/@mediaonlyscreenand(min-width:480px)and(max-width:767px){}/*仅iphone4竖版*/@mediaonlyscreenand(max-width:479px){}MediaQueryCSS•先写⾼分辨率样式•先写低分辨率样式MediaQuery书写思路•先写⾼分辨率样式•先写低分辨率样式MediaQuery书写思路哪种写法更适合？•先写⾼分辨率样式•先写低分辨率样式MediaQuery书写思路1，设计师设计原型往往⾸先基于宽屏甚⾄不会给出适配设计稿2，宽屏视觉元素更多，减法⽐加法容易原因？{font-family:tahoma,arial,\5b8b\4f53,sans-serif;}reset.csshtml{-webkit-text-size-adjust:100%;}iOS：华⽂细黑+HelveticaAndroid：⽂泉驿微⽶黑+DroidSans响应式图⽚有两种基本的图⽚类型需要考虑1，需要缩放的图⽚2，不能缩放的图⽚1.2.{width:100px;height:100px;background:url('img-pc.png‘)no-repeatcenter;}@mediaonlyscreenand/*tablet*/{background:url('img-tablet.png')no-repeatcenter;}@mediaonlyscreenand/*mobile*/{background:url('img-mobile.png')no-repeatcenter;}/styleimgsrc=space.gifclass=selector-to-img/这样做需要2个条件1，服务器上提供多尺⼨图⽚淘宝传图⼯具可以⾃动⽣成多尺⼨图⽚2，要有⼼理准备污染html代码Pic_sum.jpgPic_m.jpgPic_b.jpgPic_80x40.jpgPic_120x120.jpgPic_160x160.jpg…}服务器⾃动⽣成25种尺⼨图⽚的剪裁同⼀张图，不同的定位{background-image:url(url.png);width:30px;height:30px;}@mediaonlyscreenand/*tabletormobile*/{.pic{width:20px;height:20px;background-position:xy;}}imgsrc=space.gifclass=pic/设备适配只能在前端完成？RESSResponsiveDesign+ServerSideComponents服务器端实现的“响应式”ServerSideClientSide@mediaonlyscreenand/*设备1条件*/{/*设备1样式*/}@mediaonlyscreenand/*设备2条件*/{/*设备2样式*/}@mediaonlyscreenand/*设备3条件*/{/*设备3样式*/}ServerSideClientSideif($Device1){//设备1样式echo$style1;}elseif($Device2){//设备2样式echo$style2;}elseif($Device3){//设备3样式echo$style3;}如果抛开“兼容性”？针对单⼀设备做更极致的⽤户体验!doctypehtmlhtmlmanifest=!—ViewPortMeta设置，禁止手动缩放--metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1!--屏蔽拨号链接--metaname=format-detectioncontent=telephone=no/!--隐藏浏览器导航栏--metaname=apple-mobile-web-app-capablecontent=yes/linkrel=apple-touch-iconsizes=72x72href=…!doctypehtmlhtmlmanifest=!—ViewPortMeta设置，禁止手动缩放--metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1!--屏蔽拨号链接--metaname=format-detectioncontent=telephone=no/!--隐藏浏览器导航栏--metaname=apple-mobile-web-app-capablecontent=yes/linkrel=apple-touch-iconsizes=72x72href=…!doctypehtmlhtmlmanifest=!—ViewPortMeta设置，禁止手动缩放--metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1!--屏蔽拨号链接--metaname=format-detectioncontent=telephone=no/!--隐藏浏览器导航栏--metaname=apple-mobile-web-app-capablecontent=yes/linkrel=apple-touch-iconsizes=72x72href=…!doctypehtmlhtmlmanifest=!—ViewPortMeta设置，禁止手动缩放--metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1!--屏蔽拨号链接--metaname=format-detectioncontent=telephone=no/!--隐藏浏览器导航栏--metaname=apple-mobile-web-app-capablecontent=yes/linkrel=apple-touch-iconsizes=72x72href=…!doctypehtmlhtmlmanifest=!—ViewPortMeta设置，禁止手动缩放--metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1!--屏蔽拨号链接--metaname=format-detectioncontent=telephone=no/!--隐藏浏览器导航栏--metaname=apple-mobile-