iOS で Iframe のサイズ変更の問題を解決する方法: CSS ソリューション?

CSS を使用して iOS での iframe のサイズ変更の問題を解決する

iOS デバイスで iframe が指定されたフレーム サイズをオーバーする問題が発生した場合、他のブラウザで正しく動作する場合、このガイドは解決策を提供します。

一言で言えば、iOS Safari は CSS で設定された従来の iframe サイズ変更制約に従わないため、内容に合わせて iframe のサイズが変更されます。これを解決するために、オーバーフローを制御するラッピング div を使用します。

<code class="css"><div class="frame_wrapper">
    <iframe class="my_frame">
        // Content
    </iframe>
</div></code>

次の CSS プロパティがラッパー div に適用されます。

<code class="css">.frame_wrapper {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* Additional CSS styles... */
}</code>

オーバーフロー プロパティは、オーバーフローの処理を制御します。コンテンツを自動に設定すると、必要に応じてスクロールバーが表示されます。 -webkit-overflow-scrolling プロパティは iOS デバイスに固有であり、洗練されたスクロール エクスペリエンスを可能にします。

このラッパー div 内に iframe をカプセル化することで、オーバーフローの動作を制御し、iOS Safari に必要な iframe のサイズに従うように指示します。 。ここで更新された例を確認できます: http://jsfiddle.net/R3PKB/7/

この解決策は、以前のスタック オーバーフローのディスカッションで確認されたように、iOS Safari の iframe 処理における長年のバグに対処します。

以上がiOS で Iframe のサイズ変更の問題を解決する方法: CSS ソリューション?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。