苹果手机将网站添加到主屏幕上的方法

概述通过在网页的head部分添加link标记，在Safari浏览器中我们可以轻易地将网站添加到iPhone的主屏幕，使它看起来就像一个普通的app一样。

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家，也给大家做个参考。

通常在 iPhone,iPad,itouch 的 safari 上可以使用添加到主屏按钮将网站添加到主屏幕上。

<link rel="apple-touch-icon" href="/custom_icon.png"/>

apple-touch-icon 是 IOS 设备的私有标签，如果设置了相应 apple-touch-icon 标签，则添加到主屏上的图标会使用指定的图片。apple-touch-icon 标签支持 sizes 属性，可以用来放置对应不同的设备。分别放置 57×57（默认值）的图标对应 320×640 的老设备，72×72 对应 ipad，114×114 对应 retina 屏的 iPhone 及 itouch。由于手头没有 iPad3，所以没测试是否支持 144×144 的图标在 iPad3 上的显示。

虽然官方都用的 png 图片做说明，但实际测试 jpg 格式也可用（不推荐），图片无需做圆角处理，同 Native App 一样，系统会自动为图标添加圆角及高光。如果不想系统对图标添加效果，可以用 apple-touch-icon-precomposed 代替 apple-touch-icon。

优先级如下：

如果没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。如些有多个图标符合推荐尺寸，会优先选择包含关键字 precomposed 的图标。如果未在区域指定用 link 标签指定图标，会自动搜索网站根目录下有 apple-touch-icon…或者 apple-touch-icon-precomposed…前缀的图标。

各尺寸自适应：

默认：57×57，iPad：72×72，iPhone 4,Retina 屏：114×114（原尺寸的 2 倍）

<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png" />

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3-144.png" />

只要做好相应尺寸的代码，加到页面里面就可以每个主屏幕上都会完美显示啦！大家可以看看我的网站添加的效果：

上面有我的 4 个网站，可以很直观的在手机上看到效果。

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的苹果手机将网站添加到主屏幕上的方法全部内容，希望文章能够帮你解决苹果手机将网站添加到主屏幕上的方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。