苹果IOS在Safari浏览器中将网页添加到主屏幕做伪Web App，自定义图标，启动动画，自定义名称，全屏应用pwa

迷南。 2023-10-08 21:33 16阅读 0赞

在ios中我们可以使用Safari浏览自带的将网页添加到主屏幕上，让我们的web页面看起来像一个本地应用程序一样，通过桌面APP图标一打开，直接全屏展示，就像在APP中效果一样，完全体会不到你是在浏览器中。

### 最后实现的效果图 ###

通过点击桌面上的图标，直接打开全屏页面:(这图标是我用CSDN的图标，嘻嘻，官方应该不介意吧)

![984fa88b52bd433d90d816f34ca4adc3.png][]

具体实现步骤一共三步：1.网站添加样式，2.添加到桌面图标，3.打开桌面图标

### 1.网站添加样式 ###

在网站的html的head里面添加：（想添加启动动画的，可以看文章最后的启动图配置）

### 2.添加到桌面图标 ###

用safari打开网站，然后点击添加到桌面主屏幕

![0d2d693592804bfab4a09bfbb634168f.png][]

然后标题就是html的title里面默认的，也可以修改，然后就可以在主屏幕看到了：

![50e643f403524f2e9d306b149e83c57b.png][]

### 3.打开桌面图标 ###

通过点击桌面上的图标，打开后直接就是全屏展示效果，类似于APP一样

![e06f78235dd040e58f2bbd13faf3c083.jpeg][]

到此，就结束了。

### 附加内容：配置app图标尺寸和启动图 ###

这里会有一个app图标尺寸问题一般使用120\*120，当然对于不同的设备会用不同的尺寸对应：下面是详细尺寸

![460c97c65fe20f876e136268ce8402f4.png][]

APP图标显示配置：

APP启动图配置：

可以使用工具一键生成不同设备的启动图：[使用pwa-asset-generator自动化生成全平台WebApp的启动图\_1024小神的博客-CSDN博客][pwa-asset-generator_WebApp_1024_-CSDN]

<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">
          
          <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">
          
          <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">
          
          <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">
          
          <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主流机型常见的不同设备尺寸

![6ba75437bf0d4a7b9ef3185e12320142.png][]

### iPhone主流机型 ###

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>分辨率点数</th> 
   <th>分辨率像素</th> 
   <th>倍图</th> 
   <th>尺寸</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>iPhone SE</td> 
   <td>320x568</td> 
   <td>640x1136</td> 
   <td>@2x</td> 
   <td>4.0寸</td> 
  </tr> 
  <tr> 
   <td>iPhone 6/6s/7/8/SE2</td> 
   <td>375x667</td> 
   <td>750x1334</td> 
   <td>@2x</td> 
   <td>4.7寸</td> 
  </tr> 
  <tr> 
   <td>iPhone 6p/7p/8p</td> 
   <td>414x736</td> 
   <td>1242x2208</td> 
   <td>@3x</td> 
   <td>5.5寸</td> 
  </tr> 
  <tr> 
   <td>iPhone xr/11</td> 
   <td>414x896</td> 
   <td>828x1792</td> 
   <td>@2x</td> 
   <td>6.1寸</td> 
  </tr> 
  <tr> 
   <td>iPhone x/xs/11Pro</td> 
   <td>375x812</td> 
   <td>1125x2436</td> 
   <td>@3x</td> 
   <td>5.8寸</td> 
  </tr> 
  <tr> 
   <td>iPhone xsMax/11ProMax</td> 
   <td>414x896</td> 
   <td>1242x2688</td> 
   <td>@3x</td> 
   <td>6.5寸</td> 
  </tr> 
  <tr> 
   <td>iPhone 12 mini</td> 
   <td>360x780</td> 
   <td>1080x2340</td> 
   <td>@3x</td> 
   <td>5.4寸</td> 
  </tr> 
  <tr> 
   <td>iPhone 12/12 Pro</td> 
   <td>390x844</td> 
   <td>1170x2532</td> 
   <td>@3x</td> 
   <td>6.1寸</td> 
  </tr> 
  <tr> 
   <td>iPhone 12 Pro Max</td> 
   <td>428x926</td> 
   <td>1284x2778</td> 
   <td>@3x</td> 
   <td>6.7寸</td> 
  </tr> 
  <tr> 
   <td>iPhone 13 mini</td> 
   <td>360x780</td> 
   <td>1080x2340</td> 
   <td>@3x</td> 
   <td>5.4寸</td> 
  </tr> 
  <tr> 
   <td>iPhone 13/13 Pro</td> 
   <td>390x844</td> 
   <td>1170x2532</td> 
   <td>@3x</td> 
   <td>6.1寸</td> 
  </tr> 
  <tr> 
   <td>iPhone 13 Pro Max</td> 
   <td>428x926</td> 
   <td>1284x2778</td> 
   <td>@3x</td> 
   <td>6.7寸</td> 
  </tr> 
  <tr> 
   <td>iPhone 14</td> 
   <td>390x844</td> 
   <td>1170x2532</td> 
   <td>@3x</td> 
   <td>6.1寸</td> 
  </tr> 
  <tr> 
   <td>iPhone 14Plus</td> 
   <td>428x926</td> 
   <td>1284x2778</td> 
   <td>@3x</td> 
   <td>6.7寸</td> 
  </tr> 
  <tr> 
   <td>iPhone 14Pro</td> 
   <td>393x852</td> 
   <td>1179x2556</td> 
   <td>@3x</td> 
   <td>6.1寸</td> 
  </tr> 
  <tr> 
   <td>iPhone 14ProMax</td> 
   <td>430x932</td> 
   <td>1290x2796</td> 
   <td>@3x</td> 
   <td>6.7寸</td> 
  </tr> 
 </tbody> 
</table>

[984fa88b52bd433d90d816f34ca4adc3.png]: https://img-blog.csdnimg.cn/984fa88b52bd433d90d816f34ca4adc3.png
[0d2d693592804bfab4a09bfbb634168f.png]: https://img-blog.csdnimg.cn/0d2d693592804bfab4a09bfbb634168f.png
[50e643f403524f2e9d306b149e83c57b.png]: https://img-blog.csdnimg.cn/50e643f403524f2e9d306b149e83c57b.png
[e06f78235dd040e58f2bbd13faf3c083.jpeg]: https://img-blog.csdnimg.cn/e06f78235dd040e58f2bbd13faf3c083.jpeg
[460c97c65fe20f876e136268ce8402f4.png]: https://img-blog.csdnimg.cn/img_convert/460c97c65fe20f876e136268ce8402f4.png
[pwa-asset-generator_WebApp_1024_-CSDN]: https://xiaoshen.blog.csdn.net/article/details/130358462
[6ba75437bf0d4a7b9ef3185e12320142.png]: https://img-blog.csdnimg.cn/6ba75437bf0d4a7b9ef3185e12320142.png