一、將 H5 頁面添加到主屏幕的步驟
-
打開 Safari 瀏覽器
在 iPhone 上打開 Safari 瀏覽器，訪問目標網頁（H5 頁面）。 -
點擊分享按鈕
在 Safari 瀏覽器底部點擊 “分享” 圖標（箭頭向上的按鈕）。 -
添加到主屏幕
在分享菜單中找到并點擊 “添加到主屏幕” 選項。 -
自定義名稱
在彈出的頁面中，可以修改快捷方式的名稱（默認為網頁的<title>），然后點擊 “添加”。 -
全屏運行
添加完成后，點擊主屏幕上的圖標即可全屏運行該網頁，體驗類似原生應用的效果。
二、動態控制 Web App 的桌面圖標和名稱
1. 設置默認圖標和名稱
在 HTML 頁面的 <head> 中添加以下元數據，確保添加到主屏幕時顯示正確的圖標和名稱：
<!-- 自定義應用名稱（優先于 <title>） -->
<meta name="apple-mobile-web-app-title" content="我的 Web App"><!-- 自定義應用圖標（支持多種尺寸） -->
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-180.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-touch-icon-120.png">
<link rel="apple-touch-icon" sizes="167x167" href="/icons/apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180.png"><!-- 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes"><!-- 狀態欄樣式（黑色半透明） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">-
圖標要求：
- 推薦使用 PNG 格式，尺寸至少為?
180x180?像素。 - 不同尺寸的圖標會適配不同設備（如 iPhone 8、iPhone 13 等）。
- 推薦使用 PNG 格式，尺寸至少為?
-
名稱優先級：
apple-mobile-web-app-title會覆蓋網頁的<title>標簽。
2. 動態修改圖標和名稱
iOS 不支持在運行時動態修改已添加到主屏幕的圖標和名稱。但可以通過以下方式實現“動態”效果：
（1）通過 JavaScript 動態更新頁面內容
在用戶添加到主屏幕之前，可以通過 JavaScript 動態修改頁面的 <title> 和 apple-touch-icon：
<!DOCTYPE html>
<html>
<head><title id="dynamic-title">默認標題</title><meta name="apple-mobile-web-app-title" id="dynamic-app-title" content="默認名稱"><link rel="apple-touch-icon" id="dynamic-icon" href="/default-icon.png"><script>// 動態修改標題和圖標function updateWebAppConfig(title, iconUrl) {document.title = title;document.getElementById('dynamic-title').textContent = title;document.getElementById('dynamic-app-title').content = title;document.getElementById('dynamic-icon').href = iconUrl;}// 示例：根據用戶選擇修改配置updateWebAppConfig("新名稱", "/new-icon.png");</script>
</head>
<body><!-- 頁面內容 -->
</body>
</html>- 注意事項：
- 用戶必須在?修改后?添加到主屏幕，才能生效。
- 已存在的快捷方式無法動態更新，用戶需手動刪除后重新添加。
（2）引導用戶重新添加
如果需要更新已添加的快捷方式，需提示用戶：
- 長按主屏幕圖標，進入編輯模式。
- 刪除舊的快捷方式。
- 重新訪問網頁并添加到主屏幕。
三、進階優化：提升 Web App 體驗
-
啟動動畫（Splash Screen）
添加自定義啟動圖，提升用戶體驗：<link rel="apple-touch-startup-image" href="/startup-image.png">- 啟動圖尺寸需適配設備屏幕（如?
1125x2436?適用于 iPhone 13）。
- 啟動圖尺寸需適配設備屏幕（如?
-
Web App Manifest（PWA 支持）
雖然 iOS 對 PWA 支持有限，但可以通過以下配置增強體驗：{"name": "我的 Web App","short_name": "WebApp","icons": [{"src": "/icons/icon-192.png","sizes": "192x192","type": "image/png"}],"start_url": "/","display": "standalone","background_color": "#ffffff","theme_color": "#000000" }-
在 HTML 中引用：
<link rel="manifest" href="/manifest.json">
-
-
離線緩存
使用 Service Worker 緩存資源，提升離線訪問能力。
四、常見問題與解決方案
| 問題 | 解決方案 |
|---|---|
| 圖標未顯示 | 確保圖標路徑正確，且使用?apple-touch-icon?標簽。 |
| 名稱未生效 | 檢查?apple-mobile-web-app-title?是否存在且優先級高于?<title>。 |
| 無法全屏 | 確認?apple-mobile-web-app-capable?設置為?yes。 |
| 動態修改無效 | 用戶需重新添加到主屏幕以應用新配置。 |
五、完整示例代碼
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title id="dynamic-title">默認標題</title><meta name="apple-mobile-web-app-title" id="dynamic-app-title" content="默認名稱"><link rel="apple-touch-icon" id="dynamic-icon" href="/default-icon.png"><link rel="apple-touch-startup-image" href="/startup.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><link rel="manifest" href="/manifest.json"><script>// 動態修改配置function updateConfig(title, iconUrl) {document.title = title;document.getElementById('dynamic-title').textContent = title;document.getElementById('dynamic-app-title').content = title;document.getElementById('dynamic-icon').href = iconUrl;}// 示例：修改為新配置updateConfig("我的 Web App", "/new-icon.png");</script>
</head>
<body><h1>歡迎使用 Web App</h1><p>點擊右下角“分享” -> “添加到主屏幕”即可全屏運行。</p>
</body>
</html>通過以上方法，你可以將 H5 頁面轉化為 iOS 上的偽 Web App，并控制其名稱和圖標。用戶只需一次操作即可享受接近原生應用的體驗！
