@media(max-width:〇〇〇px)を使用してのPCと高解像度スマホ画面のデザインを切り替えたい

CSS

PCとスマホで画面のデザインを切り替えたいときに、下記のコードのように@media(max-width:600px){}で600px以下の横幅で適用する属性と値を{}内に記述することは理解できました。

しかし、高解像度のスマホだと、横幅が1000ｐｘ前後のものもあり、上記の方法では、PCとスマホでどれくらいのpxでmax-widthを設定すれば良いのかわからなくなりました。

htmlで、<meta name="viewport" content="width=device-width, initial-scale=1.0">
を設定すると画面の大きさに合わせて表示されると知り設定しているのですが、横幅1000pxのスマホとPCとmax-widthとの関連や設定がわかりません。

お手数おかけしますが、ご教授お願いできないでしょうか。よろしくお願いいたします。

CSS
1/*スマホ用：横幅600px以下の場合 */
2@media(max-width:600px)｛
3　　　　・・・・・・
4　　　　・・・・・・
5　　　　・・・・・・
6｝

行動規範の内容に同意します

回答1件

ベストアンサー

最新のスマホだと横1400px以上のものもありますね。
一方で格安ノートPCだと未だに横1300px程度のものが売られていたりします。
なのにPCでWebサイトを見るとPCっぽく、スマホからアクセスするとスマホっぽく表示されます。なぜうまく表示されるのでしょうか。

それは「CSSピクセル」という考え方を使ってうまく処理しているからです。

この「デバイスの幅」というのは「実際の解像度の横幅」ではなく「CSSピクセルで考えたときの横幅」を使用します。
例えばiPhone Xは実際の解像度は横1125pxですが、CSSピクセルの解像度は横375pxです。
なのでiPhone Xからアクセスしたとき、Webサイトは横幅を375pxで描画しているんです。
375pxなんてすごく小さく感じますよね。

CSSピクセルの考え方は以下のページがわかりやすいと思いますので見てみてください。
https://qiita.com/imusam/items/cd4f8da49c3ab73d6475

投稿2020/02/21 17:25

KimTom

総合スコア134

shin555

2020/02/22 01:51

Kim Tomさん　回答ありがとうございます。回答を参考にCSSピクセル、リンクを参照しました。デバイスピクセル比のことを知り、自動でCSSピクセルに最適化していることを理解できました。これから端末のデバイスピクセル比のことをチェックしながら、サイトを作っていきたいと思います。本当にありがとうございました。

KimTom

2020/02/22 05:34

解決してよかったです！何pxで表示を切り替えるかは人によって微妙にバラバラだったりしますし、minを使うかmaxを使うかも状況によって変わってきます（モバイルのデザインからコーディングを始めたらminを使うことになりますね）。そこについてもネット上で「最適な設定」を解説してくれている記事がたくさんあるので調べてみると参考になるかもしれません。頑張ってくださいね。

行動規範の内容に同意します