月度归档:2013年02月

为 iOS 设备搭建 WebApp

head添加如下代码:

<!– 设置viewpoint,固定显示页面, 关闭缩放,viewpoint的属性可看下文 –>
<meta name=”viewport” content=”width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”/>
<!– 隐藏safari导航栏以及工具栏。想达到全屏显示的效果必须通过主屏的图标打开网站,直接在Safari输入URL是不行的。 –>
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<!– 主屏幕显示的图标, iOS系统会自动将图标生成具有高光, 圆角和阴影效果 57×57 –>
<link rel=”apple-touch-icon” href=”http://m.example.com/images/iphone-icon.png”/>
<!– 主屏幕显示的图标, 如果你不喜欢 ios 帮你生成的, 可以使用以下属性 57×57 –>
<link rel=”apple-touch-icon-precomposed” href=”http://m.example.com/images/iphone-icon.png” />
<!– 启动画面 –>
<link rel=”apple-touch-startup-image” href=”http://m.example.com/images/logo_320.png” />

简单了解下viewpoint的属性:

user-scalable – 用户是否可以手动缩放;
width – 定义viewport宽度(默认为980像素) ,例子中值为device-width是指设置为设备显示宽度;
height – viewport的高度;
initial-scale – 初始的缩放比例 (范围从 0 到10);
minimum-scale – 允许用户缩放到的最小比例;
maximum-scale – 允许用户缩放到的最大比例;

设置系统状态栏风格:
系统状态栏是 iOS 顶部显示运营商、WIFI、时间的部分,它无法隐藏,但可以设置灰、黑两种风格,设置代码如下:

<meta name=”apple-mobile-web-app-status-bar-style” content=”grey” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />

 

启动画面设置:
当用户点击主屏图标打开 WebApp 时,系统会展示启动画面,在未设置情况下系统会默认显示该网站的首页截图,当然这个体验不是很好,所以我们需要通过以下代码来自定义启动画面:

<link rel=”apple-touch-startup-image” href=”Startup.png” />

[2012.11.20]更新
与启图标类似,根据 iOS 设备的分辨率,其启动画面的图片尺寸也各不相同:

iPhone 3GS(及以前机型):320×460 像素
iPhone 4、4S:640×920 像素
iPhone 5:1096×640 像素

iPad 1、2:768×1004 像素
New iPad:–
iPad mini —

注:如果图片尺寸不对将无法显示。

[2011.2.1]更新
如果想让一个 WebApp 在 iPhone 和 iPad 中同时具有启动画面,我们可以借助 Javascript 脚本来完成,通过判断设备navigator.userAgent信息,来更改href的值指向对应的图片路径:

//jQuery
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/iPad/i)==”ipad”) {
$(“link[rel=apple-touch-startup-image]“).attr(“href”,”images/startup_ipad.png”);
}

 

在页脚添加以下代码, 防止当前链接在新窗口打开 ( 新窗口的话会直接调用 sofari 打开 )

<script type=”text/javascript”>

(function (a, b, c) {
if (c in b && b[c]) {
var d, e = a.location,
f = /^(a|html)$/i;
a.addEventListener(“click”, function (a) {
d = a.target;
while (!f.test(d.nodeName)) d = d.parentNode;
“href” in d && (d.href.indexOf(“http”) || ~d.href.indexOf(e.host)) && (a.preventDefault(), e.href = d.href)
}, !1)
}
})(document, window.navigator, “standalone”)
</script>

 

参考来源:http://www.iinterest.net/2011/01/03/mobile-webapp-base/

原创文章,转载请注明: 转载自蔡洁锐的blog

本文链接地址: 为 iOS 设备搭建 WebApp