IOS iframe寬高問題（來至stackoverflow）

Question

重點就是這三行代碼，其餘還有一些本身看！css

問題是，當你不得不使用IFrame將內容插入到網站時，那麼在現代網絡世界中，IFrame也會有所反應。理論上它很簡單，只是簡單的使用<iframe width="100%"></iframe>或者設置CSS的寬度，iframe { width: 100%; }可是在實踐中它不是那麼簡單，可是能夠。html

若是iframe內容徹底響應，而且能夠在沒有內部滾動條的狀況下自行調整大小，那麼iOS Safari將會調整大小，iframe而不會有任何實際的問題。jquery

若是你考慮下面的代碼：ios

<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9,10,11" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Iframe Isolation Test</title> <style type="text/css" rel="stylesheet"> #Main { padding: 10px; } </style> </head> <body> <h1>Iframe Isolation Test 13.17</h1> <div id="Main"> <iframe height="950" width="100%" src="Content.html"></iframe> </div> </body> </html>

經過Content.html：git

<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=9,10,11" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Iframe Isolation Test - Content</title> <style type="text/css" rel="stylesheet"> #Main { width: 100%; background: #ccc; } </style> </head> <body> <div id="Main"> <div id="ScrolledArea"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada purus quis commodo convallis. Fusce consectetur mauris eget purus tristique blandit. Nam nec volutpat augue. Aliquam sit amet augue vitae orci fermentum tempor sit amet gravida augue. Pellentesque convallis velit eu malesuada malesuada. Aliquam erat volutpat. Nam sollicitudin nulla nec neque viverra, non suscipit purus tincidunt. Aenean blandit nisi felis, sit amet ornare mi vestibulum ac. Praesent ultrices varius arcu quis fringilla. In vitae dui consequat, rutrum sapien ut, aliquam metus. Proin sit amet porta velit, suscipit dignissim arcu. Cras bibendum tellus eu facilisis sodales. Vestibulum posuere, magna ut iaculis consequat, tortor erat vulputate diam, ut pharetra sapien massa ut magna. Donec massa purus, pharetra sed pellentesque nec, posuere ut velit. Nam venenatis feugiat odio quis tristique. </div> </div> </body> </html>

而後，這在iOS 7.1 Safari中沒有問題。您能夠在風景和肖像之間切換而不會有任何問題。github

可是，只需經過添加如下內容來更改Content.html CSS：web

 #ScrolledArea { width: 100%; overflow: scroll; white-space: nowrap; background: #ff0000; }

你獲得這個：api

如您所見，即便Content.html內容徹底響應（div＃ScrolledArea已overflow: scroll設置），而且iframe寬度爲100％，iframe仍會佔用div＃ScrolledArea的所有寬度，就好像溢出不存在同樣。演示瀏覽器

在這種狀況下，若是iframe內容上有滾動區域，問題就變成了如何得到iframe響應，當iframe內容有水平滾動區域？這裏的問題並不在於Content.html沒有響應，事實上iOS Safari只是簡單地調整iframe的大小，div#ScrolledArea使其徹底可見。網絡

