在部分手机浏览器中，为何\"aspect-ratio: 1 / 1\"样式无效？

如何在部分手机浏览器中解决aspect-ratio: 1 / 1样式无效问题？

“aspect-ratio: 1 / 1”样式在某些移动设备（如 iphone x 和部分安卓机）中无效的问题困扰着许多开发者。

为了解决此兼容问题，您可以采用以下回退方案：

• 使用 padding 来实现回退：

.container {
  width: 100%;
  padding-top: 100%; // 设置容器的 padding-top 为高度的 1%
}

这个回退方案利用 padding 来强制元素形成 1:1 的宽高比。

• 使用 aspect ratio boxes 库：

aspect ratio boxes 是一个 javascript 库，可模拟 aspect-ratio 样式在不支持的浏览器中的行为。

• 注意：

原生 css 中的 “aspect-ratio” 目前支持性较差，不建议直接使用。

以上就是在部分手机浏览器中，为何\"aspect-ratio: 1 / 1\"样式无效？的详细内容，更多请关注其它相关文章！