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