溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下ios設備使用iframe寬度超出屏幕如何處理，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
場景
在做公司官網h6項目時遇到iframe在蘋果X手機上右側超出屏幕的問題，感覺像是被截斷一樣，但是在其他手機上顯示正常。
分析
問題原因：頁面a利用iframe嵌入了b，同時設置iframe的寬度為100% ，但是頁面b的實際寬度要大于外層設置的100%。正常情況下，頁面b的顯示寬度應該為外層賦予的100%，但是在ios上，當iframe內真實寬度大于外層給予的寬度的時候，顯示的寬度則為真實寬度。
解決
1、給iframe的外層p添加樣式：overflow: auto;-webkit-overflow-scrolling:touch;width:100%;
2、給iframe設置屬性scrolling='no'
3、給iframe設置樣式：width: 1px; min-width: 100%; *width: 100%;
<p > <iframe height="100%" scrolling="no" src="https://juejin.im/timeline"> </iframe></p>
附：iframe在IOS里如何自適應寬度？
iframe自動變寬了，在IOS手機上出現滾動條
第一步：定義 iframe 中的scrolling屬性為no，設置iframe中不顯示滾動條。
<iframe scrolling="no" ></iframe>
第二步：設置iframe的樣式為如下所示
iframe{ overflow: scroll; -webkit-overflow-scrolling: touch; min-width: 100%; *width:100%; width:1px;}
看完了這篇文章，相信你對“ios設備使用iframe寬度超出屏幕如何處理”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
