现象:项目中嵌入 <iframe /> 并设置宽高后,发现在 Android 手机浏览器上打开可以正常运行,但是在 iOS 手机上会有 iframe 页面样式莫名变大,效果如下:
经过各种尝试以及找了很多资料,最后终于找到一个完美解决的办法,感谢 <不靠谱的人> 采取了他的方案后,很漂亮的解决了这个bug......
代码如下:
<div style="overflow: auto;-webkit-overflow-scrolling:touch;width:100%;height:100%;">
<iframe src="http://www.baidu.com" frameborder="0" height="100%" scrolling='no' style="width: 1px; min-width: 100%; *width: 100%;"></iframe>
</div>