前言

发现很多人的网站并没有对Safari进行一个适配，导致使用iOS的小伙伴在收藏这些网站或者将这些网站添加到桌面时样式比较奇怪，于是我参考了张洪老师的教程对自己的网站进行适配Safari。

效果预览

适配方法

Safari提供了自定义的方案。下面这个链接是官方文档。

引用站外地址
Configuring Web Applications
Apple

然后在自己博客目录下的_config.butterfly.yml或_config.yml的inject的head标签中添加以下代码即可。
1
2
3
4
- <link rel="apple-touch-icon" href="https://img1.imgtp.com/2022/10/14/rGxKfXmY.jpg">
- <meta name="apple-mobile-web-app-title" content="SamのBlog">
- <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替换成自己的图片地址，注意图片不要有自定义的圆角，而是一个完整的矩形图片或者透明背景图片（透明背景需要注意同时兼容深色背景和浅色背景）。

还需要将上面SamのBlog更改为自己想要设置的网站名称。