移动端页面内嵌了个 iframe，在 ios 下打开却发现页面怪异。比如 demo。代码如下：
复制代码<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <style> html { height: 100%; width: 100%; } </style> </head> <body style="height: 100%; margin: 0; padding: 0; overflow-y: hidden;"> <iframe style="width:100%; height: 880px;" frameborder="0" src="http://m.hao123.com"> </iframe> </body> </html>
Android 下展现良好，但是在 ios 下：
调试一看，iframe 无故变大了，正常情况下应该和 screen 的宽保持一致（比如 360px），在 ios 下的宽度变成了 1440px（iPhone6） 或者 720px（iPhone4）。（感谢 double Net 提供的图片，不禁感概 mac 大法好啊）
最后定位到使得 iframe 变大的原因是，页面中元素即使已经 hidden 或者 display 为 none 了，在计算 iframe 大小时并不会忽略它们，当然前提是在 ios 下，算不算是 ios 的一个 bug 呢？
比如 hao123 中有个图片的轮播效果，iframe 会觉得当前页面太窄无法容纳这么宽的内容，而自动加宽了。
解决这样的问题也很简单，尽量不出现 "溢出" 页面的元素，但是做起来却相当复杂，要考虑很多情况，如果 iframe 很重要的话，可以考虑定制页面。