怎么把 H5 页面变成“类 App”图标放在 iPhone 主屏幕

这是用户最常误以为要“安装 HTML5”的真实需求。Safari 提供了 “添加到主屏幕” 功能，本质是生成一个 PWA（Progressive Web App）快捷方式：

• 用 Safari 打开你的 H5 页面（必须是 HTTPS 协议，HTTP 会禁用部分 API）
• 点击底部分享按钮 → 向上滑动找到并点击 添加到主屏幕
• 确认名称后，图标就会出现在主屏，全屏启动、无地址栏，体验接近原生
• 前提条件：页面需提供有效的 manifest.json（定义图标、主题色、显示模式）和注册 service worker（实现离线缓存）

⚠️ 常见失败原因：页面没配 HTTPS、manifest 路径未在 中正确声明、service worker 注册脚本未执行或抛错。

WKWebView 内嵌 H5 时为什么 JS 调不到摄像头或相册

如果你是开发者，把 H5 页面嵌入原生 iOS App（比如用 WKWebView），会发现很多 HTML5 API 默认被禁用——这不是 bug，是 iOS 的安全策略：

• getUserMedia()（调摄像头/麦克风）要求页面协议为 HTTPS，且需用户主动触发（如点击按钮），不能 onload 自动调用
• 在 WKWebView 中默认无法唤起相册，需在原生层实现 WKUIDelegate 的 webView:runOpenPanelWithParameters:initiatedByFrame:completionHandler: 并桥接
• 定位（navigator.geolocation）需在 Info.plist 中声明 NSLocationWhenInUseUsageDescription，否则静默失败

? 简单验证方法：在 Safari 中打开同一页面，若功能正常，说明问题出在 WebView 配置或原生权限缺失，而非 HTML5 本身不支持。

立即学习“前端免费学习笔记（深入）”；

为什么 H5 页面在 iPhone 上视频播不了、下载失败或字体模糊

这些不是“HTML5 不支持”，而是 iOS 对 Web 行为的硬性限制或渲染差异：

• 自动播放（autoplay）在 iOS Safari 中仅允许静音播放；有声音的视频必须由用户手势触发（如 button.onclick → video.play()）
• H5 页面无法直接触发文件下载（location.href = "xxx.pdf" 无效），iOS 会拦截；可行方案是用 fetch + Blob + URL.createObjectURL 创建临时链接，再模拟点击，但 PDF/Excel 等仍可能跳转到预览页而非下载
• 字体渲染差异：iOS 默认使用 San Francisco 字体，若 CSS 中未设 font-smoothing: antialiased 或未提供 @font-face fallback，中文可能发虚

? 关键提醒：所有这些行为，在 2026 年的 iOS 17/18 中依然有效——苹果没打算放宽，所以适配必须围绕规则来，而不是等“开启开关”。

真要打包成 .ipa 上架 App Store？别只盯着 HTML5

如果目标是发布到 App Store，单纯“HTML5 打包”已不可行。Apple 明确要求 App 具备“实质性原生功能”：

• Cordova / PhoneGap / Capacitor 这类工具仍可用，但必须集成至少一个原生模块（如推送、生物认证、后台音频），且 UI 不能全是 WebView 全屏加载
• App Store 审核会检查 UIWebView 调用（已废弃），强制使用 WKWebView；还会扫描 JS 里是否有 eval()、new Function() 等动态执行代码（禁止）
• 服务器必须支持 HTTPS，所有资源（含 manifest、worker.js、图片）都需同源或配置正确 CORS

⚠️ 最容易被忽略的一点：Apple 不审核“你用了什么技术”，而审核“用户能否获得与原生一致的体验”。一个卡顿、白屏、权限弹窗不出现、离线即瘫痪的 H5 包，不管多“标准”，都会被拒。