ホームページ > ウェブフロントエンド > CSSチュートリアル > iOS Safari での IFrame の応答性の問題を解決するにはどうすればよいですか?

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

Mary-Kate Olsen
リリース: 2024-12-15 00:46:14
オリジナル
645 人が閲覧しました

How Can I Fix IFrame Responsiveness Problems in iOS Safari?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート