无法让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>

答

经过大量的谷歌搜索和试用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年以来已经知道的一个问题，但继续进一步打破对这个问题的支持（不解决它）。真是一个绝对的笑话。

无法让iFrame在iPhone，iPad和BlackBerry上的屏幕上滚动

相关推荐