html5移动网站开发实践

移动网站开发实践赵文博使用HTML5响应式设计touch事件兼容高分屏硬件加速DebuggingTips语义化标签使用这些标签增强语义[1]:headerfooternavarticle…NewelementsofHTML5离线存储使用localstorage[1]:保存用户地理位置信息缓存Javascript和CSS[2]WebstorageStoragercasestudy:Bing,Google访问设备使用geolocation[1]来获取用户地理位置GeolocationAPISpecifications图形使用Canvas[1]和SVG[2]来绘制股票曲线HTMLCanvas2DContextScalableVectorGraphics(SVG)1.1CSS3CSS3[1]的使用很普遍:用flexiblebox布局圆角与阴影渐变背景borderimagetransitionrgba新的selectormediaqueryBase64图片[2]CSSLevel3DataURIscheme浏览器兼容性响应式(Responsive)网页设计什么是响应式设计一种能在不同屏幕大小的设备上都能提供优秀的浏览体验的网页设计方案[1][2]案例[3]TwitterBootstrapMicrosoftBostonGlobeWikipedia:ResponsiveWebDesignAListApart:ResponsiveWebDesignMediaqueri.es响应式设计在手机上尤其重要手机屏幕较小,固定宽度不可行如果固定宽度太大,则需要双向滚动如果固定宽度太小,则不能充分利用屏幕空间手机屏幕尺寸多样[1]Listofdisplaysbypixeldensity1.弹性布局flexiblelayout页面的body宽度是100%自适应布局使用FlexibleBox[1]进行多栏布局需要固定宽度的flex设置为0需要自动伸展的flex设置为1/TR/css3-flexbox/2.液态图片fluidimage文字会自动根据容器宽度换行图片需要设定百分比宽度img{max-width:100%;}3.媒体查询mediaquery针对不同的屏幕应用不同的样式[1]<linkrel=“stylesheet”type=“text/css”href=“m.css”media=“screenand(max-width:480px)”@mediascreenand(min-width:480px){ .selector{…}}/TR/css3-mediaqueries/MediaQuery&AssetDownloadingResults4.响应式栅格responsivegrid根据屏幕宽度决定每行栅格数量以及每个栅格的宽度响应式栅格系统BootstrapFoundation3responsive.gs5.响应式Javascript使用matchMedia[1]matchMedia(‘screenand(min-width:480px)’).matchesmatchMediabrowserfallbackmatchMedia.js处理orientationChange事件CSSOMViewModuletouch事件Touch事件鼠标事件touch事件mousedowntouchstartmousemovetouchmovemouseuptouchendclick-TouchEvents兼容鼠标事件SafariWebContentGuide:HandlingEvents/zldsANhonclickdelay手机上的click事件有～300ms的延迟[1][2]解决方案：使用touchstart/touchend代替clickRemoveonClickdelayonwebkitforiPhoneCreatingFastButtonsforMobileWebApplicationsTouchEvent对象的属性继承自UIEvent对象有三个TouchList类型的关键属性touches:屏幕上所有手指targetTouches:当前元素上的手指changedTouches:有变化的手指TouchList里的每一项结构和MouseEvent类似MDC:TouchEvent手势gesture和touch类似，gesture有guesturestart,gesturechange和gestureend事件[2]GestureEvent对象包含rotation和scale属性[1]可以使用TouchEvent中的touches属性来构造自定义的手势GestureEventClassReferenceHandlingGestureEventstouch相关脚本库可以使用Javascript封装常见的tap,swipe,pinch,zoom,rotate等手势流行的脚本库hammer.jszepto.jsjQuerymobileSenchaTouch适应高分辨率屏幕视网膜屏RetinaDisplay320x480640x960物理像素屏幕密度(Screendensity)指单位长度内的物理像素数量,一般用PPI(Pixelsperinch)表示Towardsretinaweb浏览器像素在CSS和Javascript中使用的像素DevicePixelRatio为了更好的阅读，网页中1个像素在Retina屏幕上用4个物理像素显示，devicePixelRatio是2图片显示1.使用@2x图片使用图片img{width:50%}背景图片background-size:50%只在Retina屏上使用@2x使用mediaquery使用工具来实现RetinaImages

