在ios中我們可以使用Safari瀏覽自帶的將網(wǎng)頁(yè)添加到主屏幕上，讓我們的web頁(yè)面看起來(lái)像一個(gè)本地應(yīng)用程序一樣，通過(guò)桌面APP圖標(biāo)一打開(kāi)，直接全屏展示，就像在APP中效果一樣，完全體會(huì)不到你是在瀏覽器中。
最后實(shí)現(xiàn)的效果圖
通過(guò)點(diǎn)擊桌面上的圖標(biāo)，直接打開(kāi)全屏頁(yè)面:(這圖標(biāo)是我用CSDN的圖標(biāo)，嘻嘻，官方應(yīng)該不介意吧)
具體實(shí)現(xiàn)步驟一共三步：1.網(wǎng)站添加樣式，2.添加到桌面圖標(biāo)，3.打開(kāi)桌面圖標(biāo)
1.網(wǎng)站添加樣式
在網(wǎng)站的html的head里面添加：（想添加啟動(dòng)動(dòng)畫(huà)的，可以看文章最后的啟動(dòng)圖配置）
<head> <meta charset="UTF-8"> <!-- 自定義應(yīng)用名稱 --> <meta name="application-name" content="百度一下"> <!-- 自定義應(yīng)用圖標(biāo)可用 --> <link rel="apple-touch-icon-precomposed" sizes="120x120" > <!-- 全屏設(shè)置 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"/> <!-- 網(wǎng)站開(kāi)啟對(duì) web app 程序的支持 具體表現(xiàn)為去除瀏覽器地址欄和底部導(dǎo)航欄 ：先保存為桌面書(shū)簽，然后通過(guò)書(shū)簽打開(kāi)即可生效--> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 用來(lái)定義頂部狀態(tài)欄的形式默認(rèn)是default為白色 black為黑色 black-translucent為灰色半透明（會(huì)占據(jù)屏幕的約20px，不同的設(shè)備可能會(huì)有差異）--> <!-- 在定義了apple-mobile-web-app-capable的前提下，設(shè)置狀態(tài)欄的屬性值apple-mobile-web-app-status-bar-style才有效； --> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <title>1024小神</title> </head>
2.添加到桌面圖標(biāo)
用safari打開(kāi)網(wǎng)站，然后點(diǎn)擊添加到桌面主屏幕
然后標(biāo)題就是html的title里面默認(rèn)的，也可以修改，然后就可以在主屏幕看到了：
3.打開(kāi)桌面圖標(biāo)
通過(guò)點(diǎn)擊桌面上的圖標(biāo)，打開(kāi)后直接就是全屏展示效果，類似于APP一樣
到此，就結(jié)束了。
附加內(nèi)容：配置app圖標(biāo)尺寸和啟動(dòng)圖
這里會(huì)有一個(gè)app圖標(biāo)尺寸問(wèn)題一般使用120*120，當(dāng)然對(duì)于不同的設(shè)備會(huì)用不同的尺寸對(duì)應(yīng)：下面是詳細(xì)尺寸
APP圖標(biāo)顯示配置：
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png">
<!-- iPad 3+ (with @2× display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png">
<!-- iPad (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
<!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png">
<!-- iPhone (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<!-- Fallback for everything else -->
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">
<!-- IOS 主屏幕應(yīng)用全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 安卓 主屏幕應(yīng)用全屏 -->
<meta name="mobile-web-app-capable" content="yes"> APP啟動(dòng)圖配置：
可以使用工具一鍵生成不同設(shè)備的啟動(dòng)圖：使用pwa-asset-generator自動(dòng)化生成全平臺(tái)WebApp的啟動(dòng)圖_1024小神的博客-CSDN博客
<!-- apple-touch-startup-image用來(lái)配置啟動(dòng)動(dòng)畫(huà) -->
<!-- 這里要注意，這里圖片的尺寸要和設(shè)備的靜態(tài)圖片顯示尺寸完全對(duì)應(yīng)，差一個(gè)像素都會(huì)導(dǎo)致啟動(dòng)動(dòng)畫(huà)無(wú)法顯示 -->
<!-- 下面列舉了iPhone的所有尺寸（ps:為了方便大家就全部貼出來(lái)了?。。?-->
<!-- iPhone 678 startup image @2x-->
<link href="%PUBLIC_URL%/750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 678p startup image @3x-->
<link href="%PUBLIC_URL%/1242x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">
<!-- iPhone X Xs startup image @3x-->
<link href="%PUBLIC_URL%/1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">
<!-- iPhone XR startup image @2X -->
<link href="%PUBLIC_URL%/828x1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone XR Max startup image @3x-->
<link href="%PUBLIC_URL%/1242x2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image"> iPhone主流機(jī)型常見(jiàn)的不同設(shè)備尺寸?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-696945.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-696945.html
iPhone主流機(jī)型
| 名稱 | 分辨率點(diǎn)數(shù) | 分辨率像素 | 倍圖 | 尺寸 |
|---|---|---|---|---|
| iPhone SE | 320x568 | 640x1136 | @2x | 4.0寸 |
| iPhone 6/6s/7/8/SE2 | 375x667 | 750x1334 | @2x | 4.7寸 |
| iPhone 6p/7p/8p | 414x736 | 1242x2208 | @3x | 5.5寸 |
| iPhone xr/11 | 414x896 | 828x1792 | @2x | 6.1寸 |
| iPhone x/xs/11Pro | 375x812 | 1125x2436 | @3x | 5.8寸 |
| iPhone xsMax/11ProMax | 414x896 | 1242x2688 | @3x | 6.5寸 |
| iPhone 12 mini | 360x780 | 1080x2340 | @3x | 5.4寸 |
| iPhone 12/12 Pro | 390x844 | 1170x2532 | @3x | 6.1寸 |
| iPhone 12 Pro Max | 428x926 | 1284x2778 | @3x | 6.7寸 |
| iPhone 13 mini | 360x780 | 1080x2340 | @3x | 5.4寸 |
| iPhone 13/13 Pro | 390x844 | 1170x2532 | @3x | 6.1寸 |
| iPhone 13 Pro Max | 428x926 | 1284x2778 | @3x | 6.7寸 |
| iPhone 14 | 390x844 | 1170x2532 | @3x | 6.1寸 |
| iPhone 14Plus | 428x926 | 1284x2778 | @3x | 6.7寸 |
| iPhone 14Pro | 393x852 | 1179x2556 | @3x | 6.1寸 |
| iPhone 14ProMax | 430x932 | 1290x2796 | @3x | 6.7寸 |
到了這里，關(guān)于蘋(píng)果IOS在Safari瀏覽器中將網(wǎng)頁(yè)添加到主屏幕做偽Web App，自定義圖標(biāo)，啟動(dòng)動(dòng)畫(huà)，自定義名稱，全屏應(yīng)用pwa的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
