欢迎来到天天文库
浏览记录
ID:35295074
大小:43.34 KB
页数:12页
时间:2019-03-23
《webkitwebapp开发技术要点总结》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库。
1、webkitwebApp开发技术要点总结2013-09-0414:25佚名技术博客字号:T
2、T如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切。接触webkitwebApp的开发已经有一段时间了,现把一些技巧分享给大家:AD:2014WOT全球软件技术峰会北京站课程视频发布如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切。接触webkitwebApp的开
3、发已经有一段时间了,现把一些技巧分享给大家:1.viewport:也就是可视区域。对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;实际上我们可以操作的属性有4个:1.width - // viewport 的宽度 (范围从200 到10,000,默认为980 像素) 2.height - /
4、/ viewport 的高度 (范围从223 到10,000) 3. 4.initial-scale - // 初始的缩放比例 (范围从>0 到10) 5. 6.minimum-scale - // 允许用户缩放到的最小比例 7.maximum-scale - // 允许用户缩放到的最大比例 8. 9.user-scalable - // 用户是否可以手动缩 (no,yes) 那么到底这些设置如何让Safari知道?其实很简单,就一
5、个meta,形如:1. //编码 2. 3.
6、ntent=”yes” /> // 离线应用的另一个技巧 4. // 隐藏状态栏 1. //指定的iphone中safari顶端的状态条的样式 2.
7、="telephone=no" name="format-detection" /> //告诉设备忽略将页面中的数字识别为电话号码 3. 在设置了initial-scale=1之后,我们终于可以以1:1的比例进行页面设计了。关于viewport,还有一个很重要的概念是:iphone的safari浏览器完全没有滚动条,而且不是简单的“隐藏滚动条”,是根本没有这个功能。iphone的safari浏
8、览器实际上从一开始就完整显示了这个网页,然后用viewport查看其中的一部分。当你用手指拖动时,其实拖的不是页面,而是viewport。浏览器行为的改变不止是滚动条,交互事件也跟普通桌面不一样。2. link:1. // 设置开始页面图片 2. // 在设置书
9、签的时候可以显示好看的图标 3. // 肖像模式样式 4.
此文档下载收益归作者所有