很多开发者发现苹果设备网页上的图标，不知道怎么做到的，一般网页都是调用了我们网站的ico图标，但苹果却不是，却又不知道怎么做的，今天我们就来详细讲解一下关于ios设备网页开发的一些小知识；我们就可以把网站设计的图标显示到iphone主屏幕上。
1.要做到网页在苹果Safari浏览器桌面图标效果我们需要在设计网页时为网页“<head>之间”添加单独的apple-touch-icon属性，图片格式推荐png，代码如下：
苹果设备网页标题
<meta name="apple-mobile-web-app-title" content="网站名称">苹果设备网页图标：
<link rel="apple-touch-icon" href="图片地址" />2.因为苹果设备比较多像什么iPhone4s、iPhone6、iPhone x，其分辨率不一样，所以就有了“sizes”属性，就是为了自适应不同分辨率的网页设备，系统会自动选择最好的展示效果，代码如下：
<link rel="apple-touch-icon" sizes="72x72" href="图片地址" />最为常用的一般为：57x57, 72x72, 114x114, 144x144，当然你选择其他像素也是可以的，参考如下：
<link rel =“ apple-touch-icon” href =“ touch-icon-iphone.png”>
<link rel =“ apple-touch-icon” size =“ 152x152” href =“ touch-icon-ipad.png”>
<link rel =“ apple-touch-icon” size =“ 180x180” href =“ touch-icon-iphone-retina.png”>
<link rel =“ apple-touch-icon” size =“ 167x167” href =“ touch-icon-ipad-retina.png”>其设备自动优先选择如下：
如果没有与设备的建议尺寸匹配的图标，则使用大于建议尺寸的最小图标。如果没有大于建议大小的图标，则使用最大的图标。
如果未使用链接元素指定任何图标，则在网站根目录中搜索带有apple-touch-icon...前缀的图标。例如，如果设备的适当图标大小为58 x 58，则系统将按以下顺序搜索文件名：
apple-touch-icon-80x80.png
apple-touch-icon.png4.其他属性及注释说明如下(仅做参考)：
<!--苹果书签标签-->
<link rel="bookmark" href="图片地址" />
<!--苹果桌面标题-->
<meta name="apple-mobile-web-app-title" content="360模板吧">
<!--苹果桌面图标-->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="图片地址" />更多使用方法，请查看开发者参考文档：《Safari Web内容指南》，不过一般时候我都都只使用第一步中的代码,以上代码及说明仅供大家参考学习，更多详细资料可查询苹果官方说明文件，360模板吧欢迎您的访问！
1.使用本站下载的源码仅限于个人学习和非商业用途。
2.禁止将本站下载的源码用于搭建或支持任何违法、淫秽、暴力或侵犯他人合法权益的网站或应用。
3.使用本站下载的源码需遵守国家法律法规及相关规定，不得从事任何违法活动。
4.如若本站内容侵犯了原著者的合法权益，请联系我们进行处理。
评论(0)