iphone下iframe问题记录

需求

iframe在手机上展示正好一屏的内容,横向100%,纵向高度固定(例如500px)超出可滚动。

问题

这些问题在Mac上、window上、Android上都是没有的。

  1. 宽高不受限制
    给iframe节点style上设置宽高,加上!important也不会生效。iframe会默认全部平铺展示。
  2. 宽(高)溢出
    最奇葩的在于,iframe页面在iOS手机上打开大概率会出现右侧被截断的现象。如下图所示:
      iphone下iframe问题记录 iOS上iframe宽度被截断
  3. iframe滚动
    宽高都不受限制了,当然无法滚动了。
  4. iframe内页面fixed布局失效
    iframe被平铺,fixed布局不准也是理所当然了。

解决方案:

1. 宽(高)溢出 && 滚动问题

这两个问题需要一起说
关于实现滚动
百度一下可以看到很多了

<style>
.scroll-wrapper {  
  -webkit-overflow-scrolling: touch;  
  overflow-y: scroll;  
  /* 提示: 请在此处加上需要设置的大小或位置信息! */  
}  
.scroll-wrapper iframe {  
  /* 你自己指定的样式 */  
}  
</style>
<div class="scroll-wrapper">  
    <iframe src="" frameborder="0" ></iframe>  
</div> 

关于宽度溢出
本质是iOS手机内,iframe内页面display:none隐藏掉的元素宽度会依然计算在内(文章最后再给个demo吧)。
解决方案:
(1) 对于子页面不可控的情况下 最简单的解决办法
给iframe加上属性scrolling="no"
页面会自动变得规规矩矩,虽然有scrolling="no" 属性,在电脑上模拟会无法滑动,但是在iOS手机上会全部铺满,Y轴上可以依赖上面提到的父节点的属性进行滚动。
(2) 子页面可控 操作子页面
方法一:html加属性width:100vw; , 注意给html和body加属性width:100%无效....
方法二:html加属性width: 1px;min-width: 100%;

2. fixed布局问题

子页面不可控的情况下,无解。
可控的情况下,以下面这种布局来写子页面,子页面body下的全部内容全部包裹在#wrap这个dom中。用dom的滚动代替body的滚动。iOS手机下会认为子页面无尺寸。

#wrap {
    position: fixed;
    top: 0;
    right:0;
    bottom:0;
    left: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

 

End. 宽度溢出DEMO

子页面:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .wrapper{
      overflow: hidden;
      padding: 0 10px;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div style="background-color:blanchedalmond ;height:100px;width:100%">dom1</div>
    <div style="background-color:darkgray; width: 800px; word-break:break-all;">
      dom2
    </div>
    <div style="background-color:darkgoldenrod;height:800px;">
      <p>dom3</p>
      <p>dom3</p>
      <p>dom3</p>
      <p>dom3</p>
      <p>dom3</p>
      <p>dom3</p>
      <p>dom3</p>
      <p>dom3</p>
    </div>
  </div>
</body>

</html>

父页面:

<div style="-webkit-overflow-scrolling: touch;overflow-y: scroll; overflow-x: hidden;height:100vh;width:100vw;">
    <iframe class="j_iframe_iframe" src="./test4.html" frameborder="0"></iframe>
</div>

在Mac(Chrome)上和Android上一切正常,使用iphone打开,会发现横向边界被截断了。
如果改为overflow-x: scroll;会发现横向可滑动的距离非常长。通过使用Mac Safari调试iphone可见

$('.j_iframe_iframe')[0].contentDocument.querySelector('html').offsetWidth
// 820 (dom2的宽度 + wrapper的padding)

iframe内页面超出隐藏overflow:hidden元素的宽度也被计算在内了



作者:NowhereToRun
链接:https://www.jianshu.com/p/bd9fbf5a14f0
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
上一篇:浮动与定位


下一篇:Buffer_Overflow_ex