问题:safari浏览器下的iframe的宽高都会被内容撑大
这是一个safari浏览器存在的缺陷,无论如何设置iframe的宽高,都会被内容的宽高撑大,这会导致页面变得很大。
解决方案
- 设置iframe scrolling="0"属性
- 使用overflow:scroll的div包裹iframe
- 设置iframe内页面的body position:fixed
方案一
解决宽度:
#iframe{
width:1px;
min-width: 100%;
*width:100%;
}
<iframe src="" scrolling="no">
解决高度:
#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元素将不再居中,而是往右下方偏移
方案三
#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...
总结: 没有完美的解决方案
原文地址:https://www.cnblogs.com/qianduanwriter/p/11840933.html
时间: 2024-11-01 12:20:26