在iPhone上将HTML网页添加到主屏幕（俗称“Web App”或“PWA”），需要通过特定的HTML标签和配置文件来定义其图标和标题。核心是让Safari浏览器识别你的网页为“可添加的应用”，并指定相应的资源。
未来趋势：使用 Web App Manifest (PWA)
apple-touch-icon 等是苹果的私有方案。现代Web标准推荐使用 Web App Manifest (manifest.json) 来统一管理应用的名称、图标、显示模式等信息，这是PWA（渐进式Web应用）的核心
juejin+1
。Chrome、Edge、Firefox、Safari（iOS 16.4+）等现代浏览器都支持。
完整配置示例
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>工作日志</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<!-- 1. iOS核心配置：标题和图标 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="工作日志">
<link rel="apple-touch-icon" sizes="180x180" href="https://www.googcool.com/demo/d2/ios_icon_config/image/icon180.png">
<!-- 2. 现代标准配置：Web App Manifest (PWA) -->
<link rel="manifest" href="https://www.googcool.com/demo/d2/ios_icon_config/manifest.json">
<!-- 3. 主题色（影响任务栏/状态栏颜色） -->
<meta name="theme-color" content="#4285f4">
</head>
<body>
<h1>测试</h1>
<!-- 你的内容 -->
<script>
// 检测是否从主屏幕启动（iOS）
if (window.navigator.standalone) {
console.log('从主屏幕启动，全屏模式');
}
</script>
</body>
</html>ios_web_yindao.html（可选）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>添加至主屏幕指引</title>
<!-- 设置图标 -->
<link rel="apple-touch-icon" href="https://via.placeholder.com/180">
<meta name="apple-mobile-web-app-capable" content="yes">
<style>
:root {
--ios-blue: #007AFF;
--ios-bg: #f2f2f7;
--card-bg: #ffffff;
--text-main: #000000;
--text-sub: #8e8e93;
}
body {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
background-color: var(--ios-bg);
margin: 0; padding: 20px;
color: var(--text-main);
line-height: 1.5;
-webkit-user-select: none;
}
.container { max-width: 450px; margin: 0 auto; }
header { text-align: center; margin-bottom: 25px; padding-top: 20px; }
header h1 { font-size: 24px; margin-bottom: 8px; font-weight: 600; }
header p { color: var(--text-sub); font-size: 15px; }
/* 版本切换选项卡 */
.tab-box {
display: flex;
background: #d1d1d6;
padding: 2px;
border-radius: 10px;
margin-bottom: 25px;
}
.tab {
flex: 1; text-align: center; padding: 10px;
font-size: 14px; font-weight: 600;
border-radius: 8px; cursor: pointer;
transition: all 0.2s;
}
.tab.active { background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.15); color: var(--ios-blue); }
/* 步骤卡片样式 */
.step-card {
background: var(--card-bg);
border-radius: 16px;
padding: 20px;
margin-bottom: 15px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.step-header { display: flex; align-items: center; margin-bottom: 12px; }
.step-num {
background: var(--ios-blue); color: white;
width: 24px; height: 24px; border-radius: 50%;
display: flex; justify-content: center; align-items: center;
font-size: 13px; margin-right: 12px; font-weight: bold;
}
.step-title { font-weight: 700; font-size: 17px; }
.step-desc { font-size: 15px; color: #3a3a3c; margin-left: 36px; line-height: 1.4; }
/* 模拟 UI 元素 */
.ui-tag {
display: inline-flex; align-items: center;
background: #f1f1f7; border: 1px solid #d1d1d6;
border-radius: 6px; padding: 2px 8px;
color: var(--ios-blue); font-weight: 600; font-size: 14px;
}
.icon-share { width: 18px; height: 18px; vertical-align: middle; }
.hidden { display: none; }
/* 成功页 */
#success-ui { text-align: center; padding: 80px 20px; }
.big-icon { font-size: 64px; margin-bottom: 20px; }
</style>
</head>
<body>
<div class="container" id="main-content">
<header>
<h1>iPhone安装APP到桌面</h1>
<p>请根据您的 Safari 界面选择操作指引</p>
</header>
<!-- 版本切换 -->
<div class="tab-box">
<div class="tab active" onclick="switchMode('new')">布局 A (右下角 ...)</div>
<div class="tab" onclick="switchMode('std')">布局 B (底边中心)</div>
</div>
<!-- 模式 A: 按钮在右下角 -->
<div id="mode-new">
<div class="step-card">
<div class="step-header">
<div class="step-num">1</div>
<div class="step-title">点击右下角功能键</div>
</div>
<p class="step-desc">
在 Safari 底部地址栏的右侧，点击 <span class="ui-tag">···</span> 或 <span class="ui-tag">AA</span> 按钮。
</p>
</div>
<div class="step-card">
<div class="step-header">
<div class="step-num">2</div>
<div class="step-title">选择共享/分享菜单</div>
</div>
<p class="step-desc">
在弹出的面板中找到并点击 <span class="ui-tag">共享 <svg class="icon-share" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13"/></svg></span>。
</p>
</div>
</div>
<!-- 模式 B: 按钮在中心 -->
<div id="mode-std" class="hidden">
<div class="step-card">
<div class="step-header">
<div class="step-num">1</div>
<div class="step-title">点击底部共享/分享按钮</div>
</div>
<p class="step-desc">
在屏幕最下方中央找到并点击分享图标 <span class="ui-tag"><svg class="icon-share" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13"/></svg></span>。
</p>
</div>
</div>
<!-- 共有步骤 -->
<div class="step-card">
<div class="step-header">
<div class="step-num">3</div>
<div class="step-title">添加到主屏幕</div>
</div>
<p class="step-desc">
在菜单列表中**向上滑动**，找到并点击 <span class="ui-tag">添加到主屏幕</span>。
</p>
</div>
<div class="step-card">
<div class="step-header">
<div class="step-num">4</div>
<div class="step-title">确认完成</div>
</div>
<p class="step-desc">
点击右上角的 <span style="color:var(--ios-blue); font-weight:bold;">添加</span>，图标将出现在您的手机桌面上。
</p>
</div>
</div>
<!-- 已安装状态 -->
<div id="success-ui" class="hidden">
<div class="big-icon">📱</div>
<h2>已添加至主屏幕</h2>
<p style="color:var(--text-sub)">现在您可以直接点击桌面图标进入</p>
</div>
<script>
function switchMode(type) {
const tabs = document.querySelectorAll('.tab');
if(type === 'new') {
tabs[0].classList.add('active');
tabs[1].classList.remove('active');
document.getElementById('mode-new').classList.remove('hidden');
document.getElementById('mode-std').classList.add('hidden');
} else {
tabs[1].classList.add('active');
tabs[0].classList.remove('active');
document.getElementById('mode-std').classList.remove('hidden');
document.getElementById('mode-new').classList.add('hidden');
}
}
function checkStatus() {
// 如果已经以 App 模式打开，显示成功界面
if (window.navigator.standalone === true || window.matchMedia('(display-mode: standalone)').matches) {
document.getElementById('main-content').classList.add('hidden');
document.getElementById('success-ui').classList.remove('hidden');
}
}
window.onload = checkStatus;
</script>
</body>
</html>
ios_icon_config/manifest.json
{
"name": "猫咖工作日志",
"short_name": "工作日志",
"description": "猫咖工作日志提交",
"start_url": "https://www.googcool.com/demo/d2/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#4285f4",
"icons": [
{
"src": "https://www.googcool.com/demo/d2/ios_icon_config/image/icon192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://www.googcool.com/demo/d2/ios_icon_config/image/icon512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}ios_icon_config/image（图标）