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

iOS Safari の応答性の高い iFrame

iOS Safari で iFrame を使用してコンテンツを統合する場合、特に iFrame のコンテンツに次のものが含まれる場合、応答性の達成が困難になることがあります。水平スクロール領域。

iOS のデフォルトの動作

iFrame のコンテンツが完全に応答し、内部スクロール バーを使用せずにサイズを調整できる場合、iOS Safari はそれに応じて iFrame のサイズを変更します。

オーバーフローの問題

ただし、iFrame のコンテンツに overflow:scroll を追加すると、この動作が中断される可能性があります。この問題が発生すると、iOS Safari は iFrame のサイズを自動的に変更して、あふれたコンテンツが表示されるようにします。

解決策

• iFrame コンテンツの変更: オーバーフローする div の幅を設定します (例: #ScrolledArea) to:

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

  これにより、iOS Safari は min-width 値を尊重し、div の幅が iFrame の幅と一致するようにします。

• iFrame の変更: iFrame のコンテンツにアクセスできない場合は、同じ CSS を iFrame に適用しますそれ自体:

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

  これを機能させるには、iFrame でscrolling="no" を使用してスクロールバーを無効にする必要があります。

これらのソリューションのいずれかを実装すると、 iOS Safari では、コンテンツに水平スクロールが含まれる場合でも、応答性の高い iFrame を実現できます。

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