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

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

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

解决方案

  1. 设置iframe scrolling="0"属性
  2. 使用overflow:scroll的div包裹iframe
  3. 设置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

safari,IOS下iframe宽高度被内容撑出设备高度的相关文章

css实现定宽高比(非内容撑出)

<head> <style> .before { display: flex; width: 100px; background: #f00; } .before:before { content: ""; padding-top: 100%; } </style> </head> <body> <div class="before">before</div> </body&g

Cordova webapp实战开发:(6)如何写一个iOS下自动更新的插件?

上一篇我们学习了如何写一个Andorid下自动更新的插件,我想还有一部分看本系列blog的开发人员希望学习在iOS下如何做插件的吧,那么今天你就可以来看看这篇文字了. 本次练习你能学到的 学习如何获取iOS当前版本号 学习iOS下插件类的编写 学习iOS下插件的配置 学习iOS下插件的调用 主要内容 APP中[检查更新]显示当前版本号 插件类的编写 在上一篇介绍Andorid插件时我们贴出了很多源码,这里也直接贴出代码,首先是iOS下插件的代码. 我们在Plugins下新建两个文件,一个头文件

解决各种情况下的iframe高度自适应内容

JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用.如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求.当内容是未知或者是变化的时候.这个时候又有几种情况了. iframe内容未知,高度可预测 这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用javascript改变高度.常用的兼容代码有: // document.domain = "caiba

跨域下iframe自适应高度

最近在做一个需求,需求大致背景:页面中iframe嵌入另一家公司的列表页 博主的第一反应就是“very easy!”,so,挽起双袖开始敲代码 结果出现问题了,iframe跨域,无法获得内嵌页面的高度,因此出现的上下滚动条,so难看! 于是上网找大神,皇天不负有心人啊,终于找到了,激动之情无以言表.... 故事背景交代完毕 /******************************华丽的分割线,哈哈****************************/ 大神的例子大致是这样的: 假设ww

iframe高度自适应内容

JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求.当内容是未知或者是变化的时候.这个时候又有几种情况了. iframe内容未知,高度可预测 这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用javascript改变高度.常用的兼容代码有: function setIframeHeight(i

ios下Safari无法触发click事件的处理

ios下的Safari真是傲娇啊,坑好多. 首先上代码 <!DOCTYPE html> <html> <head> <title>122</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"&

页面嵌套iframe时,怎样让iframe高度根据自身内容高度自适应

总体思路是这样的,因为iframe里页面的内容是动态加载的,而且电脑屏幕宽度发生变化时,也得相应的去改变iframe标签的高度(如果高度确定就不用这么麻烦了): 首先,我们在父页面中定义一个方法,用来改变iframe标签的高度:在iframe中的页面中,当内容加载号之后去调用父页面汇总的这个方法(因为要根据内容自适应高度): 然后再处理,当屏幕发生改变时,在子页面汇总调用父页面汇总的这个方法: 父页面代码: <!DOCTYPE html> <html lang="en"

iOS下JS与OC互相调用(一)--UIWebView 拦截URL

http://blog.csdn.net/u011619283/article/details/52135977 最近准备把之前用UIWebView实现的JS与原生相互调用功能,用WKWebView来替换.顺便搜索整理了一下JS 与OC 交互的方式,非常之多啊.目前我已知的JS 与 OC 交互的处理方式: * 1.在JS 中做一次URL跳转,然后在OC中拦截跳转.(这里分为UIWebView 和 WKWebView两种,去年因为还要兼容iOS 6,所以没办法只能采用UIWebView来做.) *

IOS下 UILabel 如何自动换行

转自:http://zasoft.blog.163.com/blog/static/205215176201301414915700/ 背景: 相信很多朋友都遇到过,文本的内容长度不一,需要根据内容的多少来自动换行处理. 场景: 很多APP中评论,有的评论长,有的评论短,有的一行,有的多行. ? 下面以评论的实现为例来说说具体如何实现. ? 技术点: UILabel的自动换行,自动换行的同时要自适应Frame大小. UITableView的行高自适应内容,实时调整高度. 实现方法: UILabe