iOS Safari での IFrame の応答性の問題を解決するにはどうすればよいですか?

iOS Safari での IFrame の応答性の問題の解決

IFrame を使用して外部コンテンツを Web サイトに統合すると、最新のデバイスで応答性を維持する際に課題が生じることがよくあります。この問題は、IFrame がサイズを完全に適応できない可能性がある iOS Safari で特に顕著になります。

この問題を解決するには、まず根本的な原因を理解する必要があります。 IFrame コンテンツに内部スクロールバーがある場合、iOS Safari ブラウザは、スクロールバーのコンテンツ全体が収まるように IFrame のサイズを自動的に調整します。この動作は、望ましい応答性と矛盾しています。

解決策

この問題に対処するには、2 つの効果的なアプローチがあります。

1. IFrame コンテンツの変更

埋め込み IFrame のコンテンツ (Content.html など) を制御できる場合は、スクロール領域 (div#ScrolledArea) の CSS を変更できます:

#ScrolledArea {
    width: 1px;
    min-width: 100%;
    *width: 100%;
}

この CSS は最小幅を設定し、IFrame がビューポートの幅を超えないようにします。 min-width および *width の値は、iOS Safari のデフォルトの動作をオーバーライドします。

2. IFrame 要素の変更

IFrame コンテンツにアクセスできない場合は、IFrame 要素自体を操作できます:

iframe {
    width: 1px;
    min-width: 100%;
    *width: 100%;
}

ただし、この方法では、IFrame でスクロールバーが無効になっている必要があります。 Scrolling="no" 属性を使用する:

<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>

スクロールバーを無効にする必要がありますが、IFrame コンテンツの変更はそのまま残ります。 IFrame 内にスクロールバーを保持するための推奨ソリューションです。

どちらのソリューションでも、IFrame の幅が応答し、スクロール領域が意図したとおりに機能することが保証されます。

以上がiOS Safari での IFrame の応答性の問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。