【问题标题】: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;
      }
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-01-26
      • 2020-09-22
      • 1970-01-01
      • 1970-01-01
      • 2019-02-01
      • 1970-01-01
      相关资源
      最近更新 更多