移動端頁面內嵌了個 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 很重要的話，可以考慮定制頁面。