@media查询min-aspect-ratio/max-aspect-ratio的兼容性及支持情况问询

嘿，我来帮你梳理下这个问题的答案，毕竟做响应式布局的时候经常会碰到媒体查询兼容性的疑惑～

近期主流浏览器的支持情况 #

先给你吃个定心丸：近期版本的Chrome、iOS Safari、Android浏览器都是完全支持min-aspect-ratio和max-aspect-ratio的，具体细节如下：

• Chrome（桌面/移动端）：这个特性很早就被Chrome支持了，别说最新稳定版，哪怕是近2-3年发布的版本都能正常使用，日常开发里用它调整不同宽高比的布局完全没毛病。
• iOS Safari：从iOS 10开始就稳定支持了，现在市面上活跃的iOS设备基本都是iOS 15及以上，完全不用担心兼容性；甚至更早的iOS 8、9其实也有支持，只是边缘场景可能有小细节，但主流使用没问题。
• Android 浏览器/Chrome for Android：Android 5.0（API 21）之后的系统自带浏览器和Chrome for Android都全面支持，现在市面上能见到的Android设备基本都是Android 8以上，放心用就行。

至于你提到的MDN兼容性表格有大量问号、caniuse没专门页面的问题：其实这个特性属于Media Queries Level 3的一部分，caniuse里是归类在这个大条目下的，你查这个就能看到详细数据；MDN的问号大多是针对非常老旧的浏览器（比如IE早期版本）的兼容性数据未补全，但现代浏览器的支持是确定的。

Polyfill 方案 #

如果你的项目需要兼容极其老旧的浏览器（比如IE8及以前，或者古董级移动浏览器），可以试试这些替代方案：

• JS检测+动态添加类名：通过JavaScript实时计算窗口的宽高比，给页面根元素（比如body）添加对应的类名，再在CSS里针对这些类写样式。示例代码：

function updateAspectRatioClass() {
  const ratio = window.innerWidth / window.innerHeight;
  const body = document.body;
  // 先移除旧类名
  body.classList.remove('aspect-wide', 'aspect-tall', 'aspect-square');
  
  // 根据宽高比添加对应类名
  if (ratio > 1.6) {
    body.classList.add('aspect-wide');
  } else if (ratio < 0.6) {
    body.classList.add('aspect-tall');
  } else {
    body.classList.add('aspect-square');
  }
}

// 页面加载和窗口 resize 时更新
window.addEventListener('load', updateAspectRatioClass);
window.addEventListener('resize', updateAspectRatioClass);

对应的CSS：

.aspect-wide .hero-banner {
  /* 宽屏时的样式 */
  height: 30vh;
}
.aspect-tall .hero-banner {
  /* 竖屏时的样式 */
  height: 60vh;
}

这个方案简单直接，兼容性拉满，要是怕性能问题，还可以给resize事件加个防抖处理。

• PostCSS 辅助插件：比如postcss-media-minmax，它能帮你把min-aspect-ratio: 16/9这类语法转换成更兼容的写法，但本质上还是依赖浏览器对媒体查询的支持，所以如果是完全不支持媒体查询的老旧浏览器，还是得结合上面的JS方案。

不过说实话，现在如果你的项目只需要支持近3年的现代浏览器，完全没必要用polyfill，直接原生写@media (min-aspect-ratio: 16/9)就好。

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