在你的网站中使用 Apple 触摸图标

admin 个人日志 暂无评论 69 浏览

apple-touch-icons要求至少有一个标准尺寸的 Apple 触摸图标。

为什么这很重要？

自从iOS 1.1.3iOS 版 Safari 以来，开发人员支持一种方式来指定将用于在主屏幕上表示网站或应用程序的图像。该图像称为触摸图标。

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

根据 Apple当前的指南，默认触摸图标大小如下：

设备或上下文 图标大小
iPhone 180px × 180px (60pt × 60pt @3x)
iPhone（X/加号） 120px × 120px (60pt × 60pt @2x)
iPad 专业版 167px × 167px (83.5pt × 83.5pt @2x)
iPad、迷你iPad 152px × 152px (76pt × 76pt @2x)

其他注意事项：

  • 不建议在页面中声明触摸图标并将其放在站点的根目录中，因为Apple 可能会更改默认请求的内容。
  • 在适用于 iOS 的旧版 Safari 中，该precomposed关键字可用于防止 iOS 向触摸图标添加不同的视觉效果（即圆角、阴影、反光）。从 iOS 7 开始，不再对触摸图标应用任何特殊效果，因此不再需要使用关键字precomposed 。
  • 使用一张图片时，不需要使用属性sizes。
  • 从iOS 11.1.0iOS 版开始，Safari 支持 Web 应用程序清单文件，它提供了一种标准的跨浏览器定义方式，其中包括浏览器可以在各种上下文（主屏幕、应用程序菜单等）中使用的图标。但是，Safari 会忽略 Web 应用程序清单中定义的图标，并且仍然使用非标准的apple-touch-icon.

提示检查什么？

apple-touch-icon该提示检查 ,中是否存在一个或多个声明<head>，并且：

  • 每个人都有rel="apple-touch-icon"
  • 每个声明的图像都是可访问的（例如，不会导致 a 404），
  • 每个声明的图像都是PNG上面指定的分辨率之一

触发提示的示例

没有apple-touch-icon指定：

<!doctype 
html > < html lang  = " 
    en " > <head> < 
        meta charset  = " 
        utf - 8 " > <title>示例</title>
        ...

    </head> <body> 
    ... </body> </html> _ _ _ _ _ _ _ _

中apple-touch-icon未指定<head>：

<!doctype 
html > < html lang  = " 
    en " > <head> < 
        meta charset  = " 
        utf - 8 " > <title>示例</title>
        ...

    </ head > 
    < body > 
        < link  rel = "apple-touch-icon"  href = "apple-touch-icon.png" >
        ...
    < 
/正文> </html> _

的apple-touch-icon属性rel不同于 apple-touch-icon：

< link  rel = "apple-touch-icon-precomposed"  sizes = "180x180"  href = "apple-touch-icon-precomposed.png" >

不可apple-touch-icon访问：

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

响应apple-touch-icon.png：

HTTP/... 404 未找到
...
 
HTTP/... 500 内部服务器错误
...

这apple-touch-icon不是一个PNG文件：

< link  rel = "apple-touch-icon"  href = "apple-touch-icon.png" >
 
$ 文件 apple-touch-icon.png

apple-touch-icon.png：JPEG 图像数据，...

一个或多个apple-touch-icon文件不是推荐的大小：

< link  rel = "apple-touch-icon"  href = "apple-touch-icon.png" >
 
$ 文件 apple-touch-icon.png

apple-touch-icon.png：PNG 图像数据，16 x 16，...

通过提示的例子

<!doctype 
html > < html lang  = " 
    en " > <head> < 
        meta charset  = " 
        utf - 8 " > <title>示例</title>
        ...
        < link  rel = "apple-touch-icon"  href = "/apple-touch-icon.png" >
        ...

    </head> <body> 
    ... </body> </html> _ _ _ _ _ _ _ _

如何使用这个提示？

这个包由 webhint 自动安装：

npm 安装提示 --save-dev

要使用它，请通过.hintrc配置文件激活它：

{ 
    “连接器” ： { ... } ，
    “格式化程序” ： [ ... ] ，
    “提示” ： { 
        “apple-touch-icons” ： “错误” ，
        ...
    } ，
    “解析器” ： [ ... ] ，
    ...
}

注意：推荐的运行 webhint 的方式是作为devDependency你的项目的一部分。

进一步阅读

相关博文

在你的网站中使用 Apple 触摸图标
赏
标签: