在移动设备上制作 iframe 填充屏幕答案

【问题标题】：Making an iframe fill the screen on mobile device在移动设备上制作 iframe 填充屏幕
【发布时间】：2015-03-25 19:32:45
【问题描述】：

您好，您可以从我附上的图片中看到。我设法通过 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

【问题讨论】：

我想我已经开始理解问题所在了，但是您的链接已关闭。你能找到更好的主机或put your code into a JSFiddle吗？

标签： html css mobile screen-orientation

【解决方案1】：

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

iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

&lt;iframe src="http://www.example.com/"&gt;

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

【讨论】：

唯一的原因是最终会在 iframe 之外有更多内容，这将在下面，我不希望 iframe 遮挡其他内容。因此，如果我旋转整个页面，此内容将不会被隐藏。