メディアクエリはモバイルFirefoxでは機能しますが、モバイルChromeでは機能しません

Question

モバイルデバイスでのメディアクエリの問題に直面しています。私はギャラクシーS6に私のウェブサイトをテストしてい

@media screen and (min-device-width : 320px) and (max-device-width : 480px){ 
/* Some styles*/ 
} 

： は、私はこのような何かを持っています。 Firefoxではすべてがうまく見えますが、スタイルは変わりますが、Chromeに同じウェブサイトをロードすると変更はなく、メディアクエリが機能しないように見えます。 Chromeに特別なクエリが必要ですか？

Answer 1

は、あなたのHTMLファイルのヘッダーにこのメタタグを追加します。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

これはあなたの問題を解決する必要があります。そうしないと、画面サイズがメディアクエリ基準を満たしていないため、ブラウザのサイズが変更されない可能性があります。

Answer 2

私もこの問題を抱えていましたが、それは@media queries nesting（現在Firefoxのみが実装しているもの）に関連していると思いました。それは私が扱っていた海外の巨大なCSSファイルであったため、各ルールをより限定的なクエリ（最小、最大、ピクセル比率と解像度の範囲）に分割するのに多くの時間を無駄にしました...

後で

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

別のテンプレートにして、別の行がありました：この行の後にことがわかっ

<meta name="viewport" content="width=639, initial-scale=0.5, maximum-scale=1.0, user-scalable=no"> 

これは、Firefox（モバイル）を除いて、最初のルールをオーバーライドしたが、それは実際に作成いくつかの問題：

• が639px以下のすべてのメディアクエリは、Chrome（またはデフォルトのAndroidブラウザ）では無視されていました。
• max-device-width構文のクエリも無視されていました（max-widthが有効です）。

私は、CSSのすべての問題をチェックする前に、まずビューポートに影響する可能性のあるすべてのメタタグを調べることをお勧めします。