响应式iframe视频笔记本端缩放正常，移动端显示异常求助

问题根源 #

你这个情况是iOS Safari对绝对定位+width:100%+aspect-ratio的组合渲染逻辑和桌面端不一致导致的。Absolute-Center类用了绝对定位且top/left/bottom/right全设为0，在iOS Safari里，这种情况下元素的宽度计算不会正确继承父容器的可用宽度，反而会被压缩到极小。另外，如果iframe的父元素没设置position:relative，绝对定位会相对于整个文档视口，进一步加剧宽度计算的混乱。

修复方案 #

推荐改用flex布局实现居中，同时保留响应式宽度，这样在移动端和桌面端都能稳定渲染：

修改后的CSS

/* 父容器用flex实现水平居中 */
.video-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.videodrome {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 640px; /* 替代媒体查询，逻辑更简洁 */
}

修改后的HTML

<div class="video-container">
  <iframe
    class="videodrome"
    src="//www.youtube.com/embed/fGOy0C-V_9I"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

为什么这样改？ #

• flex布局居中比绝对定位更稳定，在所有浏览器（包括iOS Safari）里表现一致，不需要依赖复杂的绝对定位属性。
• 用max-width:640px替代媒体查询，逻辑更直观：屏幕宽度超过640px时，视频最多宽640px；屏幕小于640px时，视频占满100%宽度，完全符合你的需求。
• 去掉了容易引发兼容性问题的绝对定位写法，从根源上解决iOS Safari的宽度压缩问题。

内容的提问来源于stack exchange，提问作者Glenn Thomas Davis