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

上传人:b****0 文档编号:9730411 上传时间:2023-05-20 格式:DOCX 页数:16 大小:26.21KB
下载 相关 举报
webkit webApp 开发技术要点总结.docx_第1页
第1页 / 共16页
webkit webApp 开发技术要点总结.docx_第2页
第2页 / 共16页
webkit webApp 开发技术要点总结.docx_第3页
第3页 / 共16页
webkit webApp 开发技术要点总结.docx_第4页
第4页 / 共16页
webkit webApp 开发技术要点总结.docx_第5页
第5页 / 共16页
webkit webApp 开发技术要点总结.docx_第6页
第6页 / 共16页
webkit webApp 开发技术要点总结.docx_第7页
第7页 / 共16页
webkit webApp 开发技术要点总结.docx_第8页
第8页 / 共16页
webkit webApp 开发技术要点总结.docx_第9页
第9页 / 共16页
webkit webApp 开发技术要点总结.docx_第10页
第10页 / 共16页
webkit webApp 开发技术要点总结.docx_第11页
第11页 / 共16页
webkit webApp 开发技术要点总结.docx_第12页
第12页 / 共16页
webkit webApp 开发技术要点总结.docx_第13页
第13页 / 共16页
webkit webApp 开发技术要点总结.docx_第14页
第14页 / 共16页
webkit webApp 开发技术要点总结.docx_第15页
第15页 / 共16页
webkit webApp 开发技术要点总结.docx_第16页
第16页 / 共16页
亲,该文档总共16页,全部预览完了,如果喜欢就下载吧!
下载资源
资源描述

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

《webkit webApp 开发技术要点总结.docx》由会员分享,可在线阅读,更多相关《webkit webApp 开发技术要点总结.docx(16页珍藏版)》请在冰点文库上搜索。

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

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

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 小学教育 > 语文

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2