移动web H5开发技巧分享：设置iphone和ipad的启动画面

看到这样的标题，如果不明白，25学堂的小编给大家翻译下，就是在iOS中为 移动网站添加图标到主屏幕以及增加启动画面。

比如我们做了一个H5项目，想要用户向原生APP一样，制作web h5的启动图标。让用户在iphone手机桌面可以直接点击我们的图标启动web h5或者在ipad上启动，而且设置下我们的启动图片等过程。

具体实现的方法是通过利用iOS中Safari浏览器的特性来实现的。满足一下我们伪Web App的虚荣心。O(∩_∩)O哈哈哈~

具体实现步骤：

第一步：用苹果自带的 浏览器Safari 打开 25学堂官网：http://www.25xt.com/

第二步：点击浏览器下面的中间的分享图标。出现下图，点击   添加到主屏幕

第三步：设置web APP的名称即可，点击完成。

有兴趣的小伙伴可以试试25学堂的APP。

下面详细解读一下如何来设置iphone和ipad的启动画面

第一部分，我们先回顾一下iphone 手机 各种机型的尺寸和规范：

下面是web h5浏览器渲染的一些参数。跟我们app设计的尺寸关系不大。希望大家别搞混了。

在我们的web h5项目当中的设置启动图标和启动图片的参数是：

apple-touch-startup-image

1、添加图标到主屏幕是Web App的第一步：

添加图标到屏幕里的有两种属性值：

apple-touch-icon和apple-touch-icon-precomposed，

区别就在于是否会应用iOS中自动给图标添加的那层高光。这个高光在ios7系统之后就不存在啦。

所以，现在无论用哪个都是可以的。

代码如下：

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="25xt.png">

2、为APP 添加启动图片

<link rel="apple-touch-startup-image" href="images/ios_startup.png"> 
<link rel="apple-touch-startup-image" href="images/ios_startup@2x.png" sizes="640x920">
<link rel="apple-touch-startup-image" href="images/ios_startup-large@2x.png" sizes="640x1096">
<link rel="apple-touch-startup-image" href="images/ios_startup-6@2x.png" sizes="750x1294">
<link rel="apple-touch-startup-image" href="images/ios_startup-6-plus@3x.png" sizes="1242x2148">

完整的web H5项目的设置iphone的启动图标和启动图。

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="25xt.png">

<link rel="apple-touch-startup-image" href="qidong.png" sizes="750x1294">

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

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

<meta name="format-detection" content="telephone=no">

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

apple-touch-startup-image是用来标示启动画面的

apple-mobile-web-app-capable是用来定义应用全屏展示的；

在定义了apple-mobile-web-app-capable的前提下，设置状态栏的属性值apple-mobile-web-app-status-bar-style才有效；

如果你不想要设置status-bar为黑色，详细阅读：

（A）name 属性的 apple-mobile-web-app-capable 值（网站开启对 web app 程序的支持）

说明：

• 网站开启对 web app 程序的支持。
• 该 meta 可以看出内容为“苹果设备 web 应用程序 xx”，就是说该 meta 是专门定义 web 应用的。

2、name 属性的 apple-mobile-web-app-status-bar-style 值（改变顶部状态条的颜色）

说明：

• 在 web app 应用下状态条（屏幕顶部条）的颜色；
• 默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；

注意：若值为“black-translucent”将会占据页面位置，浮在页面上方（会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px ）。

format-detection的值用于启用或禁用自动检测在网页中可能出现的电话号码；

第二部分：设置ipad的启动画面

ipad制作web应用程序的启动画面时发现个问题，只能显示竖屏图，横屏图出不来，如下：

首先页面头部里要加入（这个是APP启动画面图片，如果不设置，启动画面就是白屏，图片像素就是手机全屏的像素）

重点在下面：

两张图片必须符合宽高标准才能正常显示：

startup_portrait.png  768x1004

startup_landscape.png 748x1024

1、要注意横屏用图必须竖过来，也就是宽748高1024才能显示

2、今天又发现，在safari里选“添加到主屏幕”时要保证设备是竖放，才能在完成后成功显示启动画面。