2

2つのdivがあるページを作成しています。1つのdivはヘッダーとして使用され、もう1つのdivにはiFrameが含まれます。

現在、表示されているウィンドウのサイズに応じてiFrameのサイズを変更するために、いくつかのJQueryとCSSが連携しています。私はいくつかの初期テストを行いましたが、Firefox、Safari、Chrome、IE 9、およびAndroid2.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>
4

1 に答える 1

1

多くのグーグルと試行錯誤の末、私はなんとか問題を解決することができました（修正しませんでした）。

基本的に、任意のブラウザーにロードしたときに完全なウィンドウサイズを提供する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;コードがハッキングされたので、今実行されたかどうかは気になりませんでした。

これはAppleが2011年以来知っている問題ですが、この問題のサポートをさらに中断します（修正はしません）。なんて絶対的な冗談でしょう。

于 2012-12-10T16:31:52.170 に答える