webkit webApp 开发技术要点总结.docx

webkit webApp 开发技术要点总结.docx

《webkit webApp 开发技术要点总结.docx》由会员分享，可在线阅读，更多相关《webkit webApp 开发技术要点总结.docx（16页珍藏版）》请在冰豆网上搜索。

webkitwebApp开发技术要点总结

webkitwebApp开发技术要点总结

2013-09-0414:

25佚名技术博客字号：

T|T

如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？

幸好，webkit内核的浏览器能帮助我们完成这一切。

接触webkitwebApp的开发已经有一段时间了，现把一些技巧分享给大家：

AD：

2014WOT全球软件技术峰会北京站课程视频发布

如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？

幸好，webkit内核的浏览器能帮助我们完成这一切。

接触webkitwebApp的开发已经有一段时间了，现把一些技巧分享给大家：

1.viewport：

也就是可视区域。

对于桌面浏览器，我们都很清楚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 -    //   允许用户缩放到的最大比例  

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浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。

iphone的safari浏览器实际上从一开始就完整显示了这个网页，然后用viewport查看其中的一部分。

当你用手指拖动时，其实拖的不是页面，而是viewport。

浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。

2. link:

1. // 设置开始页面图片  

2. // 在设置书签的时候可以显示好看的图标  

3.

portrait）" href="portrait.css">    // 肖像模式样式         

4.

landscape）" href="landscape.css"   // 风景模式样式  

5.   

6.//竖屏时使用的样式   

7.

portrait）" type="text/css"> 

8.#landscape { display:

 none; }  

9.  

10.   

11.//横屏时使用的样式   

12.

landscape）" type="text/css"> 

13.#portrait { display:

 none; }  

14.    

3.事件：

1.// 手势事件  

2.touchstart            //当手指接触屏幕时触发  

3.touchmove           //当已经接触屏幕的手指开始移动后触发  

4.touchend             //当手指离开屏幕时触发  

5.touchcancel  

6.   

7.// 触摸事件  

8.gesturestart          //当两个手指接触屏幕时触发  

9.gesturechange      //当两个手指接触屏幕后开始移动时触发  

10.gestureend  

11.   

12.// 屏幕旋转事件     

13.onorientationchange       

14.   

15.// 检测触摸屏幕的手指何时改变方向         

16.orientationchange         

17.   

18.// touch事件支持的相关属性  

19.touches           

20.targetTouches         

21.changedTouches                

22.clientX// X coordinate of touch relative to the viewport （excludes scroll offset）         

23.clientY// Y coordinate of touch relative to the viewport （excludes scroll offset）         

24.screenX　 // Relative to the screen          

25.screenY   // Relative to the screen         

26.pageX // Relative to the full page （includes scrolling）       

27.pageY // Relative to the full page （includes scrolling）       

28.target // Node the touch event originated from        

29.identifier   // An identifying number, unique to each touch event  

4. 屏幕旋转事件：

onorientationchange

添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）。

例子：

1.// 判断屏幕是否旋转  

