手机浏览器中aspect-ratio: 1 / 1样式失效如何解决？

aspect-ratio: 1 / 1样式在手机浏览器中失效的兼容解决方法

针对问题中提到的aspect-ratio: 1 / 1样式在部分手机浏览器中失效的问题，以下是一些解决方法：

使用padding回退方案

由于css原生的aspect-ratio支持性较差，建议采用使用padding实现的回退方案。以下是aspect ratio boxes：

.aspectratiobox {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /*保持1:1宽高比*/
}
.aspectratiobox-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

这个方法通过设置container元素的padding来实现固定宽高比，可以解决不同设备宽度的情况。

备用方案

如果padding方法不适合，可以使用其他方法：

• 使用flexbox实现：

.ratio-1-1 {
  display: flex;
  width: 100%;
  height: 0;
  padding-top: 100%; /*保持1:1宽高比*/
}
.ratio-1-1-inner {
  width: 100%;
  height: 100%;
}

• 使用transform和padding-top：

.ratio-1-1 {
  transform: scale(1);
  padding-top: 100%; /*保持1:1宽高比*/
}
.ratio-1-1-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

以上就是手机浏览器中aspect-ratio: 1 / 1样式失效如何解决？的详细内容，更多请关注其它相关文章！