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"/ >

参考： http://www.cnblogs.com/pifoo/archive/2011/05/28/webkit-webapp.html