jquery - 用于响应式屏幕分辨率和平板电脑纵向模态的 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%;
}