在你的网站中使用 Apple 触摸图标
💡
原文中文，约2600字，阅读约需7分钟。
📝
内容提要
本文介绍了在 iOS Safari 中使用 apple-touch-icons 的重要性和指南，包括不同设备或上下文的默认触摸图标大小和注意事项。同时提供了触发提示的示例和使用提示的方法。
🎯
关键要点
- apple-touch-icons 至少需要一个标准尺寸的 Apple 触摸图标。
- 触摸图标用于在主屏幕上表示网站或应用程序，自 iOS 1.1.3 开始支持。
- 不同设备的默认触摸图标大小包括：iPhone 180px × 180px，iPhone（X/加号）120px × 120px，iPad 专业版 167px × 167px，iPad、迷你iPad 152px × 152px。
- 不建议在页面中声明触摸图标并将其放在站点的根目录中。
- 从 iOS 7 开始，不再需要使用 precomposed 关键字来防止视觉效果。
- Safari 从 iOS 11.1.0 开始支持 Web 应用程序清单文件，但仍使用非标准的 apple-touch-icon。
- 检查 apple-touch-icon 的提示包括：是否存在声明、每个声明的 rel 属性是否正确、图像是否可访问、图像是否为指定分辨率的 PNG。
- 示例中展示了未指定 apple-touch-icon、属性不正确、不可访问和文件格式错误等情况。
- 使用提示的方式是通过 npm 安装并在 .hintrc 配置文件中激活。
- 推荐将 webhint 作为项目的 devDependency 运行。
🏷️
标签
➡️
