MDN与苹果文档中apple-touch-icon无sizes属性？排序有何原因？

1. 为什么需要不带sizes属性的apple-touch-icon？ #

不带sizes的图标是降级兼容方案：

• 针对iOS 6及更早的旧系统：这些版本的Safari不支持sizes属性，只会识别第一个不带sizes的apple-touch-icon作为所有设备的默认图标。
• 作为兜底选项：即使在支持sizes的新系统中，如果没有找到完全匹配设备需求尺寸的图标，浏览器会自动 fallback到这个不带sizes的默认图标，避免出现无可用图标的情况。

2. 为什么sizes="180x180"的元素放在代码中间？ #

其实代码顺序对浏览器的图标匹配逻辑没有任何影响。浏览器会根据当前设备的屏幕尺寸，主动匹配带有对应sizes属性的图标，完全不依赖代码书写顺序。

文档里这样排列，只是为了按「普通iPad → iPhone Retina → iPad Retina」的设备类型来展示，属于一种可读性优先的排版方式，没有隐藏的技术要点，你完全不用纠结顺序的问题。

内容的提问来源于stack exchange，提问作者Rodrigo Nascimento