你能和咱們分享一個連接嗎？你是說，若是頁面內的頁面內容具備white-space: nowrap樣式，iOS會將iFrame擴展到頁面的整個寬度？ - DA。 14年4月16日在2:03 — DA。, 14年4月16日在2:03
@DA我將演示添加到問題和解決方案。不，這white-space: nowrap自己不是問題。我只是用它來得到一個極端的寬度div#ScrolledArea。問題出如今IFrame內容中有水平滾動的區域時。若是是這種狀況，iOS Safari會忽略您的寬度設置，並顯示洞內容並打破網站的響應。 - Idra 14年 4月16日在10:50 — Idra, 14年
嗯...我想知道這是否是一個「功能」。具備包含可滾動內容的可滾動區域（iFrame）將是尷尬的。在觸摸屏上進行交互會很是困難。 - DA。 14年4月16日在15:02 — DA。, 14年4月16日在15:02
@DA固然這是一個侄女的狀況下，你說的話能夠是真實的（取決於實施，爲咱們工做），大多數網站沒有水平滾動區域，可是當你作...你甚至不能想象我在這花了多少時間。可是，即便你有隱藏的圖像和按鈕或相似的東西滾動，這多是一個問題。 - - Idra 14年 4月16日在18:35 — Idra, 14年
它看起來像這裏有相關的問題：stackoverflow.com/questions/5267996/...它彷佛是移動Safari的「功能」...它試圖確保內容的大小方式，用戶能夠仍然與它互動。我不肯定若是您在滾動iframe中滾動內容會發生什麼...... Safari如何解釋嵌套滾動元素中的滑動？ - DA。 14年4月16日在19:01 — DA。, 14年4月16日在19:01

傑克遜 · Accepted Answer · 2016-02-16 22：49：14Z

這個問題的解決方案其實很簡單，有兩種方法能夠解決這個問題。若是你有對Content.html的控制權，那麼只需將div#ScrolledArea寬度CSS改成：

 width: 1px; min-width: 100%; *width: 100%;

基本上這裏的想法很簡單，你設置的width東西比視口小（在這種狀況下，iframe的寬度），而後覆蓋它，min-width: 100%以容許實際上width: 100%默認覆蓋iOS Safari。在*width: 100%;那裏，因此代碼將保持IE6兼容，但若是你不關心IE6，你能夠省略它。演示

正如你如今所看到的，div#ScrolledArea寬度其實是100％，overflow: scroll;能夠作到這一點，並隱藏溢出的內容。若是您有權訪問iframe內容，那麼這是更可取的。

可是，若是您沒法訪問iframe內容（出於某種緣由），那麼您實際上能夠在iframe自己上使用相同的技術。簡單地在iframe上使用相同的CSS：

 iframe { width: 1px; min-width: 100%; *width: 100%; }

可是，這有一個限制，你須要關閉scrolling="no"iframe上的滾動條才能工做：

<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>

若是滾動條被容許，那麼這將沒法在iframe上工做。也就是說，若是您修改Content.html，那麼您能夠保留iframe中的滾動。演示

一個偉大的解決方案，咱們花了3個工程師一天試圖找出解決方案，咱們的狀況更糟糕。在咱們的狀況下，咱們控制的內容，但不是嵌入代碼，因此你的解決方案就像一個魅力 - terrinecold 14年 11月14日在22:41 — terrinecold, 14年
你救了個人一天！這比我使用的jquery-force-width解決方案要乾淨得多。 - 拉波 14年 12月3日在10:32 — 拉波, 14年
我不得不使寬度：10px！這對工做很重要。 - 尼克戈特利布 14年10月10日在18:09 — 尼克戈特利布, 14年10月10日在18:09
就像@NickGottlieb提到的，我不得不添加!important到該width屬性，以得到iframe響應web設計準備在iPhone 4與iOS 7 - malisokan 15年 1月8日在16:05 — malisokan, 15年
@ЮнгвиртТони變通辦法不須要工做，有可能width早先設置!important或更高優先級的CSS覆蓋它。在iPhone 4 iOS7孤立的狀況下，這是不須要的。 - Idra 15年 1月8日在16:21 — Idra, 15年

DA。 · Answer 2 · 2014-04-17 03：02：42Z

問題彷佛是，若是移動Safari包含的文檔比您指定的寬，則它將拒絕服從您的iFrame的寬度。例：

http://jsbin.com/hapituto/1

在桌面瀏覽器上，您將看到一個設置爲300px的iFrame和Div。內容更寬，所以您能夠滾動iFrame。

可是，在移動Safari瀏覽器中，您會注意到iFrame會自動擴展到內容的寬度。

