ios設備使用iframe寬度超出屏幕

場景

在作公司官網h5項目時遇到iframe在蘋果X手機上右側超出屏幕的問題，感受像是被截斷同樣，可是在其餘手機上顯示正常。

分析

問題緣由：頁面a利用iframe嵌入了b，同時設置iframe的寬度爲100% ，可是頁面b的實際寬度要大於外層設置的100%。 正常狀況下，頁面b的顯示寬度應該爲外層賦予的100%，可是在ios上，當iframe內真實寬度大於外層給予的寬度的時候，顯示的寬度則爲真實寬度。

解決

一、給iframe的外層div添加樣式：overflow: auto;-webkit-overflow-scrolling:touch;width:100%;

二、給iframe設置屬性scrolling='no'

三、給iframe設置樣式：width: 1px; min-width: 100%; *width: 100%;

<div style="overflow: auto;-webkit-overflow-scrolling:touch;width:100%;">
    <iframe height="100%" scrolling="no" style="width: 1px; min-width: 100%; *width: 100%;" src="https://juejin.im/timeline">
    </iframe>
</div>
複製代碼