safari,IOS下iframe宽高度被内容撑出设备高度

时间 2019-11-08

标签 safari ios iframe 高度内容设备栏目 iOS 繁體版

原文原文链接

问题：safari浏览器下的iframe的宽高都会被内容撑大

这是一个safari浏览器存在的缺陷，不管如何设置iframe的宽高，都会被内容的宽高撑大，这会致使页面变得很大。css

解决方案

设置iframe scrolling="0"属性
使用overflow:scroll的div包裹iframe
设置iframe内页面的body position:fixed

方案一

解决宽度：html

#iframe{
        width:1px;
        min-width: 100%;
        *width:100%;
    }
    
    <iframe src="" scrolling="no">

解决高度：web

#iframe{
        height:1px;
        min-height: 100%;
        *height:100%;
    }
    
    <iframe src="" scrolling="no">

PS： 使用了此方法，iframe将没法滑动，若是是在height和width都不须要滑动的状况，此方法值得一试浏览器

方案二

<style>
.scroll-box {
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.scroll-box iframe {
  height: 100%;
  width: 100%;
}
</style>

<html>
<body>
    <div class="scroll-box">
        <iframe src="" />
    </div>
</body>
</html>

ps:使用了此方法在safari下，iframe的高度和宽度依然会被撑大，只是由于加了外层包裹，防止iframe影响到父窗口的页面布局。布局

须要注意的是——由于iframe的宽高依旧被撑大了，致使iframe内position:fixed的元素的位置与预期的不一样，好比在iframe宽高都大于浏览器窗口宽高时，垂直水平居中的fixed元素将再也不居中，而是往右下方偏移spa

方案三

#iframe{
    width: 100%;
    height:100%;
}

 <iframe id="iframe" src=""></iframe>

/********iframe内的页面********/

html{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    overflow: scroll;
}

PS：此方法经过限制iframe窗口内html的宽高，从而解决iframe被html撑大的问题，在能够操做iframe页面的状况下，使用此方法能解决宽高溢出问题。可是也有缺陷，滑动在safari下的体验不好。
解决滑动体验： 在body增长-webkit-overflow-scrolling:touch;,这样滑动就流畅了，可是，会出现橡皮筋效果，而为了解决橡皮筋效果，还须要作进一步的处理，可参考：https://www.zhihu.com/questio...code

总结：没有完美的解决方案htm