iOS Safari で Iframe のサイズ変更の問題を解決する方法: 一貫した表示のための回避策?

iOS の iframe サイズ: Safari のサイズ変更異常の修正

特定のシナリオでは、過剰なコンテンツを含む iframe が iOS デバイスで正しく表示されない場合があります。コンテンツのオーバーフローやスクロールが可能な他のブラウザとは異なり、iOS の Safari はコンテンツに合わせて iframe のサイズを自動的に変更します。

この動作は、CSS を通じて iframe サイズを制御するという意図に反しています。この問題に対処し、プラットフォーム間で一貫した iframe サイズ設定を確保するには、回避策を実装する必要があります。

解決策: オーバーフローの抑制

特定の CSS を使用して追加の div 要素を追加することにより、プロパティを使用すると、iframe が意図した寸法を保持し、オーバーフロー スクロールを有効にすることができます。変更された HTML コードは次のとおりです:

<code class="html"><div class="frame_holder">
  <div class="wrapper">
    <iframe class="my_frame">
      // The content
    </iframe>
  </div>
</div></code>

対応する CSS:

<code class="css">.frame_holder {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
  background: #ffffff;
}

.wrapper {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.my_frame {
  width: 100%;
  height: 100%;
  border: 1px solid #e0e0e0;
}</code>

.wrapper div は overflow: auto; を導入し、これによりラッピング div 内で垂直スクロールが可能になります。 webkit-overflow-scrolling: touch;、iOS デバイスでのスクロール パフォーマンスを最適化する Webkit 固有のプロパティ。

この回避策により、iframe のサイズが維持され、iOS と iOS の両方で一貫した適切なユーザー エクスペリエンスが提供されます。 iOS 以外のデバイス。

以上がiOS Safari で Iframe のサイズ変更の問題を解決する方法: 一貫した表示のための回避策?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。