如何在部分手机浏览器中解决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″样式无效？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2852495.html
