ホームページ >ウェブフロントエンド >CSSチュートリアル >iOS Safari でレスポンシブ IFrame を適切に動作させるにはどうすればよいですか?
iOS Safari のレスポンシブ IFrame
最新の Web では、コンテンツを Web サイトにシームレスに統合するためにレスポンシブ IFrame が不可欠です。理論的には、IFrame の幅を 100% に設定すれば十分ですが、実際には、この方法では iOS Safari で問題が発生する可能性があります。
課題
IFrame のコンテンツが内部スクロール バーでは、iOS Safari では、IFrame の幅が100%。この動作により、オーバーフローしたコンテンツがマスクされる可能性があります。
解決策
この問題を修正し、iOS Safari で IFrame の応答性を確保するには、次の 2 つのオプションがあります。
オプション 1: IFrame を変更するコンテンツ
IFrame 内のコンテンツを制御する場合は、オーバーフローを使用して div の CSS を変更します: 以下までスクロールします:
width: 1px; min-width: 100%; *width: 100%;
この手法は iOS Safari のデフォルトの動作をオーバーライドし、 div の幅を強制的に 100% にし、オーバーフローを許可します。 hidden.
オプション 2: IFrame 自体を変更する
IFrame コンテンツを変更することが不可能な場合は、同じ CSS を IFrame 自体に適用できます:
iframe { width: 1px; min-width: 100%; *width: 100%; }
ただし、このオプションでは、次を使用して IFrame のスクロールバーを無効にする必要があります。 scrolling="no":
<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>
結論
提供された解決策のいずれかに従うことで、水平スクロールに対応しながら、iOS Safari で IFrame の応答性を維持することができます。コンテンツ内の領域
以上がiOS Safari でレスポンシブ IFrame を適切に動作させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。