iosPWA 指南

iosPWA 不遵循 manifest.json 配置，只识别特定的标签，iosPWA 的状态栏也需要特别设置，小结相关配置：

<!-- 是否隐藏地址栏和操作栏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- 状态栏不透明时的状态栏和整个应用的背景色，状态栏的字体颜色会自动选择合适的颜色，此方式在应用开屏阶段状态栏背景色不可控制 -->
<meta name="theme-color" content="#ddd" />

<!-- 状态栏透明，设置后 theme-color 不再有效，且字体颜色只会是白色，故需要应用内设置较深的背景色 -->
<meta
  name="apple-mobile-web-app-status-bar-style"
  content="black-translucent"
/>

<!-- 浏览器标签栏图标 -->
<link
  rel="shortcut icon"
  href="https://learn.microsoft.com/favicon.ico"
  type="image/x-icon"
/>

<!-- PWA应用图标 -->
<link rel="apple-touch-icon" href="https://learn.microsoft.com/favicon.ico" />

<!-- PWA应用启动画面 -->
<link
  rel="apple-touch-startup-image"
  href="https://learn.microsoft.com/favicon.ico"
  media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>

<!-- PWA应用名称 -->
<meta name="apple-mobile-web-app-title" content="Title" />

由于 ios 浏览器有弹簧滚动效果，应用内的 layout 必须使用 fixed 定位方式，否则会偶尔有内容穿透 layout 的闪动，尤其是 sticky 定位方式