《webkitwebApp开发技术要点总结》由会员分享，可在线阅读，更多相关《webkitwebApp开发技术要点总结（12页珍藏版）》请在金锄头文库上搜索。
1、webkit webApp 开发技术要点总结2013-09-04 14:25 佚名 技术博客 字号：T | T如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？幸好，webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了，现把一些技巧分享给大家 ： AD： 2014WOT全球软件技术峰会北京站 课程视频发布 如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？幸好，webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了，现把一些技巧分享给大家 ：1. viewpor
2、t：也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;实际上我们可以操作的属性有4 个：1. width-/viewport的宽度（范围从200到10,000，默认为980像素）2. height-/viewport的高度（范围从223到10,000）3. 4. initial-scale-/初始的缩放比例（范围从0到10）5. 6. minimum-scale-/允许用户缩放到的最小比例7. maximum-scale-/
3、允许用户缩放到的最大比例8. 9. user-scalable-/用户是否可以手动缩(no,yes)那么到底这些设置如何让Safari 知道？其实很简单，就一个meta，形如：1. /编码2. 3. /离线应用的另一个技巧4. /隐藏状态栏5. /指定的iphone中safari顶端的状态条的样式6. /告诉设备忽略将页面中的数字识别为电话号码7. 在设置了initial-scale=1 之后，我们终于可以以1:1 的比例进行页面设计了。关于viewport，还有一个很重要的概念是：iphone 的safari 浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。iphon
4、e 的safari 浏览器实际上从一开始就完整显示了这个网页，然后用viewport 查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport。浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。2.link:1. /设置开始页面图片2. /在设置书签的时候可以显示好看的图标3. /肖像模式样式4. linkrel=stylesheetmedia=alland(orientation:landscape)href=landscape.css/风景模式样式5. 6. /竖屏时使用的样式7. 8. #landscapedisplay:none;9. 10. 11. /横屏时
5、使用的样式12. 13. #portraitdisplay:none;14. 3. 事件 ：1. /手势事件2. touchstart/当手指接触屏幕时触发3. touchmove/当已经接触屏幕的手指开始移动后触发4. touchend/当手指离开屏幕时触发5. touchcancel6. 7. /触摸事件8. gesturestart/当两个手指接触屏幕时触发9. gesturechange/当两个手指接触屏幕后开始移动时触发10. gestureend11. 12. /屏幕旋转事件13. onorientationchange14. 15. /检测触摸屏幕的手指何时改变方向16. ori
6、entationchange17. 18. /touch事件支持的相关属性19. touches20. targetTouches21. changedTouches22. clientX/Xcoordinateoftouchrelativetotheviewport(excludesscrolloffset)23. clientY/Ycoordinateoftouchrelativetotheviewport(excludesscrolloffset)24. screenX/Relativetothescreen25. screenY/Relativetothescreen26. pageX
7、/Relativetothefullpage(includesscrolling)27. pageY/Relativetothefullpage(includesscrolling)28. target/Nodethetoucheventoriginatedfrom29. identifier/Anidentifyingnumber,uniquetoeachtouchevent4.屏幕旋转事件：onorientationchange添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）。例子：1. /判断屏幕是否旋转2. functionorientationChange()3.
8、switch(window.orientation)4. case0:5. alert(肖像模式0,screen-width:+screen.width+;screen-height:+screen.height);6. break;7. case-90:8. alert(左旋-90,screen-width:+screen.width+;screen-height:+screen.height);9. break;10. case90:11. alert(右旋90,screen-width:+screen.width+;screen-height:+screen.height);12. br
9、eak;13. case180:14. alert(风景模式180,screen-width:+screen.width+;screen-height:+screen.height);15. break;16. ;17. /添加事件监听18. addEventListener(load,function()19. orientationChange();20. window.onorientationchange=orientationChange;21. );5.隐藏地址栏 & 处理事件的时候，防止滚动条出现：1. /隐藏地址栏&处理事件的时候，防止滚动条出现2. addEventListe
10、ner(load,function()3. setTimeout(function()window.scrollTo(0,1);,100);4. );6.双手指滑动事件：1. /双手指滑动事件2. addEventListener(load,function()window.onmousewheel=twoFingerScroll;,3. false/兼容各浏览器，表示在冒泡阶段调用事件处理程序(true捕获阶段)4. );5. functiontwoFingerScroll(ev)6. vardelta=ev.wheelDelta/120;/对delta值进行判断(比如正负)，而后执行相应操作7. returntrue;8. ;7. 判断是否
