内部スクロールバーがある場合でも、iOS Safari で IFrame を応答させるにはどうすればよいですか?

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

問題の説明

IFrame を使用してコンテンツを Web サイトに統合するには、IFrame がレスポンシブである必要があります。 iframe 幅を 100% に設定するなどの基本的な CSS ソリューションでは十分ではない場合があります。ただし、iframe コンテンツに内部スクロール バーがある場合、応答性の実現は特に困難になります。

スクロール領域を備えた応答性の高い IFrames

コンテンツにスクロール領域が含まれている場合でも、iOS Safari で IFrame を応答性を持たせるには、次のようにします。 2 つのオプションがあります:

オプション 1: Content

1. iframe コンテンツのスクロール可能領域 (例: div#ScrolledArea) の幅を次のように設定します。

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

2. これにより、iOS Safari は次のように強制されます。 iframe のサイズを適切に変更し、スクロール領域が機能できるようにします。

オプション2: iframe を変更します

1. iframe コンテンツにアクセスできない場合は、次の CSS を iframe 自体に適用できます:

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

2. ただし、iframe にscrolling="no"を追加して、iframe内のスクロールを無効にする必要があります。 HTML:

   <iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>

注

オプション 2 では、iframe でのスクロールを無効にすると、iframe コンテンツのスクロール領域を使用できなくなります。ただし、iframe コンテンツを変更すると (オプション 1)、スクロール機能を保持できます。

以上が内部スクロールバーがある場合でも、iOS Safari で IFrame を応答させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。