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

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

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

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

ios中iframe宽度超100%的诡异bug(在ios真机上才有此bug)     

解决方案

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

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

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

解决:ios中iframe宽度超100%的诡异bug(在ios真机上才有此bug)

回到顶部
我要评论

所有评论

返回
邮箱:
绑定
取消
×

我要评论

回复:

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

图片:

邮箱:
绑定邮箱后,若有回复,会邮件通知。
提交
还可以输入500个字