我发现很多人的网站并没有对Safari进行一个适配，导致使用iOS的小伙伴在收藏这些网站或者将这些网站添加到桌面时会有一个比较奇怪的展示样式。

样式对比

左侧为不兼容safari的书签栏，右侧为兼容

书签栏

左侧为不兼容iOS添加到桌面，显示较长的名称和网页截图作为图标。

右侧为兼容iOS添加到桌面，显示自定义的名称和图标。

桌面

添加方法

添加方法非常简单，Safari提供了自定义的方案。下面这个链接是官方文档。

引用站外地址，不保证站点的可用性和安全性
Configuring Web Applications
Apple

只需要在head标签中插入相关代码即可。

如果你使用的是Hexo的Butterfly主题，可以直接在配置文件的inject的head中添加相关代码。

1
2
3
4
- <link rel="apple-touch-icon" href="/apple-touch-icon.png">
- <meta name="apple-mobile-web-app-title" content="张洪Heo">
- <link rel="bookmark" href="/apple-touch-icon.png">
- <link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon.png" >

其中你需要将上面代码中的/apple-touch-icon.png替换成你的图片地址，注意图片不要有自定义的圆角，而是一个完整的矩形图片或者透明背景图片（透明背景需要注意同时兼容深色背景和浅色背景）。

你还需要将上面张洪Heo更改为你想要设置的网站名称。

大功告成！

现在你的网站即使没有开启pwa，也可以体验到媲美pwa的在iOS下展示的样式了！