[webkitwebApp开发技术要点总结.docxVIP

webkit webApp 开发技术要点总结2013-09-04 14:25 佚名 技术博客 字号：T | T如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？幸好，webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了，现把一些技巧分享给大家 ： AD： 2014WOT全球软件技术峰会北京站 课程视频发布如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？幸好，webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了，现把一些技巧分享给大家 ：1. viewport：也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;实际上我们可以操作的属性有4 个：width?-?????????????//??viewport?的宽度?（范围从200?到10,000，默认为980?像素）??height?-????????????//??viewport?的高度?（范围从223?到10,000）?????initial-scale?-?????//??初始的缩放比例?（范围从0?到10）?????minimum-scale?-????//???允许用户缩放到的最小比例??maximum-scale?-????//???允许用户缩放到的最大比例?????user-scalable?-????//???用户是否可以手动缩?(no,yes)??那么到底这些设置如何让Safari 知道？其实很简单，就一个meta，形如：meta?http-equiv=Content-Type?content=text/html;?charset=utf-8???//编码??meta?id=viewport?name=viewport?content=width=320;?initial-scale=1.0;maximum-scale=1.0;?user-scalable=no;/??meta?name=”apple-mobile-web-app-capable”?content=”yes”?/??//?离线应用的另一个技巧???????meta?name=”apple-mobile-web-app-status-bar-style”?content=black”?/??//?隐藏状态栏??????????meta?content=black?name=apple-mobile-web-app-status-bar-style?/?//指定的iphone中safari顶端的状态条的样式??????????meta?content=telephone=no?name=format-detection?/???????//告诉设备忽略将页面中的数字识别为电话号码????????meta?name=Author?contect=Mr.He/???在设置了initial-scale=1 之后，我们终于可以以1:1 的比例进行页面设计了。关于viewport，还有一个很重要的概念是：iphone 的safari 浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。iphone 的safari 浏览器实际上从一开始就完整显示了这个网页，然后用viewport 查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport。浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。2.?link:link?rel=”apple-touch-startup-image”?href=”startup.png”?/?//?设置开始页面图片??link?rel=”apple-touch-icon”?href=”iphon_tetris_icon.png”/?//?在设置书签的时候可以显示好看的图标??link?rel=stylesheet?media=all?and?(orientation:portrait)?href=portrait.css????//?肖像模式样式?????????link?rel=stylesheet?media=all?and?(orientation:landscape)?href=landscape.css???//?风景模式样式?????//竖屏时使用的样式???style?media=all?and?(orientation:portrait)?type=text/css?#landscape?{?display:?none