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

从现在开始，努力学习吧！本文《在部分手机浏览器中，为何\"aspect-ratio: 1 / 1\"样式无效？》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

如何在部分手机浏览器中解决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\"样式无效？》文章吧，也可关注golang学习网公众号了解相关技术文章。