safari中`@media (max-width)`不生效，通常并非浏览器完全不支持，而是由视口设置缺失、css优先级冲突或构建工具干扰所致；本文通过精简案例定位根本原因，并提供可立即验证的修复方案。
你提供的最小复现代码看似简洁，却隐藏了一个关键缺陷：缺少必需的视口（viewport）元标签的完整声明。虽然你已写入 ，但这仅是基础配置；在 Safari（尤其是 iOS/iPadOS 上的旧版及部分 macOS 版本）中，若未显式声明 user-scalable=no 或 maximum-scale=1，某些系统级缩放行为可能导致媒体查询断点计算异常——更关键的是，*Safari 对 `` 通配符选择器在媒体查询中的渲染行为存在兼容性差异**，尤其当与其他样式层（如用户代理样式、重置CSS）叠加时，可能造成背景色被意外覆盖。
✅ 正确做法如下：
- 确保 viewport 元标签完整且位置正确（必须位于 中，且早于所有 CSS）
- *避免在媒体查询中滥用 `` 通配符** —— 它不仅性能差，还在 Safari 中易触发渲染异常；应明确指定目标元素
- 添加 !important 并非推荐解法，而是临时诊断手段；真正可靠的方式是提升选择器特异性（specificity）
修正后的最小可行代码示例：
Alexander Rubino Test Responsive Background
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- Parcel 构建干扰风险：你使用了 parcel build index.html，而 Parcel v2 默认启用 cssnano（见 devDependencies）。cssnano 可能错误地移除或压缩媒体查询规则（尤其含 * 时）。建议在 .cssnanorc 中禁用 discardUnused 或升级至 cssnano@5+ 并配置 preset: ['default', { discardUnused: false }]。
- Safari 缓存顽疾：Safari 对 CSS 文件缓存极为激进。调试时务必使用「开发 → 清空缓存」+ 「强制刷新（Cmd+Shift+R）」，或在开发者工具中勾选「Disable Cache」。
- 设备像素比（dpr）影响：Safari 在 Retina 屏上按物理像素计算 max-width，若设计稿基于逻辑像素（如 1200px 宽度），需确认断点是否应写作 (max-width: 1200px) 还是 (max-width: 600px)（配合 initial-scale=0.5）——但本例中无需此操作，因 initial-scale=1 已明确。
? 总结：问题根源不在 Safari 不支持 max-width，而在于通配符选择器的不可靠性 + 视口声明的潜在宽松性 + 构建工具副作用。*最健壮的实践是：用语义化选择器（如 body, .container）替代 ``；确保 viewport 元标签无冗余属性；构建前检查 CSS 压缩配置；调试时关闭 Safari 缓存。** 经上述调整，你的响应式背景将在所有 Safari 版本（iOS 12+ / macOS 10.14+）中稳定生效。
