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

作者 : admin 本文共1343个字,预计阅读时间需要4分钟 发布时间: 2020-07-17 共139人阅读

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

1.要做到网页在苹果Safari浏览器桌面图标效果我们需要在设计网页时为网页“<head>之间”添加单独的apple-touch-icon属性,图片格式推荐png,代码如下:

将网页添加到主屏幕显示图标:

<link rel="apple-touch-icon" href="图片地址" />

或者:

<link rel="apple-touch-icon-precomposed" href="图片地址" />

 

2.其中“apple-touch-icon”可以可两种表达方式:apple-touch-icon和apple-touch-icon-precomposed,具体含义如下:

  • 使用apple-touch-icon-precomposed属性为:“设计原图图标”
  • 使用apple-touch-icon属性为:“增加高光光亮的图标”

3.因为苹果设备比较多像什么iPhone4s、iPhone6、iPhone x,其分辨率不一样,所以就有了“sizes”属性,就是为了自适应不同分辨率的网页设备,系统会自动选择最好的展示效果,代码如下(apple-touch-icon属性还是可以改为apple-touch-icon-precomposed的):

<link rel="apple-touch-icon" sizes="72x72" href="图片地址" />

最为常用的一般为:57x57, 72x72, 114x114, 144x144,当然你选择其他像素也是可以的,参考如下:

<link rel="apple-touch-icon" sizes="57x57" href="图片地址" />
<link rel="apple-touch-icon" sizes="72x72" href="图片地址" />
<link rel="apple-touch-icon" sizes="114x114" href="图片地址" />  
<link rel="apple-touch-icon" sizes="144x144" href="图片地址" />

其设备自动优先选择如下:

如果没有跟相应设备推荐尺寸一致的图标,那个会优先使用比推荐尺寸大的,但最接近推荐尺寸的图标;如果没有比推荐尺寸大的图标,会优先选择最接近推荐尺寸的图标;如些有多个图标符合推荐尺寸,会优先选择包含关键字precomposed的图标。

4.其他属性及注释说明如下:

<!--苹果书签标签-->
<link rel="bookmark" href="图片地址" />
<!--苹果桌面标题-->
<meta name="apple-mobile-web-app-title" content="360模板吧">
<!--苹果桌面图标-->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="图片地址" />

说明:以上代码及说明仅供大家参考学习,更多详细资料可查询苹果官方说明文件,360模板吧欢迎您的访问!

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长
2. 如遇需要解压密码,则解压密码为"www.360mb.net"!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 本站不保证所提供下载的资源的准确性、安全性和完整性,源码仅供下载学习之用!
8. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!
360模板吧 » 关于苹果Safari网页图标开发相关代码使用

发表评论