Android瀏覽器寬度拉伸到iframe內容寬度，儘管溢出：隱藏

我試圖模仿Android（海豚瀏覽器）中的桌面風格iframe與一些成功。使用的技巧是將與position:relative;放在<div>的固定尺寸和overflow:hidden;之內，然後使用jQuery Mobile（或者只是vmouse事件）來處理用於滾動的鼠標事件。Android瀏覽器寬度拉伸到iframe內容寬度，儘管溢出：隱藏

所有這一切都很好，除了一件事;即使被剪輯，它的內容也會擴展瀏覽器以匹配大小。這在高度上通常是顯而易見的。

下面是簡單的示例代碼中的jsfiddle：http://jsfiddle.net/euKhG/

而這裏的結果到Android瀏覽器中觀看：http://jsfiddle.net/euKhG/embedded/result/（僅適用於Android瀏覽器！）。

有誰知道如何解決這個問題？我看過iScroll和其他地方的類似建議，但他們似乎用這樣的遙控器src觸摸框架。

來源

2012-04-12 Martijn

嗯，我想你錯過了這裏的東西。現在，您的iFrame會被切斷，但不是由於您設置了溢出：滾動，也不是由於您設置了容器幀的寬度/高度屬性;您目前看到的截止點完全是任意的。

爲了證明這一點，在您的容器div中添加一個背景：＃ff0000，您將看到它確實不是div的寬度/高度，它定義了iframe的截止區域，而是一些「默認」iframe維度屬性：http://jsfiddle.net/kauUr/

我的建議是，如果你說你的div是固定的尺寸，設置你的iframe與相同尺寸的寬度/高度屬性，以便它匹配。你可以使用寬度和高度屬性來做到這一點，或者更乾淨地使用css，就像你爲容器div所做的一樣。一旦你給了iFrame正確的寬度/高度，截斷值應該與你期望的一致，並且瀏覽器不應該滾動到iframe內容的大小，而是滾動到你指定的尺寸。事實上，即使div的尺寸未提前知道，您也可以使用Javascript來獲取它們，然後在運行時正確調整iFrame的大小。

<div style="width: 400px; height: 400px; overflow: scroll; background:#ff0000"> 
    <iframe style="width: 400px; height: 400px" src="http://doc.jsfiddle.net" frameborder="0" scrolling="no"></iframe> 
</div>

如果還是不行，請嘗試在iframe風格拍打的overflow:none爲好。

來源

2012-04-23 00:58:30

這不僅使得它的Android看起來更糟。 – Martijn 2012-05-22 09:01:43

嘗試在meta標籤

<meta id="viewport" name="viewport" content="initial-scale=1, user-scalable=no, width=device-width, target-densitydpi=160dpi"/>

設定目標densitydpi但你必須對所有其他的CSS對於改變這個問題，以及

來源

2012-09-13 11:22:00 Kraven

Android瀏覽器寬度拉伸到iframe內容寬度，儘管溢出：隱藏

回答

相關問題