web-dev-qa-db-ja.com

iframe内で機能しないメディアクエリ

私はレスポンシブなウェブページを持っています。メディアクエリを利用します。

ただし、iframeに読み込まれた同じページは機能しません。

たとえば、私のウェブページで、画面の幅が640px未満の場合、背景色を赤に指定しています。

@media only screen and (max-device-width : 640px) {

    .header-text {
        background-color: red;
    }
}

そのため、そのウィンドウを新しいタブに読み込み、ブラウザの幅を640px未満にすると、背景色が赤になります。

ただし、320 * 480のサイズのiframeに読み込まれた同じウィンドウには、背景色が赤ではありません。

Iframeでメディアクエリを機能させる方法は？

htmlcssiframemedia-queries
25
Aniket

deviceの代わりにこの方法を試してくださいwidthをターゲットにするだけです

変化する

@media only screen and (max-device-width : 640px) {

に

@media only screen and (max-width : 640px) {

また、スタイルシートのメディアクエリ宣言の順序を考慮しない場合は、minとmaxの両方のビューポート幅をターゲットにすることをお勧めします

@media screen and (min-width: 320px) and (max-width: 640px) {
    .header-text {
       background-color: blue;
    }
}
33
NoobEditor

IframeをロードするHTMLにメタベローズを含めると、少なくともAndroidデバイスで機能します。

<meta name="viewport" content="width=device-width, initial-scale=1">
10
Kiko

私はiframeの幅をターゲットにしなければならなくなりました。 （すべての状況で機能しない場合があります）
しかし、私がしたことはiframeを100％幅にし、ウィンドウに合わせてサイズを変更することでしたので、ウィンドウの代わりにiframeのpxをターゲットにしました。

6
James Harrington