ピクセル数以外でのモバイル表示の方法

Question

ピクセル数によってCSSの適用範囲を変えることが出来ますよね。ですが最近は高解像度のスマホが増え、また同じインチ数でも画素数が違うということもあると思います。ピクセル数以外でCSSの適用範囲を変える方法はないでしょうか？

SKE48の公式サイト

上記のURLだと、パソコンで表示した場合とスマホで表示した場合でスタイルが異なります。パソコンでブラウザを縮小してもスタイルは変わりません。ということは

@media screen and (min-width:1200px);

のような記述でCSSの適用範囲を変えている訳ではなく、何か別の方法でパソコンとスマホのスタイルを分けているんだろうな。それってどんな方法なんだろうなと思い質問を投稿しました。

Comments

[kei344]

「表示を変える」とは？具体的に記述してください。

[usui_orange]

すみません。質問文が雑すぎましたね....。編集しました...！

Answer 1

当該サイトは見ていないので、一例を。

@media (pointer: fine) {
  /* おそらくPC */
}

@media (pointer: coarse) {
  /* おそらくスマホ */
}

https://developer.mozilla.org/ja/docs/Web/CSS/@media/pointer

メディアクエリはたくさんあるので見てみるといいかもしれません。
https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries

Comments

[usui_orange]

ありがとうございます！

Answer 2

JavaScriptでもPHPなどのサーバ言語でもUser agentを取得する方法があり、そこからモバイルかどうかの判別を行ってスタイルを振り分ける方法もあります。