開發需求需要在 h5 中用 iframe 中調用一個其他公司開發的 html 頁面。 簡單的插入 <iframe /> 並設置寬高后，發現在 Android 手機瀏覽器上打開可以正常運行，但是在 iOS 手機上會有高度問題，iframe 會擴展超過設置的高度。 查找后發現問題是出在 iOS Safari 上，對於一個 scrollable 的 iframe 元素，iOS Safari 會選擇擴展 iframe 的高度來自適應其中 web 頁面內容的高度。所以當頁面內容超過 iframe 設置的高度時，iOS Safari 並不會像在 Android 瀏覽器中那樣維持 iframe 的高度並在右側顯示一個拖動條，而是直接擴展 iframe 的高度。 解決方案如下： 第一種：直接將 iframe 設置成 scrolling no。 <iframe scrolling='no' /> 但是這種方法會導致 iframe 中的 content 顯示不全，超出 iframe 高度的部分會直接被裁剪掉。 第二種：用一個 div 包裹 iframe，並在 div 中處理滾動事件。 <style> .demo-iframe-holder { width: 500px; height: 500px; -webkit-overflow-scrolling: touch; overflow-y: scroll; } .demo-iframe-holder iframe { height: 100%; width: 100%; } </style> <html> <body> <div class="demo-iframe-holder"> <iframe src="content.html" /> </div> </body> </html> 其中 overflow-y: scroll 會裁剪在垂直方向上裁剪超過高度的內容，並把剩下內容用滾動的方式來顯示，而 -webkit-overflow-scrolling: touch 屬性會在瀏覽器中創建一個繼承於 UIScrollView 的 UIWebOverflowScrollView 來處理滾動事件，同時也可以防止 div 內部的內容在滾動時，瀏覽器頁面跟着一起滾動。 參考文章： scroll-iframes-ios https://www.jianshu.com/p/58ac17ac7779 原文