Android 上的 HTML5 视频纵横比不正确

Question

我在我的视频元素上使用了以下 CSS 代码：

height: 466px;
width: 824px;

在我的 Mac 上（在 Chrome、Firefox 和 Safari 中），它运行良好。但在我的 Android 平板电脑（Chrome、Firefox、Dolphin）上，纵横比似乎被锁定在 4:3（虽然视频是 16:9），因此视频被水平挤压，两边都有黑条。

知道为什么吗？

Answer 1

我认为像素纵横比不同... 试试这个列表

http://www.bigbossmas.com/web-development/list-of-mobile-device-sizes/

及解释

http://msdn.microsoft.com/en-us/library/cc294571.aspx

PS 像素纵横比与图片纵横比不同

Answer 2

我知道这个话题很老了，但在任何地方都没有找到解决方案。因此，这仅适用于所有寻求解决方案的人。

我解决了在<video> 标签中插入style="object-fit: fill" 的问题。