为什么我的 html 视频显示与 iPhone 不同？

Question

我正在创建一个 html 视频...我在 android 手机中的网页可以与我最喜欢的设计一起正常工作。但在高度较高的 iphone 节目中。我认为它在顶部和底部有 100px 不需要的填充。 请帮助我。非常感谢，原谅我的英语不好。

enter image description here

HTML 代码：

<div class="row row-video">
<div class="col-xs-12 col-md-6 col-sm-12 col-lg-6 col-video">
<video id="myvideo" poster="./images/image.png" autoplay controls controlsList="nodownload">
<source src="video.mp4">
</video></div>

CSS 代码：

/* video body */
.container-video { background-color:#000000;
padding:0px 0px 0px 0px; margin:0px;
border-bottom:0px solid green;direction:rtl;}

.row-video {padding:0px;
margin:0px 0px 50px 0px;}

.col-video { padding:0px 0px 0px 0px;
text-align:center;}

.col-video video {
display:block;margin:0 auto;padding:0px;
width:100%;
border:0px solid #cf984a;border-radius:0px;
box-shadow: 0px 2px 2px #525252, 0px -2px 2px #525252;}

Answer 1

可能是显示分辨率问题或默认浏览器样式问题 尝试包含此元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

并将其放入您的 css 中：

*{
    margin: 0;
    padding: 0;
}