iframe全屏可提供响应式屏幕分辨率和平板电脑肖像模式

Question

我写了一些代码来管理全屏响应式iframe。它运作良好：)。问题是当屏幕分辨率为1680x1050时（请参见picture）。因此，在这种情况下，我想将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>

Don't care about white rectangle in the ifame, just focus in the black background caused by screen resolution

For tablet

Answer 1

尝试为iframe添加CSS

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