image
 
收藏文章 楼主
safari浏览器下的iframe的宽高都会被内容撑大
版块:前端UI学习设计文章   类型:普通   作者:乐天   查看:167   回复:2   获赞:0   时间:2019-03-15 16:52:54

在ios设备上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;,这样滑动就流畅了。


上海,上海

有些梦虽然遥不可及,但并不是不可能实现。 
回复列表
默认   热门   正序   倒序
crossdiy
3F
这个标记一下

广东,韶关

 0   5天前  回复
扶摇可接
2F
666

宁夏,吴忠

 0   6天前  回复

回复:safari浏览器下的iframe的宽高都会被内容撑大

暂无用户组
退出
0级
游客:
image

公告

近期本站被人为恶意注册及发布垃圾帖,本站已开启普通用户发帖审核功能,VIP系列用户组及开发者用户组不受影响,一但发现发布违法或垃圾帖的用户,该用户账号将会被永久封号,请大家共同维护互联网环境,共创美好互联网未来。

最新活动

3年个人版授权+1540天豆仅需154元

终身个人版授权+3850天豆仅需385元

3年尊享版授权+15400天豆仅需1540元

终身尊享版授权+38500天豆仅需3850元

Powered by HadSky 6.6.1

©2015 - 2019 HadSky

购买产品 用户文档 加入QQ群 授权查询 网站绑定 客户案例 陕ICP备13005805号

您的IP:54.166.133.84,2019-03-22 08:08:53,Processed in 0.06807 second(s).

支持原创软件,抵制盗版,共创美好明天!
头像

用户名:

粉丝数:

签名:

资料 关注 好友 消息
已有0次打赏