web-dev-qa-db-ja.com

モバイルで@mediaクエリが機能しません。 Chromeで正常に動作します

私はこれを機能させようとしていますが、どういうわけかモバイルでは機能しません。 chromeツールを使用して画面サイズを上書きすると、正常に動作します。何が間違っているのかわかりません。

@media screen and (min-device-width : 320px) and (max-device-width : 480px) {
            .container .backgroundImage { display: none; }
}

enter image description here

ブラウザで表示すると、背景画像があります。 sモバイルで表示したときにその画像を削除したいのですが、どういうわけか機能しません。

==============

IPhone 3G、4、5、Android Galaxy Nexusでのテスト

cssgoogle-chromemedia-queries
32
patel.milanb

@Andyは正しいです。device-widthsを再確認するか、常にmin-widthを使用するだけで、すべてのデバイスの幅を知る必要はありません。

とにかく、<meta name="viewport" content="width=device-width,initial-scale=1.0">のようなviewportタグがあることを確認してください。

105
Adam Simpson

ファンタスティック-ビューポートも忘れてしまいました！すべてを注ぐ：追加するだけ

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

あなたの頭の中で

19
romedius33

これは古い投稿であることは知っていますが、最近このような問題が発生しました。メインのCSSスタイルシートからCSSメディアクエリを削除し、代わりにhtmlスタイルセクションでモバイルの特定のニーズを入力することで修正しました。なぜ機能したのかはわかりませんが、機能しました。

1
Pops Jones