個人猜想是，這是一個解決長期存在的頁面內滾動內容的問題。在過去，若是你在觸摸設備上有一個大的滾動iframe，你會被「卡住」在iframe中，由於這是滾動而不是頁面自己。看來蘋果已經決定了一個iFrame的默認行爲是「不滾動」，並擴大阻止它。

一個選項多是這種解決方法。而不是假定iFrame將滾動，將iframe放置在您能夠控制的DIV中，而後滾動。

例如：http：//jsbin.com/zakedaja/1

示例標記：

<div style="overflow: scroll; -webkit-overflow-scrolling: touch; width: 300px;"> <iframe src="http://jsbin.com/roredora/1/" style="width: 600px;"></iframe> </div>

在移動Safari瀏覽器中，您如今能夠經過包含它的div滾動如今徹底展開的iFrame的內容。

問題：在桌面瀏覽器上看起來真的很醜，就像如今有雙滾動條同樣。因此你可能不得不用JS來作一些瀏覽器檢測來解決這個問題。

我仍然認爲這不是問題的範圍，由於你在這裏展現的解決方案是如何在IOS Safari中虛假洞iframe滾動的標準方式，但考慮到這個iOS問題是關於IFrame滾動的問題（內容或其餘），那麼它很高興在這裏。 - Idra 14年 4月17日在12:41 — Idra, 14年
我想我不徹底明白你的問題。據我所知，你遇到的問題是，在iOS中，移動Safari試圖阻止一個iFrame在第一個地方滾動，並強制它的寬度。我誤解你的問題嗎？ - DA。 14年4月17日在13:49 — DA。, 14年4月17日在13:49
本質上是這個問題，它只是所需的解決方案是不一樣的。在最初的問題，IFrame的內容是響應，而水平滾動的內容，因此問題不是如何模仿iframe滾動，但如何得到iframe的寬度是100％即響應，而你有水平滾動內容那iframe。這就是爲何上述方法在這種狀況下不起做用，由於設計的響應性已經被打破，您須要滾動以查看完整的內容，即便在設計中您一般不須要的地方。 - Idra 14年 4月17日在14:00 — Idra, 14年
我很抱歉，我意識到我誤導了你的意見之一。iframe不滾動。這是關鍵，iframe不該該只滾動它的內容的一部分，即div#ScrolledArea在個人例子中（綠色）。我以前只是誤讀但iframe不該該滾動只能根據容器元素本身調整大小即有width: 100%; - Idra 14年 4月17日17:18 — Idra, 14年

社區 · Answer 3 · 2017-05-23 12：03：02Z

我須要一個跨瀏覽器解決方案。要求是：

須要iOS和其餘地方
沒法訪問iFrame中的內容
須要它滾動！

創建關我從瞭解到@Idra關於iOS上的滾動=「否」，這篇文章關於配件的iFrame內容在iOS上的屏幕這裏是我結束了。但願它能夠幫助別人=）

HTML

<div id="url-wrapper"></div>

CSS

html, body{ height: 100%; } #url-wrapper{ margin-top: 51px; height: 100%; } #url-wrapper iframe{ height: 100%; width: 100%; } #url-wrapper.ios{ overflow-y: auto; -webkit-overflow-scrolling:touch !important; height: 100%; } #url-wrapper.ios iframe{ height: 100%; min-width: 100%; width: 100px; *width: 100%; }

JS

function create_iframe(url){ var wrapper = jQuery('#url-wrapper'); if(navigator.userAgent.match(/(iPod|iPhone|iPad)/)){ wrapper.addClass('ios'); var scrolling = 'no'; }else{ var scrolling = 'yes'; } jQuery('<iframe>', { src: url, id: 'url', frameborder: 0, scrolling: scrolling }).appendTo(wrapper); }

一樣的要求，像一個魅力工做。 - mcmhav 15年 5月18日在17:07 — mcmhav, 15年
upvoted，但...爲何IE6規則在「ios」類？:-) - J. Bruni 1月6日10:39 — J. Bruni, 1月6日10:39

