無法讓iFrame在iPhone，iPad和BlackBerry上的屏幕上滾動

我正在構建一個頁面，其中有兩個div。一個div用作標題，另一個div包含一個iFrame。無法讓iFrame在iPhone，iPad和BlackBerry上的屏幕上滾動

目前，我有一些JQuery和CSS一起工作，以便根據它正在查看的窗口的大小來調整iFrame的大小。我已經完成了一些初步測試，它可以在Firefox，Safari，Chrome，IE 9以及Android 2.3上的默認/股票瀏覽器上運行。

但是，當我嘗試在iPad，iPhone或BlackBerry上查看頁面時，它看起來像iFrame正在調整大小，但您無法滾動iFrame頁面的全長。基本上卡住了。但在Android手機上，我可以向下滾動頁面，這很奇怪。

這裏是我使用的CSS代碼：

#header { 
    float: left; 
    width:100%; 
    height:75px; 
    background: #21a5d3; /* Old browsers */ 
} 

#portal { 
    position: fixed; 
    top: 75px; 
    left: 0px; 
    width: 100%; 
    bottom: 0px; 
    min-width: 100%; 
} 

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

這裏是HTML：

<div id="header"> 

</div> 
<div id="portal"> 
    <iframe src="http://www.bbc.co.uk/" id="iframeclass" frameborder="0"></iframe> 
</div>

，這裏是JQuery的我使用：

<script> 
    var widthRatio = $('#portal').width()/$(window).width(); 
    $(window).resize(function() { 
     $('#portal').css({width: $(window).width() * widthRatio}); 
    }); 
</script>

來源

2012-12-10 mickburkejnr

經過大量的谷歌搜索和試用nd錯誤，我設法避免（不解決）這個問題。

我基本上已經刪除了JQuery代碼，它會在任何瀏覽器中加載完美的窗口大小。我改變了#portal代碼如下：

#portal { 
    position: absolute; 
    top: 75px; 
    left: 0px; 
    height:92%; 
    width:100%; 
    bottom: 0px; 
    min-width: 100%; 
    -webkit-overflow-scrolling:touch; 
}

我不知道，如果-webkit-overflow-scrolling:touch;代碼實際上做任何事情，但我就是砍掉它我真的一點也不在乎，如果現在做或不。

這是蘋果自2011年以來已經知道的一個問題，但繼續進一步打破對這個問題的支持（不解決它）。真是一個絕對的笑話。

來源

2012-12-10 16:31:52 mickburkejnr

無法讓iFrame在iPhone，iPad和BlackBerry上的屏幕上滾動

回答

相關問題