仅在移动设备上制作 iframe 全屏的最佳方法是什么？答案

【问题标题】：What is the best way to make an iframe full screen on mobile only?仅在移动设备上制作 iframe 全屏的最佳方法是什么？
【发布时间】：2020-09-03 00:19:22
【问题描述】：

我有一个 iframe，我只想在移动设备上全屏显示。我看到了在所有屏幕上显示全屏的解决方案，但这不是我想要的。

这是我现在的代码：

<p align="center"><iframe src="LINK" title="iframe" width="900" height="650" frameBorder="0"></p>
</iframe>

我应该在桌面上使用百分比来表示宽度和高度，对吧？但我不知道如何在移动设备上设置宽度和高度为 100%。

【问题讨论】：

如何编写只能在移动设备而不是桌面设备上使 iframe 全屏显示的媒体查询？

标签： html css iframe

【解决方案1】：

只需使用媒体查询：

<iframe class="iframe" src="https://www.google.com/" frameborder="0"></iframe>

.iframe {
  width: 100vw;
  height: 100vh;
}

@media (min-width: 600px) {
  .iframe {
    width: 600px;
    height: 600px;
  }
}

https://codepen.io/seanstopnik/pen/51c4cf447763a01468f7f517518b619f

【讨论】：

【解决方案2】：

要覆盖整个视口，您可以使用：

<p align="center">
<iframe src="LINK" title="iframe" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;" frameBorder="0">
</iframe>
</p>

这将填充整个页面或您要填充的部分。

对于在移动设备上应用，从 iframe 标记中删除内联样式代码，并在您的 css 文件上使用此媒体查询：

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  iframe {
    position:fixed;
    top:0px;
    left:0px; 
    bottom:0px;
    right:0px;
    width:100%; 
    height:100%;
    border:none;
    margin:0;
    padding:0;
    overflow:hidden;
    z-index:999999;
  }
}

【讨论】：