スマホ向け動作確認の際、なぜ画面サイズが解像度の半分になるのか？と聞かれて

Question

仮にGalaxyがあるとします。iPhoneでも問題ないです。
画面解像度は「1,560×720ピクセル」です。

■現在の状況
このスマホデバイスに向けた調整を行う際、そりゃあスマホ対応なんだから、と
当たり前のようにPCブラウザで横幅を半分の360pxとして動作確認を行なったのですが
「なんで半分にするの？なんで360pxで確認すれば大丈夫って言えるの？
分かりやすいように説明して」とのご要望が降ってきて、固まってしまいました。

画面解像度とブラウザ解像度にズレがある、ではまだダメなようです。
お互いリモートなので、実機を目の前にして説明することもできません。

■ご相談
どう説明するのが分かりやすいでしょう…
不勉強が祟ったためで恐縮なのですが、
参考になりそうな資料のリンクでも、もしご存知なら教えていただけると大変助かります。

Answer 1

デバイスピクセル比の話ですよね

UI設計をする上で必要な単位(CSSピクセル/デバイスピクセル)とは｜Nviveto｜note

これを分かったうえで、ターゲットデバイスを決めて設計するのなら良いのですが、何でもかんでもデバイスピクセルの1/2で確認すればいいやというのは確かにちょっと乱暴で説得力が無い気がします。

Comments

[spangl]

>ちょっと乱暴で説得力が無い気がします。
この点は本当におっしゃる通りです…。コメントありがとうございます。

Answer 2

画面解像度は「1,560×720ピクセル」です。

最近の高解像度ディスプレイの場合、論理的な解像度は、実際のピクセル数とは異なります。

Window.devicePixelRatio

実際に、widthやheightやdevicePixelRatioなどを表示するHTMLを作成して、実機で見てもらう、というのはどうでしょうか？

Comments

[maisumakun]

> まだダメなようです。

何がだめなのでしょうか？それ以外に理由はないです。

[spangl]

参考にいただいた通り、結局実機でサンプルページを作成して確認してもらい、
やっと「デバイスにおける解像度とブラウザにおける解像度は違う」ことを納得してもらうことができました。
ありがとうございました！