碼頭 · Answer 4 · 2016-07-22 19：27：28Z

全部這些解決方案的問題是，iframe永遠的高度永遠不會改變。

這意味着你將沒法在iframe使用Javascript 內部中心元素position:fixed;，或者position:absolute;由於iframe自己從不滾動。

我在這裏詳細的解決方案是div使用這個CSS 包裝iframe的全部內容：

#wrap { position: fixed; top: 0; right:0; bottom:0; left: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; }

這樣，Safari認爲內容沒有高度，可讓你分配iframe正確的高度。這也可讓你以任何你想要的方式定位元素。

你能夠在這裏看到一個快速和骯髒的演示。

這是爲我工做的惟一解決方案。固然，只有在你控制內容的iframe狀況下才能使用，但在個人狀況下，我是這麼作的。乾杯! - 文斯 16年 8月24日在19:18 — 文斯, 16年

4dgaurav · Answer 5 · 2014-04-16 01：56：39Z

投票 0投票

CSS只有解決方案

HTML

<div class="container"> <div class="h_iframe"> <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe> </div> </div>

CSS

html,body { height:100%; } .h_iframe iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

DEMO

在iframe中的HTML頁面的另外一個演示

編輯14年4月16日在1:56

回答 14年4月15日在12:27

4dgaurav

912342145

也許我錯誤地實現了你的解決方案，可是當我用個人孤立的測試用例來測試時，那麼它在iOS 7.1的iPhone 4中徹底不起做用。你能詳細說明這應該如何工做嗎？ - Idra 14年 4月15日在12:43

肯定它接縫像你誤解了這個問題，檢查這個連接出來這是你的新的演示iframe內容集成沒有任何額外的CSS應用於iframe。若是你在iOS Safari中查看它，那麼它仍然是響應式的，這是由於這個頁面沒有任何橫向滾動，會強制iframe寬度比視口寬。正如問題中所述，在這樣的網站上，您不須要爲iframe作任何事情來響應。 - - Idra 14年 4月16日在12:03

因此你想要它的行爲，舉例給你的連接？ - 4dgaurav 14年 4月16日在12:08

添加評論

Aaron Dishno博士 · Answer 6 · 2015-08-18 21：13：27Z

內容窗格上的寬度有問題，爲iframe建立一個水平滾動條。原來，一幅圖像的寬度比預期的要寬。我可以經過將全部圖像的css max-width設置爲百分比來解決這個問題。

<meta name="viewport" content="width=device-width, initial-scale=1" /> img { max-width: 100%; height:auto; }

S.Yadav · Answer 7 · 2016-11-16 12：25：15Z

我正在與ionic2和系統配置以下 -

****************************************************** Your system information: Cordova CLI: 6.4.0 Ionic Framework Version: 2.0.0-beta.10 Ionic CLI Version: 2.1.8 Ionic App Lib Version: 2.1.4 ios-deploy version: Not installed ios-sim version: 5.0.8 OS: OS X Yosemite Node Version: v6.2.2 Xcode version: Xcode 7.2 Build version 7C68 ******************************************************

對於我來講這個問題已經解決這個代碼 -
對於HTML iframe標籤 -

<div class="iframe_container"> <iframe class= "animated fadeInUp" id="iframe1" [src]='page' frameborder="0" > <!-- <img src="img/video-icon.png"> --> </iframe><br> </div>

看到相同的CSS -

.iframe_container { overflow: auto; position: relative; -webkit-overflow-scrolling: touch; height: 75%; } iframe { position:relative; top: 2%; left: 5%; border: 0 !important; width: 90%; }

在個人狀況下，位置屬性在這裏扮演着重要的角色
位置：相對;

它也能夠幫助你！

IOS iframe寬高問題（來至stackoverflow）

7答案