在ios中我們可以使用Safari瀏覽自帶的將網頁添加到主屏幕上，讓我們的web頁面看起來像native那樣
第一步：
第二步：
第三步：
到這里還沒結束：我們還要進行相關設置才能使我們的應用更像原生的app
自定義圖標和app名稱
在你的index.htm里面加上如下代碼
1 <!-- 自定義應用名稱 --> 2 <meta name="application-name" content="百度一下"> 3 <!-- 自定義圖標 --> 4 <link rel="apple-touch-icon-precomposed" sizes="120x120" href="%PUBLIC_URL%/icon.ico">
5 這里會有一個app圖標尺寸問題一般使用120*120，當然對於不同的設備會用不同的尺寸對應：下面是詳細尺寸
1 <!-- 網站開啟對 web app 程序的支持 具體表現為去除瀏覽器地址欄和底部導航欄 --> 2 <meta name="apple-mobile-web-app-capable" content="yes"> 3 <!-- 用來定義頂部狀態欄的形式默認是default為白色 black為黑色 black-translucent為灰色半透明（會占據屏幕的約20px，不同的設備可能會有差異）--> 4 <!-- 在定義了apple-mobile-web-app-capable的前提下，設置狀態欄的屬性值apple-mobile-web-app-status-bar-style才有效； --> 5 <meta name="apple-mobile-web-app-status-bar-style" content="default"> 6 7 <!-- apple-touch-startup-image用來配置啟動動畫 --> 8 <!-- 這里要注意，這里圖片的尺寸要和設備的靜態圖片顯示尺寸完全對應，差一個像素都會導致啟動動畫無法顯示 --> 9 <!-- 下面列舉了iPhone的所有尺寸（ps:為了方便大家就全部貼出來了！！） --> 10 <!-- iPhone 678 startup image @2x--> 11 <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"> 12 <!-- iPhone 678p startup image @3x--> 13 <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"> 14 <!-- iPhone X Xs startup image @3x--> 15 <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"> 16 <!-- iPhone XR startup image @2X --> 17 <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"> 18 <!-- iPhone XR Max startup image @3x--> 19 <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">
以上就是全部設置