iframe在IOS下，样式变大BUG

最新推荐文章于 2023-11-16 17:35:07 发布

原创最新推荐文章于 2023-11-16 17:35:07 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #IOS兼容 #iframe自适应 #JavaScript #前端兼容问题

移动端兼容问题专栏收录该内容

1 篇文章

订阅专栏

博客指出iframe在IOS下加载富文本时，富文本内样式会变大，并非默认的16px。针对此问题给出解决方案，若高度固定，需判断手机类型，Android设scrolling为auto；若高度自适应，scrolling设为no，再用js动态适应富文本高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到问题：

iframe在IOS下，加载富文本，富文本内样式会变大，并不是默认的16px

解决方案：

iframe {
  width: 1px;
  min-width: 100%;
  *width: 100%;
}

同时iframe标签设置为

<!-- IOS为： -->
<iframe scrolling="no"></iframe>

若高度是固定的，则需判断手机类型为Android还是IOS，若为Android则讲scrolling改为auto

<!-- Android为： -->
<iframe scrolling="auto"></iframe>

若iframe的高度为自适应，则scrolling为no，在通过js动态适应富文本高度

setIframeHeight(iframe) {
      let _this = this
      if (iframe) {
        let iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
          let imgs = iframeWin.document.getElementsByTagName("img");
          for (let i = 0; i < imgs.length; i++) {
            imgs[i].style.maxWidth = "100%";
          }
          let a, b, c = 0;
          let timer = setInterval(function() {
            if (c == 1) {
              a = iframeWin.document.body.scrollHeight || iframeWin.document.body.scrollHeight;
            } else if (c == 10) {
              b = iframeWin.document.body.scrollHeight || iframeWin.document.body.scrollHeight;
              if (a == b) {
                clearInterval(timer);
              }
              c = 0;
            }
            c++;
            iframe.style.height = iframeWin.document.body.scrollHeight + "px" || iframeWin.document.documentElement.scrollHeight + "px";
          }, 800);
        }
      }
    }