ios設(shè)備使用iframe寬度超出屏幕的解決方法
場景
在做公司官網(wǎng)h5項目時遇到iframe在蘋果X手機(jī)上右側(cè)超出屏幕的問題,感覺像是被截斷一樣,但是在其他手機(jī)上顯示正常。
分析
問題原因:頁面a利用iframe嵌入了b,同時設(shè)置iframe的寬度為100% ,但是頁面b的實際寬度要大于外層設(shè)置的100%。
正常情況下,頁面b的顯示寬度應(yīng)該為外層賦予的100%,但是在ios上,當(dāng)iframe內(nèi)真實寬度大于外層給予的寬度的時候,顯示的寬度則為真實寬度。
解決
1、給iframe的外層div添加樣式:overflow: auto;-webkit-overflow-scrolling:touch;width:100%;
2、給iframe設(shè)置屬性scrolling='no'
3、給iframe設(shè)置樣式: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>
附:iframe在IOS里如何自適應(yīng)寬度?
iframe自動變寬了,在IOS手機(jī)上出現(xiàn)滾動條
第一步:定義 iframe 中的scrolling屬性為no,設(shè)置iframe中不顯示滾動條。
<iframe scrolling="no" ></iframe>
第二步:設(shè)置iframe的樣式為如下所示
iframe{ overflow: scroll; -webkit-overflow-scrolling: touch; min-width: 100%; *width:100%; width:1px; }
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對我們的支持。
上一篇:解決iOS13 無法獲取WiFi名稱(SSID)問題
欄 目:IOS
本文標(biāo)題:ios設(shè)備使用iframe寬度超出屏幕的解決方法
本文地址:http://mengdiqiu.com.cn/a1/IOS/11872.html
您可能感興趣的文章
- 01-11iOS常用算法之兩個有序數(shù)組合并(要求時間復(fù)雜度為0(n))
- 01-11iOS 彈幕功能的實現(xiàn)思路圖解
- 01-11iOS調(diào)試Block引用對象無法被釋放的小技巧分享
- 01-11iOS動態(tài)更換Icon的全過程記錄
- 01-11iOS實現(xiàn)文本分頁的方法示例
- 01-11iOS常見宏理解及使用方法
- 01-11iOs遷至WKWebView跨過的一些坑
- 01-11iOS模擬中獎名單循環(huán)滾動效果
- 01-11Python一鍵查找iOS項目中未使用的圖片、音頻、視頻資源
- 01-11iOS中如何獲取某個視圖的截圖詳析


閱讀排行
本欄相關(guān)
- 01-11UILabel顯示定時器文本跳動問題的解決
- 01-11iOS常用算法之兩個有序數(shù)組合并(要
- 01-11iOS 彈幕功能的實現(xiàn)思路圖解
- 01-11詳解MacOs免密登錄CentOs操作步驟
- 01-11iOS動態(tài)更換Icon的全過程記錄
- 01-11iOS調(diào)試Block引用對象無法被釋放的小技
- 01-11iOS常見宏理解及使用方法
- 01-11iOS實現(xiàn)文本分頁的方法示例
- 01-11iOs遷至WKWebView跨過的一些坑
- 01-11iOS模擬中獎名單循環(huán)滾動效果
隨機(jī)閱讀
- 01-10delphi制作wav文件的方法
- 01-10C#中split用法實例總結(jié)
- 01-11ajax實現(xiàn)頁面的局部加載
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 04-02jquery與jsp,用jquery
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-10使用C語言求解撲克牌的順子及n個骰子
- 08-05織夢dedecms什么時候用欄目交叉功能?