レスポンシブ IFrame が iOS Safari で動作しないのはなぜですか?

iOS Safari で IFrame をレスポンシブにする方法

IFrame を使用して Web サイトにコンテンツを組み込む場合、IFrame がコンテンツを保持することが重要です。その応答性。 HTML または CSS を使用して IFrame の幅を 100% に設定するのは簡単そうに見えますが、iOS Safari には独特の課題があります。

外部スクロールを備えた応答性の高い IFrame

IFrame の幅がコンテンツは完全に応答し、内部スクロールバーは必要ありません。iOS Safari では、IFrame のサイズが自動的に変更されます。

内部スクロールを備えた応答性の IFrame

ただし、IFrame コンテンツに水平スクロール領域が含まれる場合、問題が発生します。 iOS Safari は、オーバーフロー設定を無視して、スクロール領域が完全に表示されるように IFrame のサイズを変更します。

解決策

この問題に対処するには、次の 2 つの解決策があります。

IFrame を変更するコンテンツ:

1. IFrame のコンテンツ内のスクロール div の幅 (例: div#ScrolledArea) を次のように設定します:

   width: 1px;
   min-width: 100%;
   *width: 100%;

   ログイン後にコピー
2. This div の幅が IFrame の幅より小さいことを保証しますが、それでも占有できるようにします利用可能なスペースの 100%。

IFrame 要素を変更します:

1. IFrame のコンテンツにアクセスできない場合、同じ CSS を IFrame に適用できますそれ自体:

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

   ログイン後にコピー
2. さらに、scrolling="no" 属性を使用して IFrame のスクロールバーを無効にします。

以上がレスポンシブ IFrame が iOS Safari で動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。