Mobile Safari 中视频元素的垂直居中 iPad 在 "full screen"

Question

我最近遇到了一些麻烦，我网站上的视频元素无法仅在 "full screen mode" 的 iPad (iOS 8.3) 移动 Safari 上垂直居中（意思是一个 div 横跨整个 window).

在多次尝试和错误中，我遇到了一个奇怪的行为。当绝对定位的视频被拉伸到全高和全宽并且设置了 margin auto 时，视频元素垂直居中：

编辑：请注意，您需要减小 fiddle 中结果部分的宽度才能查看效果。

HTML

<div class="hello">
  <video src="foo"></video>
</div>

CSS

.hello {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: auto;
}

这适用于移动版 Safari，似乎对 Chrome Android 或 Firefox 没有任何不利影响。它在桌面浏览器上的行为也符合预期。当我完全拉伸视频时，此边距如何使视频垂直居中？

Answer 1

您的 fiddle 在没有实际视频源的情况下无法工作。我无法重现您描述的由边距触发的行为。但我确实发现你对我自己的视频垂直居中搜索有疑问 iOS。也许我的结论对你有帮助：

当前 iOS 浏览器将在视频底部留空 space（假设视频元素高于渲染视频所需的高度）。只要底部的空 space 小于本机控件采用的大小，它就会出现。这背后的明显想法是，如果可能的话，不要在视频前面渲染控件，而是在视频下方渲染控件。

问题来了：如果您停用控件/未使用 "controls" 属性激活它们，甚至会发生这种情况。我能想到的唯一解决方法是获取视频的固有宽度和高度并手动计算当前的实际视频高度。然后您可以继续设置视频节点的高度，并根据您的情况设置顶部边距以使其在容器内垂直居中。

希望这对您有所帮助。

Mobile Safari 中视频元素的垂直居中 iPad 在 "full screen"

Vertical centering of video elements in Mobile Safari iPad at "full screen"

html

css

ipad

html5-video

mobile-safari