Home » 网页开发教学 » 移动网页(Web)开发教学 » 将Web应用程序移植到苹果iOS移动平台的七大秘诀!

将Web应用程序移植到苹果iOS移动平台的七大秘诀!

将Web应用程序移植到苹果iOS移动平台的七大秘诀!

最近,当我检查了我的Apache服务器的日志(logs)后发现,使用iOS Safari浏览器“添加到主屏幕”功能的访客人数急急上升,这就意味着越来越多移动平台的访客充分的使用主屏幕上创建一个到我的web应用程序的好处。

onlyWebPro iOS web app screen shot

Web应用程序是一种类似Native App全屏的应用。用户可以从他们的移动主屏幕启动Web应用程序,并在全屏模式里浏览Web应用程序,提供类似Native App的用户体验。但绝大部分的Web应用程序没设置妥当,往往用户会在点击全屏应用程序中的任何链接而被带到Safari浏览器,这情况就会为用户带来非常不理想的体验,因为他们没能在全屏模式下使用Web应用程序。

幸运的是,我发现其实可以透过JavaScript来提供用户一个更好的体验,那就是使用JavaScript保持访客在浏览网站时,全程都会留在全屏幕模式,而不是每一次的点击链接都会被带到Safari去。

在本篇文章中,我想要分享一些技巧,那就是优化全屏的Web应用程序。透过本文,你将会学到如何设置应用启动图标启动图像设置应用程序的名称,等等。当然还有最重要的一点:那就是天衣无缝的全屏模式用户体验!

第一步: 设置Viewport

在meta标签中首先可以使用(你可能已经习惯于使用)的是viewport属性。通过该属性的设置,可以通知浏览器页面内容将被如何显示在设备屏幕中,代码如下所示:

<meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1, maximum-scale = 1, user-scalable = no" />

第二步: 设置应用程序的名称

iOS移动平台会使用标题标签来当作你的应用名称,但其实你是可以使用meta标签来重新命名,代码如下所示:

<meta name="apple-mobile-web-app-title" content="onlyWebPro" />

第三步: 设置全屏浏览模式

在iOS操作系统中,可以使用apple-mobile-web-app-capable属性来设置全屏浏览模式, 代码如下所示:

<meta name="apple-mobile-web-app-capable" content="yes">

第四步: 状态栏设置

Web App Status Bar Style
我们也可以使用apple-mobile-web-app-status-bar-style属性值将状态栏设置为透明效果,代码如下所示:

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

让我来进一步说明apple-mobile-web-app-status-bar-style。其实在iOS平台里有三种状态栏设置供选择:

  • default: 默认值。
  • black: 状态栏背景是黑色。
  • black-translucent: 状态栏背景是黑色半透明。

设置为 default 或 black ,网页内容从状态栏底部开始。
设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。

注:
在使用apple-mobile-web-app-status-bar-style之前,请记得设置全屏浏览模式,不然这可不会正常的运作。

第五步: 设置主屏幕中的图标

在iOS操作系统中,允许通过使用rel=”apple-touch-icon”语句为应用程序设置其被用户收藏时显示在设备主屏幕中的图标文件,代码如下所示:

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

第六步: 设置启动画面

除了可以自行设置图标外,你也可为您的Web App设置一个类似Native App的启动画面。

<link rel="apple-touch-startup-image" href="iphone-startup.png">
<link rel="apple-touch-startup-image" href="ipad-landscape-startup.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<link rel="apple-touch-startup-image" href="ipad-portrait-startup.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />

如果你是要在iPhone和iPod touch设置启动画面的话,那么请记得所需画面的尺寸一定要是320 x 480

然而如果你是要在iPad设置启动画面的话,那么请记得横面是748 x 1024,垂直面则是768 x 1004

注:
若想要知道更多关于iPad启动画面,请浏览 – 设置iPad启动画面

第七步: 开启天衣无缝的全屏模式用户体验!

最后则是为“添加到主屏幕”而访问您的用户提供一个天衣无缝的全屏模式用户体验。使用 window.navigator.standalone来检查用户是否在全屏模式下运行,如果是的话,那么就让您的应用程序内的所有链接,在用户点击的情况下保持在全屏模式,而不是把他们带到Safari浏览器。代码如下所示:

<script type="text/javascript">
$(document).ready(function(){
	// iOS web app full screen hacks.
	if(window.navigator.standalone == true) {
		// make all link remain in web app mode.
  		$('a').click(function() {
  			window.location = $(this).attr('href');
            return false;
  		});
	}
});
</script>

查看多少用户透过主屏幕进入您的web应用程序

当你设置完毕后,当然接下来的是要看看实际的受惠用户人数是多少。我们可以通过查看Apache服务器的日志(logs)一探究竟。

如果用户是通过主屏幕进入您的web应用程序的话,那么user agents就会是如下:

"Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_4 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B350"

然而,如果用户是通过Safari浏览器进入你的web应用程序的话,那么user agents就会是如下:

Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_4 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B350 Safari/8536.25

结束语

移动应用程序的魅力是无论您走到哪里,都可以带着您的应用程序及其数据。近几年来,移动用户节节攀升。如果您是做生意的,确实需要将您的网页优化,以满足移动用户的需求。

更多关于移动Web应用程序的教学

使用Responsive Web/动态内容来增加移动网页销售量
关闭iOS网页拼写检查
通过Web应用程序来启动iOS谷歌地图
jQuery Mobile初学者必看教学


Android, iOS Development Tutorials