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

zero 發布于2019-08-29 16:41 / 2476人閱讀

摘要：問題瀏覽器下的的寬高都會被內容撐大這是一個瀏覽器存在的缺陷，無論如何設置的寬高，都會被內容的寬高撐大，這會導致頁面變得很大。

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

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

解決方案

設置iframe scrolling="0"屬性

使用overflow:scroll的div包裹iframe

設置iframe內頁面的body position:fixed

方案一

解決寬度：

    #iframe{
        width:1px;
        min-width: 100%;
        *width:100%;
    }
    
    </pre>
<p>解決高度：</p>
<pre>    #iframe{
        height:1px;
        min-height: 100%;
        *height:100%;
    }
    
    <iframe src="" scrolling="no"></pre>
<p>PS： <strong>使用了此方法，iframe將無法滑動，如果是在height和width都不需要滑動的情況，此方法值得一試</strong></p>
<b>方案二</b>
<pre><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   id="20owoui"   class="scroll-box">
        <iframe src="" />
    </div>
</body>
</html></pre>
<p>ps:<strong>使用了此方法在safari下，iframe的高度和寬度依然會被撐大，只是因為加了外層包裹，防止iframe影響到父窗口的頁面布局。</strong></p>
<p><strong>需要注意的是——因為iframe的寬高依舊被撐大了，導致iframe內position:fixed的元素的位置與預期的不同，比如在iframe寬高都大于瀏覽器窗口寬高時，垂直水平居中的fixed元素將不再居中，而是往右下方偏移</strong></p>
<p><script type="text/javascript">showImg("https://segmentfault.com/img/bVbgL24?w=1057&h=663");</script></p>
<b>方案三</b>
<pre>#iframe{
    width: 100%;
    height:100%;
}

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

/********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...

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113913.html

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

摘要：問題瀏覽器下的的寬高都會被內容撐大這是一個瀏覽器存在的缺陷，無論如何設置的寬高，都會被內容的寬高撐大，這會導致頁面變得很大。問題：safari瀏覽器下的iframe的寬高都會被內容撐大這是一個safari瀏覽器存在的缺陷，無論如何設置iframe的寬高，都會被內容的寬高撐大，這會導致頁面變得很大。解決方案設置iframe scrolling=0屬性使用overflow:sc...

james 2019-08-02 16:05 評論0 收藏0
safari,IOS下iframe寬高度被內容撐出設備高度

摘要：問題瀏覽器下的的寬高都會被內容撐大這是一個瀏覽器存在的缺陷，無論如何設置的寬高，都會被內容的寬高撐大，這會導致頁面變得很大。問題：safari瀏覽器下的iframe的寬高都會被內容撐大這是一個safari瀏覽器存在的缺陷，無論如何設置iframe的寬高，都會被內容的寬高撐大，這會導致頁面變得很大。解決方案設置iframe scrolling=0屬性使用overflow:sc...

vincent_xyb 2019-08-23 11:55 評論0 收藏0
前端技術之_CSS詳解第四天

摘要：前端技術之詳解第四天一第三天的小總結盒模型，什么是盒子所有的標簽都是盒子。如果不在標準流，比如盒子都浮動了，那么兩個盒子之間是沒有塌陷現象的盒子居中的值可以為，表示自動。前端技術之_CSS詳解第四天一、第三天的小總結盒模型box model，什么是盒子？　　所有的標簽都是盒子。無論是div、span、a都是盒子。圖片、表單元素一律看做文本。盒模型有哪些組成：　　width、hei...

番茄西紅柿 2019-04-23 13:45 評論0 收藏0
移動web開發問題和經驗總結

摘要：的事件默認綁在上的抓包瀏覽器連接安卓機測試實用網站適配測試兼容性網站前端開發雅虎條優化準則前言這里大部分是自己遇到過的情況，還有一部分借鑒了同行的文章，如果大家有遇到其它坑，歡迎提出來一起研究。知識要點 1. Meta標簽 1.禁止用戶縮放頁面，頁面強制讓文檔的寬度與設備的寬度保持1:1 2.禁止ios上自動識別電話 3.禁止android上自動識別郵箱 4.針對ios上的...

MorePainMoreGain 2019-08-02 16:02 評論0 收藏0