如何将自定义网站在iphone手机上"添加至主屏幕的图标"

最新推荐文章于 2023-03-23 12:50:35 发布

小太阳sunshine

最新推荐文章于 2023-03-23 12:50:35 发布

阅读量1.2w

点赞数 3

分类专栏： js vue 文章标签：自定义网站添加至主屏幕

本文链接：https://blog.csdn.net/zfangls/article/details/79278553

版权

vue 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

9 篇文章 1 订阅

订阅专栏

在iphone手机上，网站可以添加到主屏幕，默认情况下，一个网站被添加到主屏幕时，默认显示的是网站截图，如何才能显示成我们自己想要设置的图标呢？我在实际工作中遇到了这个需求，将实现步骤总结如下：

1.制作4中不同尺寸的图片:

<!--适用于 Retina 屏的 iPad-->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="./static/apple-touch-icon-precomposed-144x144.png">
    <!--适用于 Retina 屏的 iPhone-->
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="./static/apple-touch-icon-precomposed-120x120.png">
    <!--适用于非 Retina 屏的 iPad-->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="./static/apple-touch-icon-precomposed-72x72.png">
    <!--适用于非 Retina 屏的 iPhone-->
    <link rel="apple-touch-icon-precomposed" href="./static/apple-touch-icon-precomposed-57x57.png">
2.vue项目中，需将4张图片放到static文件中
3.在index.html的<head></head>之间添加以上代码
4.部署上线
5.完成上述步骤后，在safari中打开网址