webkitwebApp开发技术要点总结

《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值进行判断(比如正负)，而后执行相应操

11、作7. returntrue;8. ;7. 判断是否为iPhone：1. /判断是否为iPhone：2. functionisAppleMobile()3. return(navigator.platform.indexOf(iPad)!=-1);4. ;8.localStorage:例子 ：（注意数据名称 n 要用引号引起来）1. varv=localStorage.getItem(n)?localStorage.getItem(n):;/如果名称是n的数据存在，则将其读出，赋予变量v。2. localStorage.setItem(n,v);/写入名称为n、值为v的数据3. localSt

12、orage.removeItem(n);/删除名称为n的数据9. 使用特殊链接：如果你关闭自动识别后 ，又希望某些电话号码能够链接到 iPhone 的拨号功能 ，那么可以通过这样来声明电话链接 ,1. 打电话给我2. 发短信3. 或用于单元格：4. 10.自动大写与自动修正要关闭这两项功能，可以通过autocapitalize 与autocorrect 这两个选项：1. 11.WebKit CSS:“盒模型”的具体描述性质的包围盒块内容，包括边界，填充等等。1. -webkit-border-bottom-left-radius:radius;2. -webkit-border-top-lef

13、t-radius:horizontal_radiusvertical_radius;3. -webkit-border-radius:radius;/容器圆角4. -webkit-box-sizing:sizing_model;边框常量值：border-box/content-box5. -webkit-box-shadow:hoffvoffblurcolor;/容器阴影（参数分别为：水平X方向偏移量；垂直Y方向偏移量；高斯模糊半径值；阴影颜色值）6. -webkit-margin-bottom-collapse:collapse_behavior;常量值：collapse/discard/s

14、eparate7. -webkit-margin-start:width;8. -webkit-padding-start:width;9. -webkit-border-image:url(borderimg.gif)25252525round/stretchround/stretch;10. -webkit-appearance:push-button;/内置的CSS表现，暂时只支持push-button“视觉格式化模型”描述性质，确定了位置和大小的块元素。1. direction:rtl2. unicode-bidi:bidi-override;常量：bidi-override/embe

15、d/normal“视觉效果”描述属性，调整的视觉效果块内容，包括溢出行为，调整行为，能见度，动画，变换，和过渡。1. clip:rect(10px,5px,10px,5px)2. resize:auto;常量：auto/both/horizontal/none/vertical3. visibility:visible;常量:collapse/hidden/visible4. -webkit-transition:opacity1slinear;动画效果ease/linear/ease-in/ease-out/ease-in-out5. -webkit-backface-visibility:

