iOS 将网页保存到桌面 • 多吃点的小饭桌

在 iOS Safari 中，用户可以将网页「添加到主屏幕」，从而像使用原生 App 一样打开它。只需在页面中插入几个 <meta> 标签和图标链接，即可控制显示名称、状态栏样式以及启动图标。

实现方式

以哪吒面板为例，在自定义代码区插入以下代码：

const addMeta = (name, content) => {
  const meta = document.createElement("meta");
  meta.name = name;
  meta.content = content;
  document.head.appendChild(meta);
};

const addIcon = (href) => {
  const link = document.createElement("link");
  link.rel = "apple-touch-icon";
  link.href = href;
  document.head.appendChild(link);
};

// 添加到主屏幕后显示的应用名称
addMeta("apple-mobile-web-app-title", "服务监控");
// 以全屏模式启动，隐藏 Safari 的地址栏
addMeta("apple-mobile-web-app-capable", "yes");
// 状态栏颜色：black / black-translucent / default
addMeta("apple-mobile-web-app-status-bar-style", "black");
// 主屏幕图标，需使用 PNG 格式（SVG 不受支持）
addIcon("/image/logo.png");

各参数说明

标签	作用
`apple-mobile-web-app-title`	图标下方显示的应用名称
`apple-mobile-web-app-capable`	设为 `yes` 后，从主屏幕启动时以全屏模式运行
`apple-mobile-web-app-status-bar-style`	控制状态栏样式，`black` 为黑色背景
`apple-touch-icon`	主屏幕图标，建议尺寸 180×180px 的 PNG