webkit webapp 开发技术要点总结

《webkit webapp 开发技术要点总结》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、webkitwebApp开发技术要点总结2013-09-0414:25佚名技术博客字号：T

2、T如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？幸好，webkit内核的浏览器能帮助我们完成这一切。接触webkitwebApp的开发已经有一段时间了，现把一些技巧分享给大家：AD：2014WOT全球软件技术峰会北京站课程视频发布如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？幸好，webkit内核的浏览器能帮助我们完成这一切。接触webkitwebApp的开发已经有一段时间了，现把一些技巧分享给大家：1.viewport：也就是可视区域。对于桌面

3、浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;实际上我们可以操作的属性有4个：1.width -             //  viewport 的宽度 （范围从200 到10,000，默认为980 像素）  2.height -            //  viewport 的高度 （范围从223 到10,000）  3.   4.initial-scale -     //  初始的缩放比例 （范围从>0 到10）  5.  

4、 6.minimum-scale -    //   允许用户缩放到的最小比例  7.maximum-scale -    //   允许用户缩放到的最大比例  8.   9.user-scalable -    //   用户是否可以手动缩 (no,yes)  那么到底这些设置如何让Safari知道？其实很简单，就一个meta，形如：1.   //编码  2.

5、idth=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>  3.  // 离线应用的另一个技巧       4.  // 隐藏状态栏          1.

6、tus-bar-style" /> //指定的iphone中safari顶端的状态条的样式          2.       //告诉设备忽略将页面中的数字识别为电话号码        3.  在设置了initial-scale=1之后，我们终于可以以1:1的比例进行页面设计了。关于viewport，还有一个很重要的概念是：iphone的safari浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”

7、，是根本没有这个功能。iphone的safari浏览器实际上从一开始就完整显示了这个网页，然后用viewport查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport。浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。2. link:1. // 设置开始页面图片  2. // 在设置书签的时候可以显示好看的图标  3.

8、nk rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">    // 肖像模式样式         4.