服务器端根据UA返回不同尺寸图片retinajs用JS自动替换为@2x的图片2.使用CSS3代替图片圆角、渐变和阴影可用CSS3实现图标可以用SVG图片或者webfont/work/iconic//硬件加速什么是硬件加速把一些计算量较大的图像处理工作交给专门的硬件(GPU)来处理以减轻CPU工作量的技术网页在渲染时分成若干个层(layer),这些layer由GPU组合(composite)ImprovingthePerformanceofyourHTML5App启用硬件加速给需要做动画的元素添加样式

-webkit-transform:translate3d(0,0,0)该元素在渲染时会放在一个单独的layer中在该元素上使用CSS动画会很流畅HTML5TechniquesforOptimizingMobilePerformance例子bodypopup传统方法用Javascript设置一个timer,逐帧改变.popup的top和left值硬件加速的CSS3动画.popup{

-webkit-transition:-webkit-transform1sease-in;

-webkit-transform:translate3d(0,0,0)

}.popup.moved{

-webkit-transform:translate3d(100px,100px,0)

}对比Javascript动画CSS3动画foreachframe:更新DOM更新RenderObject更新RenderLayer上传RenderLayer到GPUGPU进行Layer合成更新界面上传bodyLayer和popupLayer到GPUforeachframe:上传matrix到GPUGPU进行Layer合成更新界面UnderstandingWebkitRenderingDemoFallingLeaves使用Chrome查看Layer修复闪屏bug在webkit浏览器中启用硬件加速可能会造成屏幕闪一下的bug解决方案给需要动画的元素默认添加translate3d,避免用户看到新layer创建的过程给元素添加-webkit-backface-visibility:hiddenDebugging使用桌面浏览器调试Safari在设置中显示开发菜单在开发菜单设置UserAgent为iPhoneChrome在Debug工具的设置中设置UserAgent为iPhone还可以模拟touch事件模拟器调试iOS模拟器[1]仅在Mac上可用安装Xcode和iOSSDKAndroid模拟器[2]安装Eclipse安装AndroidSDKUsingiOSSimulatorAndroidEmulator真机中使用DebugConsole在iOS中开启设置>Safari>高级>DebugConsole>ON在Android中开启在地址栏输入about:debug远程调试iOS6上连接Safari进行调试[1]ChromeforAndroid连接Chrome调试[2]在低版本系统和浏览器上weinreAdobeEdgeInspectEnablingWebInspectoroniOSRemoteDebuggingTips禁止用户缩放网页用户缩放网页后ViewPort大小会发生变化，放大网页ViewPort会变小触发Resize事件禁止缩放[1]<metaname="viewport"content="user-scalable=no,width=device-width">ConfiguringtheViewportoverflow:scroll&position:fixed在iOS5和Android3以前,手机浏览器都不支持position:fixed和overflow:hidden使用Javascript组件模拟iScoll.jsScrollabilityYUIScrollView隐藏浏览器地址栏$(document).ready(function(){ window.scrollTo(0,1);});QuickTip:HideMobileWebBrowserAddressBarImproved添加到主屏幕<linkrel="apple-touch-icon"href="touch-icon-iphone.png"/><linkrel="apple-touch-icon"sizes="72x72"href="touch-icon-ipad.png"/><linkrel="apple-touch-icon"sizes="114x114"href="touch-icon-iphone4.png"/>HowtoaddawebsiteicontoyourHomescreenAddtoHomescreenJavascriptlibrary调用native应用可以使用自定义协议:mailto:zhaowenbo@360.cn打开邮件tel:123456打开拨号程序sms:helloGoogleMaps的URL会自动调用MapsmyScheme://自定义协议AdvancedAppTricks去除iOS