iOS 14.7.1下CSS aspect-ratio属性失效问题及兼容方案求助

aspect-ratio 属性在iOS端的最低支持版本为iOS 15.4，iOS 14.7.1内置的WebKit内核本身不支持该属性，而iOS端所有第三方浏览器（包括Chrome）都强制使用系统WebKit内核，因此会出现全浏览器都失效的情况。

以下两种方案可以覆盖绝大多数使用场景：

方案1：calc动态计算宽度（推荐，无额外DOM） #

如果你的元素高度为固定CSS单位（比如vh、px、rem等），可以直接按比例计算宽度值，同时加@supports判断优先使用原生aspect-ratio，修改你的示例代码如下：

div {
  height: 20vh;
  /* 1:1比例直接和高度取值一致，如需其他比例例如16:9，写为 calc(20vh * 16 / 9) 即可 */
  width: 20vh;
  background: blue;
  /* 高版本浏览器自动适配原生属性 */
  @supports (aspect-ratio: 1) {
    width: auto;
    aspect-ratio: 1;
  }
}

该方案代码量最少，无额外DOM开销，兼容性覆盖所有iOS版本。

方案2：占位元素方案（兼容动态高度场景） #

如果你的元素高度是动态由内容决定、无法提前确定取值，可以使用透明图片占位实现比例控制，代码如下：

<body>
  <div class="ratio-box">
    <!-- 1x1透明gif占位，如需其他比例替换对应比例的透明图片即可 -->
    <img class="ratio-placeholder" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">
    <!-- 此处放置元素实际内容 -->
  </div>
  <style>
    body {
      height: 100vh;
      width: 100vw;
      background: darkgray;
    }
    .ratio-box {
      height: 20vh;
      display: inline-block;
      position: relative;
      background: blue;
    }
    .ratio-placeholder {
      height: 100%;
      width: auto;
      visibility: hidden;
    }
    /* 实际内容需要铺满容器时添加该规则 */
    .ratio-box > :not(.ratio-placeholder) {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    /* 高版本浏览器优先用原生属性 */
    @supports (aspect-ratio: 1) {
      .ratio-placeholder {
        display: none;
      }
      .ratio-box {
        width: auto;
        aspect-ratio: 1;
      }
    }
  </style>
</body>

该方案兼容性最强，无论高度是否固定都可以正常生效。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov