使用 iframe-resizer 允许 iframe 在 x-axe 中滚动以适应较小的屏幕

Question

我正在使用 iframe-resizer 将 iframe 的高度调整为其内容的高度。到目前为止工作很好，我只有一个问题与 witdh。加载时，它需要屏幕宽度来设置 iframe，这对于桌面大小的屏幕来说没问题，但对于移动设备，我想允许在 x 轴上滚动。有什么建议吗？

这是我的 iframeresize 初始化：

if (document.getElementById('iframe')){
        $('iframe').iFrameResize({
            autoResize: true,
            scrolling: false,
            maxWidth: screen.width,
            sizeWidth: true,
            //widthCalculationMethod: 'taggedElement',
            checkOrigin: [reports_server],
            //log: true
        });
    }

这是我的 css:

.iframe-content{
/*  min-width: 800px;
  min-height: 640px;*/
  width: -moz-available;
  width: 100% !important;
  /*height: 100%;*/
  overflow-y: hidden;
}

@media (max-width : 768px) {
  .iframe-content{
      overflow-x: scroll !important;
  }
}

和 iframe 的 html 部分：

<iframe title="myiframe" id="iframe" class="iframe-content" src="mysource" scrolling="no"></iframe>

Answer 1

您可以在 iframe-resizer 中设置最小宽度。

https://github.com/davidjbradshaw/iframe-resizer#minheight--minwidth

使用 iframe-resizer 允许 iframe 在 x-axe 中滚动以适应较小的屏幕

Allow iframe scroll in x-axe for smaller screens with iframe-resizer

javascript

css

iframe

iframe-resizer