16、visibler;常量：visible(默认值)/hidden6. -webkit-box-reflect:right1px;镜向反转7. -webkit-box-reflect:below4px-webkit-gradient(linear,lefttop,leftbottom,8. from(transparent),color-stop(0.5,transparent),to(white);9. -webkit-mask-image:-webkit-gradient(linear,lefttop,leftbottom,from(rgba(0,0,0,1),to(rgba(0,0,0,0)

17、;/CSS遮罩/蒙板效果10. -webkit-mask-attachment:fixed;常量：fixed/scroll11. -webkit-perspective:value;常量：none(默认)12. -webkit-perspective-origin:lefttop;13. -webkit-transform:rotate(5deg);14. -webkit-transform-style:preserve-3d;常量：flat/preserve-3d;(2D与3D)“生成的内容，自动编号，并列出”描述属性，允许您更改内容的一个组成部分，创建自动编号的章节和标题，和操纵的风格清单

18、的内容。1. content:“Item”counter(section)”“;2. Thisresetsthecounter.3. Firstsection4. twosection5. threesection6. counter-increment:section1;7. counter-reset:section;“分页媒体”描述性能与外观的属性，控制印刷版本的网页，如分页符的行为。1. page-break-after:auto;常量：always/auto/avoid/left/right2. page-break-before:auto;常量：always/auto/avoid/

19、left/right3. page-break-inside:auto;常量：auto/avoid“颜色和背景”描述属性控制背景下的块级元素和颜色的文本内容的组成部分。1. -webkit-background-clip:content;常量：border/content/padding/text2. -webkit-background-origin:padding;常量：border/content/padding/text3. -webkit-background-size:55px;常量：length/length_x/length_y “字型”的具体描述性质的文字字体的选择范围内的一

20、个因素。报告还描述属性用于下载字体定义。1. unicode-range:U+00-FF,U+980-9FF;“文本”描述属性的特定文字样式，间距和自动滚屏。1. text-shadow:#00FFFC10px10px5px;2. text-transform:capitalize;常量：capitalize/lowercase/none/uppercase3. word-wrap:break-word;常量：break-word/normal4. -webkit-marquee:rightlargeinfinitenormal10s;常量：direction(方向)increment(迭代次

21、数)repetition(重复)style(样式)speed(速度);5. -webkit-marquee-direction:ahead/auto/backwards/down/forwards/left/reverse/right/up6. -webkit-marquee-incrementt:1-n/infinite(无穷次)7. -webkit-marquee-speed:fast/normal/slow8. -webkit-marquee-style:alternate/none/scroll/slide9. -webkit-text-fill-color:#ff6600;常量：ca

22、pitalize,lowercase,none,uppercase10. -webkit-text-security:circle;常量：circle/disc/none/square11. -webkit-text-size-adjust:none;常量:auto/none;12. -webkit-text-stroke:15px#fff;13. -webkit-line-break:after-white-space;常量：normal/after-white-space14. -webkit-appearance:caps-lock-indicator;15. -webkit-nbsp-

23、mode:space;常量：normal/space16. -webkit-rtl-ordering:logical;常量：visual/logical17. -webkit-user-drag:element;常量：element/auto/none18. -webkit-user-modify:read-only;常量：read-write-plaintext-only/read-write/read-only19. -webkit-user-select:text;常量：text/auto/none“表格”描述的布局和设计性能表的具体内容。1. -webkit-border-horizo

24、ntal-spacing:2px;2. -webkit-border-vertical-spacing:2px;3. -webkit-column-break-after:right;常量：always/auto/avoid/left/right4. -webkit-column-break-before:right;常量：always/auto/avoid/left/right5. webkit-column-break-inside:logical;常量：avoid/auto6. -webkit-column-count:3;/分栏7. -webkit-column-rule:1pxsol

25、id#fff;8. style:dashed,dotted,double,groove,hidden,inset,none,outset,ridge,solid“用户界面”描述属性，涉及到用户界面元素在浏览器中，如滚动文字区，滚动条，等等。报告还描述属性，范围以外的网页内容，如光标的标注样式和显示当您按住触摸触摸目标，如在iPhone上的链接。1. -webkit-box-align:baseline,center,end,start,stretch常量：baseline/center/end/start/stretch2. -webkit-box-direction:normal;常量：no

26、rmal/reverse3. -webkit-box-flex:flex_valuet4. -webkit-box-flex-group:group_number5. -webkit-box-lines:multiple;常量：multiple/single6. -webkit-box-ordinal-group:group_number7. -webkit-box-orient:block-axis;常量：block-axis/horizontal/inline-axis/vertical/orientation8. webkit-box-pack:alignment;常量：center/e

27、nd/justify/start12.动画过渡这是 Webkit 中最具创新力的特性：使用过渡函数定义动画。1. -webkit-animation:titleinfiniteease-in-out3s;2. animation有这几个属性：3. -webkit-animation-name：/属性名，就是我们定义的keyframes4. -webkit-animation-duration：3s/持续时间5. -webkit-animation-timing-function：/过渡类型：ease/linear(线性)/ease-in(慢到快)/ease-out(快到慢)/ease-in-o

28、ut(慢到快再到慢)/cubic-bezier6. -webkit-animation-delay：10ms/动画延迟(默认0)7. -webkit-animation-iteration-count：/循环次数(默认1)，infinite为无限8. -webkit-animation-direction：/动画方式：normal(默认正向播放)；alternate(交替方向，第偶数次正向播放，第奇数次反向播放)这些同样是可以简写的。但真正让我觉的很爽的是keyframes，它能定义一个动画的转变过程供调用，过程为0%到100%或from(0%)到to(100%)。简单点说，只要你有想法，你想

29、让元素在这个过程中以什么样的方式改变都是很简单的。1. -webkit-transform:类型（缩放scale/旋转rotate/倾斜skew/位移translate）2. scale(num,num)放大倍率。scaleX和scaleY(3)，可以简写为：scale(*,*)3. rotate(*deg)转动角度。rotateX和rotateY，可以简写为：rotate(*,*)4. Skew(*deg)倾斜角度。skewX和skewY，可简写为：skew(*,*)5. translate(*,*)坐标移动。translateX和translateY，可简写为：translate(*,*)

30、。实现模拟弹出消息框（Alert）的例子：定义过渡（在段中描述keyframes）：1. -webkit-keyframesDivZoom2. 3. 0%-webkit-transform:scale(0.01)4. 60%-webkit-transform:scale(1.05)5. 80%-webkit-transform:scale(0.95)6. 100%-webkit-transform:scale(1.00)7. 8. .sZoom-webkit-animation:DivZoom0.5sease-in-out（很容易看懂，将元素从缩小的0.01 倍-很小但不能为0 倍，放大到1.

31、05 倍，再缩小到0.95倍，最后到1 倍即正常大小。整个过渡过程事件为0.5 秒，动画方式为ease-in-out，即慢到快再到慢，默认只进行1 次过渡。这正是大家经常看到的 iPhone 弹出的提示信息的动画效果！）定义元素（在段中）：1. divid=layerHstyle=-webkit-border-radius:12px;border:2pxsolid#FFF;-webkit-box-shadow:0px2px4px#888;position:absolute;left:24px;top:106px;width:256px;height:268px;padding-left:8px

32、;padding-right:8px;color:#FFFFFF;text-shadow:1px1px1px#000;text-align:center;background-color:RGBA(32,48,96,0.9);2. background-image:url(BG-Msg.png);background-repeat:no-repeat;3. z-index:1;visibility:hidden;4. 使用说明5. 6. 说明文字7. 8. 9. 13. 14. 启动动画（在 javascript 定义的函数中）1. functionpHelp()2. 3. layerH.st

33、yle.visibility=visible4. layerH.style.cssText=-webkit-animation-delay:+Math.random()+ms5. layerH.className=sZoom6. (这个启动函数就很好理解了。但是为什么要使用-webkit-animation-delay 这句呢？因为当一个元素过渡显示完成后，若其样式没有变化，下一次将无法进行过渡动画显示。我们巧妙的利用其动画延迟时间定义，使其有所变化，就避免了上述问题。其中使用随机数函数Math.random()，产生一个大于0 小于1 的随机数。当然，延迟零点几毫秒，用户是不会察觉的。)补充

34、：1.锁定 viewport1. ontouchmove=event.preventDefault()/锁定viewport，任何屏幕操作不移动用户界面（弹出键盘除外）。2.被点击元素的外观变化，可以使用样式来设定：1. -webkit-tap-highlight-color:颜色3.侦测iPhone/iPod开发特定设备的移动网站，首先要做的就是设备侦测了。下面是使用Javascript侦测iPhone/iPod的UA，然后转向到专属的URL。1. if(navigator.userAgent.match(/iPhone/i)|(navigator.userAgent.match(/iPod

35、/i)2. if(document.cookie.indexOf(iphone_redirect=false)=-1)3. window.location=;4. 5. 虽然Javascript是可以在水果设备上运行的，但是用户还是可以禁用。它也会造成客户端刷新和额外的数据传输，所以下面是服务器端侦测和转向：1. if(strstr($_SERVERHTTP_USER_AGENT,iPhone)|strstr($_SERVERHTTP_USER_AGENT,iPod)2. header(Location:3. exit();4. 4.阻止旋转屏幕时自动调整字体大小1. html,body,fo

36、rm,fieldset,p,div,h1,h2,h3,h4,h5,h6-webkit-text-size-adjust:none;5.iPhone才识别的CSS如果不想设备侦测，可以用CSS媒体查询来专为iPhone/iPod定义样式。1. mediascreenand(max-device-width:480px)6.缩小图片网站的大图通常宽度都超过480像素，如果用前面的代码限制了缩放，这些图片在iPhone版显示显然会超过屏幕。好在iPhone机能还够，我们可以用CSS让iPhone自动将大图片缩小显示。1. mediascreenand(max-device-width:480px)2

37、. imgmax-width:100%;height:auto;3. 7.模拟:hover伪类因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：1. varmyLinks=document.getElementsByTagName(a);2. for(vari=0;imyLinks.length;i+)3. myLinksi.addEventListen

38、er(touchstart,function()this.className=“hover”;,false);4. myLinksi.addEventListener(touchend,function()this.className=“”;,false);5. 然后用CSS增加hover效果：1. a:hover,a.hover/*你的hover效果*/这样设计一个链接，感觉可以更像按钮。并且，这个模拟可以用在任何元素上。【编辑推荐】1. Android开发项目经验 2. App开发再现生机下的荒芜 3. 微软收购诺基亚：移动开发者应该看到什么 4. 移动端WebApp开发必备知识 5. Android 4.4开发代号确定：KitKat！ 6. WebApp与Native App及WebApp的布局方式和技术