Chromeデバイスモードのエミュレーションメディアクエリが機能しない


94

何らかの理由で、デバイスエミュレーションモードがメディアクエリを読み取っていません。ブートストラップで作成した自分のサイトを含む他のサイトでは機能しますが、最初から使用しているメディアクエリでは機能しません(メディアクエリボタンをクリックするとボタンが青色に変わりますが、メディアクエリは表示されません)。以下のテストファイル。これはChromeのバグですか、それともファイルに変更が必要なものがありますか?

<!DOCTYPE html>
<!--
Media Queries Example 1
Sam Scott, Fall 2014
-->
<html>
<head>
    <title>MQ Example 1</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body { font-family: sans-serif; }
        h1 { color: red; } 
        h2 { color:blue; }
        p { color:green; }

        @media (max-width: 768px) and (min-width: 481px) {
            h1 { color: green; } 
            h2 { color:red; }
            p { color:blue; }
        }

        @media (max-width:479px), print { 
            h1,h2,p { color:black; }
        }

        @media print {
            body { font-family: serif; }
        }


    </style>
</head>
<body>
    <h1>I'm a first level heading</h1>
    <p>I'm a paragraph.</p>
    <h2>I'm a second level heading</h2>
    <p>I'm another paragraph.</p>
</body>
</html>

2
サム・スコット:@BananaNeilの答えは私のものよりも満足のいくものです。可能であれば、彼を最良の答えとしてマークしてください。
掘り出し物2016

回答:


247

ページにメタタグを追加することで、この問題を修正しました。

 <meta name="viewport" content="width=device-width">

更新(2019年12月):

次のように、初期スケールと最小スケールも設定する必要があるようです。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

7
これは私にもうまくいきました。これが問題を解決する理由はありますか?
リッチートーマス

@BananaNeil:このソリューションが機能する理由を知りたいのですが?何かご意見は ?
dreamweiver 2017

2
Chromeエミュレーターは、常に946pxページをレンダリングして、エミュレートしている画面のサイズに縮小しようとしているようです。問題のあるページのbodyタグの幅が常に946pxエミュレーターにあることを確認すると、これが当てはまることがわかります。ビューポートタグは、ページのレンダリングをブラウザに指示します。すべてwidth=device-widthwidth=100pxスケールアップしながら、期待どおりに動作します。詳細については、こちらをご覧ください:w3schools.com/css/css_rwd_viewport.asp
BananaNeil

2
ズームしすぎた場合にも、奇妙な動作をする可能性があります...入力できる寸法しか取得できません。あなたはCMDのシフトを行うとMacでは、 - 、最終的にはモバイルエミュレータのリストが...それでギャラクシーS5、iPhone 6などwtih再びポップアップする
JGFMK

1
これがデフォルトではないことを覚えておくのは難しいです;)
doublejosh 2017年

19

受け入れられた答えは私のためにそれをしませんでした、私minimum-scale=1も追加しなければなりませんでした。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

1
あなたは正しいです私はこの追加されたプロパティを知りませんでした
minimum

6

Chromeでのデバイスエミュレーションは引き続きWIPです。正直なところ、彼らはそれをChromeにプッシュするのが少し早すぎたと思います。Canary(Chromeベータブラウザ)を使用してエミュレーションをテストしてみてください。Chromeよりもはるかにうまく機能していることがわかりました。


0

私のために働きます。

ページのヘッドセクションにビューポートメタタグを配置するだけです。例を参照してください。

 <head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>

0

このメタタグをコードに含めます。

<head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>


0

画面サイズに応じて同じルールセットに対して複数の実装があることに気付くまで、同じ問題を抱え続けました。

同じメディアクエリの最小幅と最大幅の両方を指定して、後続のメディアクエリによって上書きされないようにします。

@media screen and (min-width:9px , max-width:9px) {

    css.selector { 

        style rules gets applied : in this range of screen sizes ;

    } 

}


css.selector{


    the other style get applied : starting from 10px ;

}

または、少なくとも1つのブレークポイントをすべてに設定します。

@media screen and (min-width:9px) {

    some styles get applied : starting from this point ;

}

}

@media screen and (min-width:99px) {

    some styles gets applied : starting from this point ;

}

}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.