gpt4 book ai didi

html - 使 iframe 在移动设备上填满屏幕

转载 作者:太空宇宙 更新时间:2023-11-03 17:40:07 25 4
gpt4 key购买 nike

您好,从我附上的图片可以看出。我设法通过 iframe 创建了一个包含视频的网页。当检测到纵向时,它会在移动设备上旋转,因此视频始终以横向播放。我现在可以正常工作,但是我的问题是,当移动设备处于横向模式时,视频是全屏的并且效果很好,如下图所示。

MOBILE DEVICE HELD IN LANDSCAPE

当设备处于纵向模式时,(正常)视频会按应有的方式旋转到一边,但不会填满屏幕。显示这一点的图像可以在下面找到。

MOBILE DEVICE HELD IN PORTRAIT

我需要做的就是在设备竖放时让视频填满屏幕,就像在横放时一样。

我的代码如下:

CSS

<style>
* {
height: 100%; width: 100%; top: -20px; left: 0px;
}

@media (orientation: portrait) {
body {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
</style>

HTML

<body>
<div><iframe src="//fast.wistia.net/embed/iframe/qnca9gdlv5?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="100%" height="100%"></iframe></div><script src="//fast.wistia.net/assets/external/E-v1.js"></script>
</div>
</body>

ALSO HERE IS A LIVELINK TO THE OFFENDING PAGE SO YOU CAN VIEW THE SOURCE YOURSELF

最佳答案

我认为你的做法是错误的。与其尝试为 iframe 设置旋转,不如使用绝对定位来调整它的大小?

iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
<iframe src="http://www.example.com/">

这样做告诉浏览器只需让内容填满屏幕,您不必处理旋转或其他任何事情。

关于html - 使 iframe 在移动设备上填满屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29264873/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com