2

iFrame内のコンテンツのメディアクエリ内のスタイルに問題があります。私のサイトにはiFrameが埋め込まれています。iFrame内のコンテンツにはスタイルがあります。私のiFrameの幅は480pxです。メディアクエリ@mediascreenがあり、この中に(max-width:480px)iFrame内のコンテンツにスタイルを追加しています。

問題は、サイズ1900px幅(iFrameサイズは同じ480px)のデスクトップブラウザでページを開くと、max-width:480pxのメディアクエリ内のスタイルが適用されることです。しかし、iPadで同じページを開くと、メディアクエリのiFrame幅を考慮せず、画面幅を取得して768px幅のメディアクエリスタイルを適用します。

私の知る限り、iFrameにはhtmlページ全体が含まれているため、iFrame幅を使用する必要があり、iFrame幅のメディアクエリスタイルをレンダリングする必要があります。iPadの問題を解決する方法を教えてください。

4

1 に答える 1

6

iframe の幅もビューポートに依存するため、次のように設定してみてください。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0;" />

さらに、ipad などの特定のデバイスをターゲットにする必要があり、iframe にコンテンツがある場合は、min-device-width を使用して iframe が特定のデバイス内にあるかどうかを判断することを検討してください。

于 2013-12-30T11:23:39.817 に答える