2.function orientationChange（） {   

3.    switch（window.orientation） {   

4.    case 0:

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.    case 90:

11.            alert（"右旋 90,screen-width:

 " + screen.width + "; screen-height:

" + screen.height）;   

12.            break;   

13.    case 180:

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.addEventListener（'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.function twoFingerScroll（ev） {   

6.    var delta =ev.wheelDelta/120;              //对 delta 值进行判断（比如正负） ，而后执行相应操作   

7.    return true;   

8.};  

7.判断是否为iPhone：

1.// 判断是否为 iPhone ：

2.function isAppleMobile（） {   

3.    return （navigator.platform.indexOf（'iPad'） !

= -1）;   

4.};  

8. localStorage:

 例子：

（注意数据名称 n 要用引号引起来）

1.var v = localStorage.getItem（'n'） ?

 localStorage.getItem（'n'） :

 "";   // 如果名称是  n 的数据存在 ，则将其读出 ，赋予变量  v  。

2.localStorage.setItem（'n', v）;                                           // 写入名称为 n、值为  v  的数据   

3.localStorage.removeItem（'n'）;                                           // 删除名称为  n  的数据      

9.使用特殊链接：

 如果你关闭自动识别后，又希望某些电话号码能够链接到iPhone的拨号功能，那么可以通过这样来声明电话链接,

1.

12345654321">打电话给我  

2.

12345654321">发短信  

3.或用于单元格：

4.

122'">  

10. 自动大写与自动修正

要关闭这两项功能，可以通过autocapitalize与autocorrect这两个选项：

1.  

11. WebKitCSS:

①“盒模型”的具体描述性质的包围盒块内容，包括边界，填充等等。

1.-webkit-border-bottom-left-radius:

 radius;  

2.-webkit-border-top-left-radius:

 horizontal_radius vertical_radius;  

3.-webkit-border-radius:

 radius;      //容器圆角  

4.-webkit-box-sizing:

 sizing_model; 边框常量值：

border-box/content-box  

5.-webkit-box-shadow:

 hoff voff blur color; //容器阴影（参数分别为：

水平X 方向偏移量；垂直Y 方向偏移量；高斯模糊半径值；阴影颜色值）  

6.-webkit-margin-bottom-collapse:

 collapse_behavior; 常量值：

collapse/discard/separate  

7.-webkit-margin-start:

 width;  

8.-webkit-padding-start:

 width;  

9.-webkit-border-image:

 url（borderimg.gif） 25 25 25 25 round/stretch round/stretch;  

10.-webkit-appearance:

 push-button;   //内置的CSS 表现，暂时只支持push-button  

②“视觉格式化模型”描述性质，确定了位置和大小的块元素。

1.direction:

 rtl  

2.unicode-bidi:

 bidi-override; 常量：

bidi-override/embed/normal  

③“视觉效果”描述属性，调整的视觉效果块内容，包括溢出行为，调整行为，能见度，动画，变换，和过渡。

1.clip:

 rect（10px, 5px, 10px, 5px）  

2.resize:

 auto; 常量：

auto/both/horizontal/none/vertical  

3.visibility:

 visible; 常量:

 collapse/hidden/visible  

4.-webkit-transition:

 opacity 1s linear; 动画效果 ease/linear/ease-in/ease-out/ease-in-out  

5.-webkit-backface-visibility:

 visibler; 常量：

visible（默认值）/hidden  

6.-webkit-box-reflect:

 right 1px; 镜向反转  

7.-webkit-box-reflect:

 below 4px -webkit-gradient（linear, left top, left bottom,  

8.from（transparent）, color-stop（0.5, transparent）, to（white））;  

9.-webkit-mask-image:

 -webkit-gradient（linear, left top, left bottom, from（rgba（0,0,0,1））, to（rgba（0,0,0,0）））;;   //CSS 遮罩/蒙板效果  

10.-webkit-mask-attachment:

 fixed; 常量：

fixed/scroll  

11.-webkit-perspective:

 value; 常量：

none（默认）  

12.-webkit-perspective-origin:

 left top;  

13.-webkit-transform:

 rotate（5deg）;  

14.-webkit-transform-style:

 preserve-3d; 常量：

flat/preserve-3d; （2D 与3D）  

④“生成的内容，自动编号，并列出”描述属性，允许您更改内容的一个组成部分，创建自动编号的章节和标题，和操纵的风格清单的内容。

1.content:

 “Item” counter（section） ” “;  

2.This resets the counter.  

3.First section  

4.>two section  

5.three section  

6.counter-increment:

 section 1;  

7.counter-reset:

 section;  

⑤“分页媒体”描述性能与外观的属性，控制印刷版本的网页，如分页符的行为。

1.page-break-after:

 auto; 常量：

always/auto/avoid/left/right  

2.page-break-before:

 auto; 常量：

always/auto/avoid/left/right  

3.page-break-inside:

 auto; 常量：

auto/avoid  

⑥“颜色和背景”描述属性控制背景下的块级元素和颜色的文本内容的组成部分。

1.-webkit-background-clip:

 content; 常量：

border/content/padding/text  

2.-webkit-background-origin:

 padding; 常量：

border/content/padding/text  

3.-webkit-background-size:

 55px; 常量：

length/length_x/length_y  

⑦“字型”的具体描述性质的文字字体的选择范围内的一个因素。

报告还描述属性用于下载字体定义。

1.unicode-range:

 U+00-FF, U+980-9FF;  

⑧“文本”描述属性的特定文字样式，间距和自动滚屏。

1.text-shadow:

 #00FFFC 10px 10px 5px;  

2.text-transform:

 capitalize; 常量：

capitalize/lowercase/none/uppercase  

3.word-wrap:

 break-word; 常量：

break-word/normal  

4.-webkit-marquee:

 right large infinite normal 10s; 常量：

direction（方向） increment（迭代次数） repetition（重复） style（样式） speed（速度）;  

5.-webkit-marquee-direction:

 ahead/auto/backwards/down/forwards/left/reverse/right/up  

6.-webkit-marquee-incrementt:

 1-n/infinite（无穷次）  

7.-webkit-marquee-speed:

 fast/normal/slow  

8.-webkit-marquee-style:

 alternate/none/scroll/slide  

9.-webkit-text-fill-color:

 #ff6600; 常量：

capitalize, lowercase, none, uppercase  

10.-webkit-text-security:

 circle; 常量：

circle/disc/none/square  

11.-webkit-text-size-adjust:

 none; 常量:

auto/none;  

12.-webkit-text-stroke:

 15px #fff;  

13.-webkit-line-break:

 after-white-space; 常量：

normal/after-white-space  

14.-webkit-appearance:

 caps-lock-indicator;  

15.-webkit-nbsp-mode:

 space; 常量：

 normal/space  

16.-webkit-rtl-ordering:

 logical; 常量：

visual/logical  

17.-webkit-user-drag:

 element; 常量：

element/auto/none  

18.-webkit-user-modify:

 read- only; 常量：

read-write-plaintext-only/read-write/read-only  

19.-webkit-user-select:

 text; 常量：

text/auto/none  

⑨“表格”描述的布局和设计性能表的具体内容。

1.-webkit-border-horizontal-spacing:

 2px;  

2.-webkit-border-vertical-spacing:

 2px;  

3.-webkit-column-break-after:

 right; 常量：

always/auto/avoid/left/right  

4.-webkit-column-break-before:

 right; 常量：

always/auto/avoid/left/right  

5.–webkit-column-break-inside:

 logical; 常量：

avoid/auto  

6.-webk