看到這樣的標(biāo)題，如果不明白，25學(xué)堂的小編給大家翻譯下，就是在iOS中為 移動(dòng)網(wǎng)站添加圖標(biāo)到主屏幕以及增加啟動(dòng)畫面。

比如我們做了一個(gè)H5項(xiàng)目，想要用戶向原生APP一樣，制作web h5的啟動(dòng)圖標(biāo)。讓用戶在iphone手機(jī)桌面可以直接點(diǎn)擊我們的圖標(biāo)啟動(dòng)web h5或者在ipad上啟動(dòng)，而且設(shè)置下我們的啟動(dòng)圖片等過程。

具體實(shí)現(xiàn)的方法是通過利用iOS中Safari瀏覽器的特性來實(shí)現(xiàn)的。滿足一下我們偽Web App的虛榮心。O(∩_∩)O哈哈哈~

具體實(shí)現(xiàn)步驟：

第一步：用蘋果自帶的 瀏覽器Safari 打開 25學(xué)堂官網(wǎng)：http://www.itlnk.cn/

第二步：點(diǎn)擊瀏覽器下面的中間的分享圖標(biāo)。出現(xiàn)下圖，點(diǎn)擊 ? 添加到主屏幕

第三步：設(shè)置web APP的名稱即可，點(diǎn)擊完成。

有興趣的小伙伴可以試試25學(xué)堂的APP。

下面詳細(xì)解讀一下如何來設(shè)置iphone和ipad的啟動(dòng)畫面

第一部分，我們先回顧一下iphone 手機(jī) 各種機(jī)型的尺寸和規(guī)范：

下面是web h5瀏覽器渲染的一些參數(shù)。跟我們app設(shè)計(jì)的尺寸關(guān)系不大。希望大家別搞混了。

在我們的web h5項(xiàng)目當(dāng)中的設(shè)置啟動(dòng)圖標(biāo)和啟動(dòng)圖片的參數(shù)是：

apple-touch-startup-image

1、添加圖標(biāo)到主屏幕是Web App的第一步：

添加圖標(biāo)到屏幕里的有兩種屬性值：

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

區(qū)別就在于是否會(huì)應(yīng)用iOS中自動(dòng)給圖標(biāo)添加的那層高光。這個(gè)高光在ios7系統(tǒng)之后就不存在啦。

所以，現(xiàn)在無論用哪個(gè)都是可以的。

代碼如下：

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

2、為APP 添加啟動(dòng)圖片

<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項(xiàng)目的設(shè)置iphone的啟動(dòng)圖標(biāo)和啟動(dòng)圖。

<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是用來標(biāo)示啟動(dòng)畫面的

apple-mobile-web-app-capable是用來定義應(yīng)用全屏展示的；

在定義了apple-mobile-web-app-capable的前提下，設(shè)置狀態(tài)欄的屬性值apple-mobile-web-app-status-bar-style才有效；

如果你不想要設(shè)置status-bar為黑色，詳細(xì)閱讀：

（A）name 屬性的 apple-mobile-web-app-capable 值（網(wǎng)站開啟對 web app 程序的支持）

說明：

• 網(wǎng)站開啟對 web app 程序的支持。
• 該 meta 可以看出內(nèi)容為“蘋果設(shè)備 web 應(yīng)用程序 xx”，就是說該 meta 是專門定義 web 應(yīng)用的。

2、name 屬性的 apple-mobile-web-app-status-bar-style 值（改變頂部狀態(tài)條的顏色）

說明：

• 在 web app 應(yīng)用下狀態(tài)條（屏幕頂部條）的顏色；
• 默認(rèn)值為 default（白色），可以定為 black（黑色）和 black-translucent（灰色半透明）；

注意：若值為“black-translucent”將會(huì)占據(jù)頁面位置，浮在頁面上方（會(huì)覆蓋頁面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕為 40px ）。

format-detection的值用于啟用或禁用自動(dòng)檢測在網(wǎng)頁中可能出現(xiàn)的電話號碼；

第二部分：設(shè)置ipad的啟動(dòng)畫面

ipad制作web應(yīng)用程序的啟動(dòng)畫面時(shí)發(fā)現(xiàn)個(gè)問題，只能顯示豎屏圖，橫屏圖出不來，如下：

首先頁面頭部里要加入（這個(gè)是APP啟動(dòng)畫面圖片，如果不設(shè)置，啟動(dòng)畫面就是白屏，圖片像素就是手機(jī)全屏的像素）

重點(diǎn)在下面：

兩張圖片必須符合寬高標(biāo)準(zhǔn)才能正常顯示：

startup_portrait.png??768x1004

startup_landscape.png 748x1024

1、要注意橫屏用圖必須豎過來，也就是寬748高1024才能顯示

2、今天又發(fā)現(xiàn)，在safari里選“添加到主屏幕”時(shí)要保證設(shè)備是豎放，才能在完成后成功顯示啟動(dòng)畫面。