很多开发者发现苹果设备网页上的图标,不知道怎么做到的,一般网页都是调用了我们网站的ico图标,但苹果却不是,却又不知道怎么做的,今天我们就来详细讲解一下关于ios设备网页开发的一些小知识;我们就可以把网站设计的图标显示到iphone主屏幕上。

关于苹果Safari网页图标开发相关代码使用说明插图

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.png

4.其他属性及注释说明如下(仅做参考):

<!--苹果书签标签-->
<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模板吧欢迎您的访问!

发表评论

后才能评论