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方法不适合，可以使用其他方法：
.ratio-1-1 {
display: flex;
width: 100%;
height: 0;
padding-top: 100%; /*保持1:1宽高比*/
}
.ratio-1-1-inner {
width: 100%;
height: 100%;
}.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样式失效如何解决？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
238
收藏
