設(shè)計教程

移動web H5開發(fā)技巧分享：設(shè)置iphone和ipad的啟動畫面

3919

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

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

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

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

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

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

%e8%ae%be%e7%bd%aeiphone%e5%92%8cipad%e7%9a%84%e5%90%af%e5%8a%a8%e7%94%bb%e9%9d%a2-%e6%b7%bb%e5%8a%a0%e5%88%b0%e4%b8%bb%e5%b1%8f%e5%b9%95

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

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

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

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

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

iphone-%e6%89%8b%e6%9c%ba-%e5%90%84%e7%a7%8d%e6%9c%ba%e5%9e%8b%e7%9a%84%e5%b0%ba%e5%af%b8%e5%92%8c%e8%a7%84%e8%8c%83

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

apple-touch-startup-image

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

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

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

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

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

代碼如下：

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

apple-touch-startup-image是用來標(biāo)示啟動畫面的

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 程序的支持）

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

說明：

網(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)條的顏色）

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

說明：

在 web app 應(yīng)用下狀態(tài)條（屏幕頂部條）的顏色；

默認(rèn)值為 default（白色），可以定為 black（黑色）和 black-translucent（灰色半透明）；

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

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

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

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

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

1 2	`<link rel="apple-touch-startup-image"`?`media="screen and (orientation: portrait)"`?`href="/apple_startup.png">` `<link rel="apple-touch-startup-image"`?`media="screen and (orientation: landscape)"`?`href="/apple_startup1.png">`