iframe一般我们都会经常用,特别是后台的管理系统,利用一个iframe来做一个切换再好不过了,可是如果你准备将你的后台管理系统做一个手机端自适应的话,其他倒还好,就是你会在ios设备上发现这个iframe超过100%的bug。这到底是一个什么bug呢?

一个页面a利用iframe嵌入了b,同时设置iframe的宽度为100% ,但是页面b的实际宽度要大于外层设置的100%,正常情况下,页面b的显示宽度应该为外层赋予的100%,但是在ios上,当iframe内真实宽度大于外层给予的宽度的时候,显示的宽度则为真实宽度。

正常样子页面a内嵌b效果如下:

ios中iframe宽度超100%的诡异bug gif ios中iframe宽度超100%的诡异bug

然后你可以拿ios真机点开下面的链接,对比上面的看看有什么不同。

解决方案

ios上iframe真实内容大于外层内容的时候是比较奇怪的,大致如图:

background Layer 1 页面a iframe嵌入页面b 页面b显示宽度=外层提供的宽度 页面b的真实宽度 页面a iframe嵌入页面b 页面b显示宽度=页面b的真实宽度 页面b的真实宽度 普通页面嵌入iframe宽度示意图 ios页面嵌入iframe宽度示意图

这种特性会导致页面b的很多东西会失效,例如媒体查询,本来媒体查询的是当前页面的宽度来自己进行适配,ios中iframe的这种特性会导致内嵌页面的宽度采用真实宽度,从而导致media失效。

解决方案是先设置iframe的width和min-width,同时设置iframe的scrolling为no,还需要给iframe设置一个container,同时设置-webkit-overflow-scrolling: touch。demo如下:

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字