aspect-ratio在移动端图片/视频上容易失效，因其不能直接作用于替换元素（如被完全忽略，需配合width:100%及明确宽度容器才能生效），且旧版Safari、微信X5内核不支持导致高度坍缩，Flex中align-items:stretch会覆盖比例，HTML width/height属性仅影响首帧渲染。
aspect-ratio 为什么在移动端图片/视频上容易失效
直接给 <img> 或 <video></video> 写 aspect-ratio 基本没用——<video></video> 是替换元素，浏览器会忽略其上的 aspect-ratio；<img> 虽支持，但若没配 width 或父容器宽度不明确，它就缩成一条线。
-
aspect-ratio必须配合width: 100%（或具体值），否则无法推算高度 - 旧版 Safari（iOS 15.3 及更早）、微信安卓 X5 内核完全不识别该属性，容器高度为 0，加载后突然撑开，造成明显下移抖动
- Flex 容器中
align-items: stretch会强制拉高<img>，覆盖aspect-ratio效果 - HTML 的
width/height属性（如<img style="max-width:90%" style="max-width:90%">）已被现代浏览器忽略，只影响首帧渲染，不能作为布局依据
怎么写才真正稳定：容器 + aspect-ratio + 降级兜底
推荐结构是外层容器控制比例，媒体元素填满它。这样既规避替换元素限制，又便于 fallback。
- 容器设
aspect-ratio: 16 / 9+width: 100%（或max-width），不设height -
<img>或<video></video>设width: 100%+height: 100%+object-fit: cover（图片）或object-fit: fill（视频） - 必须删掉
<video></video>标签上写的width/height属性，否则会干扰 CSS 控制 - 兼容旧浏览器：用
@supports (aspect-ratio: 1/1)包裹现代写法，外面套一层padding-top占位方案（如padding-top: 56.25%for 16:9）
横竖屏切换时 aspect-ratio 配合什么媒体查询才靠谱
单靠 @media (orientation: landscape) 不行——它只看宽高比逻辑判定，不感知地址栏收起、折叠屏半展开等真实状态，iOS Safari 和 Android Chrome 都可能漏触发或延迟几十毫秒。
- 优先组合判断：
@media (orientation: landscape) and (min-aspect-ratio: 13 / 9)（13:9 ≈ 1.44，覆盖主流横屏设备） - 更稳妥的是尺寸断点：
@media (max-height: 480px) and (min-width: 640px)，直接响应“高度骤减”这一横屏核心特征 - viewport 必须含
width=device-width，否则orientation查询压根不生效；漏写或被 JS 动态覆盖，整个机制就瘫痪 - 避免混用
min-width和orientation：同一设备旋转时视口宽度不变，min-width不会重算，但orientation会——这会导致样式错乱
容易被忽略的单位和渲染细节
写了 aspect-ratio 还翻车，往往卡在单位和初始渲染上。
- 别用
100vw布局：iOS Safari 横屏时100vw包含已隐藏地址栏高度，导致内容溢出；改用100%或100dvw（Android Chrome 100+ 支持） -
100vh在 iPhone 横屏下只剩约 390px，常截断内容；可用min-height: 100%+html, body { height: 100% }降级 - 字体用
clamp(14px, 2.5vw, 16px)替代纯4vw，防止横屏时字号暴增 - 真机测试不可替代：模拟器和 Safari 开发者工具的“旋转”按钮不模拟地址栏高度变化，实际表现常有偏差
实际项目里，最常出问题的不是不会写 aspect-ratio，而是没意识到它只是盒模型控制的一环——viewport 设置、媒体查询条件、单位选择、降级路径，缺一不可。尤其在微信内嵌页或老 iOS 设备上，漏掉 padding-top 兜底或 viewport 写错，用户看到的就是一片空白或剧烈抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
