safari,IOS下iframe寬高度被內容撐出設備高度

時間 2019-11-08

標籤 safari ios iframe 高度內容設備欄目 iOS 简体版

原文原文鏈接

問題：safari瀏覽器下的iframe的寬高都會被內容撐大

這是一個safari瀏覽器存在的缺陷，不管如何設置iframe的寬高，都會被內容的寬高撐大，這會致使頁面變得很大。css

解決方案

設置iframe scrolling="0"屬性
使用overflow:scroll的div包裹iframe
設置iframe內頁面的body position:fixed

方案一

解決寬度：html

#iframe{
        width:1px;
        min-width: 100%;
        *width:100%;
    }
    
    <iframe src="" scrolling="no">

解決高度：web

#iframe{
        height:1px;
        min-height: 100%;
        *height:100%;
    }
    
    <iframe src="" scrolling="no">

PS： 使用了此方法，iframe將沒法滑動，若是是在height和width都不須要滑動的狀況，此方法值得一試瀏覽器

方案二

<style>
.scroll-box {
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.scroll-box iframe {
  height: 100%;
  width: 100%;
}
</style>

<html>
<body>
    <div class="scroll-box">
        <iframe src="" />
    </div>
</body>
</html>

ps:使用了此方法在safari下，iframe的高度和寬度依然會被撐大，只是由於加了外層包裹，防止iframe影響到父窗口的頁面佈局。佈局

須要注意的是——由於iframe的寬高依舊被撐大了，致使iframe內position:fixed的元素的位置與預期的不一樣，好比在iframe寬高都大於瀏覽器窗口寬高時，垂直水平居中的fixed元素將再也不居中，而是往右下方偏移spa

方案三

#iframe{
    width: 100%;
    height:100%;
}

 <iframe id="iframe" src=""></iframe>

/********iframe內的頁面********/

html{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    overflow: scroll;
}

PS：此方法經過限制iframe窗口內html的寬高，從而解決iframe被html撐大的問題，在能夠操做iframe頁面的狀況下，使用此方法能解決寬高溢出問題。可是也有缺陷，滑動在safari下的體驗不好。
解決滑動體驗： 在body增長-webkit-overflow-scrolling:touch;,這樣滑動就流暢了，可是，會出現橡皮筋效果，而爲了解決橡皮筋效果，還須要作進一步的處理，可參考：https://www.zhihu.com/questio...code

總結：沒有完美的解決方案htm