时间戳

首页 > 解决方案 > 用于响应式屏幕分辨率和平板电脑纵向模式的 iframe 全屏

jquery - 用于响应式屏幕分辨率和平板电脑纵向模式的 iframe 全屏

问题描述

我写了一些代码来管理响应式全屏 iframe。它几乎工作得很好:)。问题是当屏幕分辨率为 1680x1050（见图）时。因此，在这种情况下，我想将 iframe 移动到屏幕中心，并在顶部和底部使用相同的黑色背景。添加，使用相同的 css，当 iframe 在平板电脑上的纵向模式全屏时，我想这样做。

.FullScreen {
  &-target {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20000;
    width: 100vw;
    height: 100vh;
    background: #0a0a0a;
  }

  &-button {
    cursor: pointer;
    font-size: 40px;

    &--active {
/*....
....*/
      }
    }
  }
}
<div class="mne-contentBorder js-fullscreen-target FullScreen-target">
      <div class="myEMLObj">
      <div class="EMLObj-wrapper">
          <img class="EMLObj-placeholder" src="data:image/gif;">
          <iframe class="myObject-Iframe js-Iframe" src="" name="Iframe" frameborder="0"></iframe>
      </div>
  </div>
</div>

不关心ifame中的白色矩形，只关注屏幕分辨率导致的黑色背景

平板电脑

标签： jqueryhtmlcssresponsive-design

解决方案

尝试为 iframe 添加 css

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

推荐阅读