iframe在ios設備寬度超出屏幕解決辦法

做h5項目時,使用iframe嵌套一個h5子頁面在ios手機上出現(xiàn)超出屏幕的問題。子頁面本身是沒有超出屏幕的,給iframe;設置了寬度100%沒有起作用,在ios手機上為超出屏幕,但是在安卓手機上顯示正常。

解決辦法:

給iframe設置屬性scrolling=‘no’
給iframe設置樣式:width: 1px; min-width: 100%; *width: 100%;

完整代碼:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        iframe {
            width: 1px;
            min-width: 100%;
            *width: 100%;
        }
    </style>
    <script>
        function changeFrameHeight(){
            document.getElementById("iframe").height=0;
            document.getElementById("iframe").height=document.getElementById("iframe").contentWindow.document.body.scrollHeight;
        }
        window.onresize=function(){
            changeFrameHeight();
        }
    </script>
</head>
<body>
<iframe id="iframe" width="100%" src="" onload="changeFrameHeight()"  scrolling="no" frameborder="0"></iframe>
</body>
</html>

原文作者技術(shù)博客:http://www.itdecent.cn/u/ac4daaeecdfe

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • AMD 和 CMD 的區(qū)別有哪些?AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。CMD 是 ...
    竿牘閱讀 751評論 0 1
  • 元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架(即行內(nèi)框架); 一、align 屬性(不贊成) align屬性規(guī)定ifram...
    puxiaotaoc閱讀 19,966評論 0 14
  • 注意:此問題僅才IOS12及之前的版本出現(xiàn),在IOS13之后已被修復。 解決方式 1、給iframe的外層div添...
    流浪的三鮮餡閱讀 686評論 0 0
  • Mobile Web Favorites 參與貢獻 移動前端開發(fā)收藏夾,歡迎使用Issues以及 Pull Req...
    柴東啊閱讀 957評論 0 2
  • 前端開發(fā)面試題 面試題目: 根據(jù)你的等級和職位的變化,入門級到專家級,廣度和深度都會有所增加。 題目類型: 理論知...
    怡寶丶閱讀 2,686評論 0 7

友情鏈接更多精彩內(nèi)容