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)

    回到顶部
    我要评论

    所有评论

      相关文章