私は混乱しています。メディアクエリをいじって、ウェブサイトをレスポンシブにしようとしています。
ほとんどの情報源によると、たとえばthis、スマートフォンに使用する mediq-query はmax-device-width: 480pxとmin-device-width: 320pxです。
しかし、これらのクエリを使用すると、Android 2.x はまだページの「コンピューター バージョン」を表示します。それで、クエリの値を変更し始めたところ、私の電話のデバイス幅が 980px のように見えることに気付きました..
何故ですか？私は本当にこれを把握したいです.980を使用しているときにそれが機能することに満足していることは確かですが、何が起こっているのか、そしてその理由を知りたいですか? つまり、私の携帯電話は幅 980 ピクセルまたは高さ 980 ピクセルである必要はありません。これは、何らかのピクセル密度の問題ですか?
この質問は古いことは知っていますが、これを見る将来の人にとっては、OPが適切なメタタグを設定していないことが原因である可能性が最も高いです。これをヘッダーに追加します。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
max-widthの代わりに使用してみてくださいmax-device-width。ピクセル密度の問題であるmax-device-width可能性があります-CSSピクセルではなくデバイスピクセルを報告している可能性があります。
テストページは次のとおりです。
これを本当に理解するには、Peter-Paul Koch の "A Tale of Two Viewports" を読んでください。
そしておそらく、モバイルデバイス向けの CSS を行うことに関する彼の推奨事項:
device-width に関する情報については、以下の URL を参照してください。
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml