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

vincent_xyb 发布于2019-08-23 11:55 / 2357人阅读

摘要：问题浏览器下的的宽高都会被内容撑大这是一个浏览器存在的缺陷，无论如何设置的宽高，都会被内容的宽高撑大，这会导致页面变得很大。

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

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

解决方案

设置iframe scrolling="0"属性

使用overflow:scroll的div包裹iframe

设置iframe内页面的body position:fixed

方案一

解决宽度：

    #iframe{
        width:1px;
        min-width: 100%;
        *width:100%;
    }
    
    </pre>
<p>解决高度：</p>
<pre>    #iframe{
        height:1px;
        min-height: 100%;
        *height:100%;
    }
    
    <iframe src="" scrolling="no"></pre>
<p>PS： <strong>使用了此方法，iframe将无法滑动，如果是在height和width都不需要滑动的情况，此方法值得一试</strong></p>
<b>方案二</b>
<pre><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></pre>
<p>ps:<strong>使用了此方法在safari下，iframe的高度和宽度依然会被撑大，只是因为加了外层包裹，防止iframe影响到父窗口的页面布局。</strong></p>
<p><strong>需要注意的是——因为iframe的宽高依旧被撑大了，导致iframe内position:fixed的元素的位置与预期的不同，比如在iframe宽高都大于浏览器窗口宽高时，垂直水平居中的fixed元素将不再居中，而是往右下方偏移</strong></p>
<p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbgL24?w=1057&h=663");</script></p>
<b>方案三</b>
<pre>#iframe{
    width: 100%;
    height:100%;
}

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

/********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.ucloud.cn/yun/97676.html

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

摘要：问题浏览器下的的宽高都会被内容撑大这是一个浏览器存在的缺陷，无论如何设置的宽高，都会被内容的宽高撑大，这会导致页面变得很大。问题：safari浏览器下的iframe的宽高都会被内容撑大这是一个safari浏览器存在的缺陷，无论如何设置iframe的宽高，都会被内容的宽高撑大，这会导致页面变得很大。解决方案设置iframe scrolling=0属性使用overflow:sc...

james 2019-08-02 16:05 评论0 收藏0
safari,IOS下iframe宽高度被内容撑出设备高度

摘要：问题浏览器下的的宽高都会被内容撑大这是一个浏览器存在的缺陷，无论如何设置的宽高，都会被内容的宽高撑大，这会导致页面变得很大。问题：safari浏览器下的iframe的宽高都会被内容撑大这是一个safari浏览器存在的缺陷，无论如何设置iframe的宽高，都会被内容的宽高撑大，这会导致页面变得很大。解决方案设置iframe scrolling=0属性使用overflow:sc...

zero 2019-08-29 16:41 评论0 收藏0
前端技术之_CSS详解第四天

摘要：前端技术之详解第四天一第三天的小总结盒模型，什么是盒子所有的标签都是盒子。如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的盒子居中的值可以为，表示自动。前端技术之_CSS详解第四天一、第三天的小总结盒模型box model，什么是盒子？　　所有的标签都是盒子。无论是div、span、a都是盒子。图片、表单元素一律看做文本。盒模型有哪些组成：　　width、hei...

番茄西红柿 2019-04-23 13:45 评论0 收藏0
移动web开发问题和经验总结

摘要：的事件默认绑在上的抓包浏览器连接安卓机测试实用网站适配测试兼容性网站前端开发雅虎条优化准则前言这里大部分是自己遇到过的情况，还有一部分借鉴了同行的文章，如果大家有遇到其它坑，欢迎提出来一起研究。知识要点 1. Meta标签 1.禁止用户缩放页面，页面强制让文档的宽度与设备的宽度保持1:1 2.禁止ios上自动识别电话 3.禁止android上自动识别邮箱 4.针对ios上的...

MorePainMoreGain 2019-08-02 16:02 评论0 收藏0