1920×1080の解像度のモニターを使っているお客さんが「見づらい」というので、よくよく話を聞いたら「150%」で見ているという！
レスポンシブ対応とはいえ、そんな変な拡大率「150%」に合わせて綺麗にしてくださいなんて言わないでほしいと思いますよね？
……それ、ちょっと間違いです！
先に結論
1920×1080の解像度の150%、というのは「CSSピクセルが1280×720の端末」という意味です。
お客様は「150%」のときの話をしているのではなく、「1280×720」の画面で見たときに見づらいと言っています。
「1920×1080の解像度」という言葉に惑わされないでください。「1280×720」です。
わざわざ拡大してるわけじゃない。とりあえず「推奨値」を使っているだけ
導入で「ちょっと間違い」だったのはそんな変な拡大率「150%」に という部分。
Windowsの画面をよく見て見ましょう。
画面には「150%（推奨）」と書いてあります。
「推奨値」＝「デフォルト値」です。
つまりディスプレイの設定なんて触ったことない、普通の人はこの推奨値になっています。
それなのに「変な拡大率」と言われたら困ってしまうかも。
でもウチのWindowsは「100%（推奨）」だよ？
人によってはWindowsの推奨値は100%だよ？150%はヘンじゃない？と思う方もいるでしょう。
ややこしいことに、推奨値は「物理的な画面のサイズ」「物理的な画面のピクセル数」の組み合わせによって変化します。
つまり画面の密度が高いか低いか（高密度ディスプレイかどうか）によって推奨値はまちまちです。
低密度な普通の外付けディスプレイは100%、高密度な小型ノートパソコンだと200%、中型のノートパソコンだと125～150%くらいでしょうか。
「150%」って拡大しすぎじゃないの？
150%が「拡大しすぎ」かどうかも、「物理的な画面のサイズ」「物理的な画面のピクセル数」によって違います。
たとえば「16インチ」「1920×1080」なら「150%」は拡大しすぎですが、「12.3インチ」「2736×1824」なら「200%」でちょうどいいくらいです。
つまり「150%だと拡大しすぎ」かどうかは、デバイス次第ということです。
「物理的な画面のサイズ」「物理的な画面のピクセル数」によって推奨値や、実際の表示サイズがどうなるのかについては、以下の記事もご覧ください。
結局のところ 1920×1080の解像度の150%で見づらいって何なのか
1920×1080の解像度の150%で見ている、というのは「CSSピクセルが1280×720の端末で見ている」という意味です。
計算としては
1920 ÷ 1.5 = 1280
1080 ÷ 1.5 = 720
ですね。
これは例えばiPhone16で、たとえ仕様に 2556 x 1179だと書いてあっても、CSSピクセルとしては852 x 393pxとして考えるのと同じですね。
1280 x 720の画面で見ているから見づらい
- 1400～1920くらいの横幅を想定して作ったコンテンツを、1280pxの画面で見ているから見づらい
- 800～1000くらいの高さを想定して作ったコンテンツを、720pxの画面で見ているから見づらい
つまり見ている画面が小さすぎて見づらいうことです！ とくにWindows環境だとびっくりするほど高さが狭い！！
「1920 x 1080 で見ている人が一番多いので」と言うかどうか
「1920 x 1080 で見ている人が一番多いので、1280 x 720の画面はさすがに小さすぎ」というべきかどうか……。
Google Analyticsで見られる「ユーザーの環境の詳細: 画面の解像度」では1920×1080が一番多くて、1280×720は少ないので、ごく少数のユーザーなら少々見づらくても……と思いますよね。
しかし、当ブログの「ユーザーの環境の詳細: 画面の解像度」には「720×1280 mobile」とか「1080×1920 mobile」という情報が。これって「360×640」のAndroid端末だったりして……？
もしかしてGA4では物理的な画面のピクセル数で表示される場合もあるのでは……？
「390×844」でOSが「iOS」と取得できているものもあったため、CSSピクセルを取得している端末もあるはずですが、もしかしてもしかすると1920×1080で計測している中には、実はCSSピクセル1280 x 720で見ている端末が混ざっていたりして……？
（この辺りについて詳しいことをご存じの方がいたら教えてください！！）
7/31追記
@debiru_RさんにGoogleAnalyticsの解像度は論理解像度（この記事でCSSピクセルと呼んでいたもの）のはずだと教えていただきました！！ 1080×1920 mobileはタブレットなのかしら……。
なら1280×720は少数派だから大丈夫！ かというとこの表の下の方には以下のような数字も並んでいます。
- 1366×768
- 800×600
- 1280×800
- 1280×960
- 1200×750
- 1024×768
- 1280×721
- 1280×801
横1300px以下や高さ800以下の環境は「1280×720」以外にも複数あるので、「1280×720」の割合だけを見て少数派だと思い込まないようにしましょう。
また、GA4で取得できるサイズは画面の解像度だけで、昔のGA（UA）で取得できていたブラウザのサイズ（実際にブラウザはどの大きさで見ているか）は分かりません。1920×1080の画面上で1440×768くらいのウィンドウサイズで見ている人もいるかもしれないことは心にとめておきましょう。
※ なお「1920×1080が多い」というのも、サイトによって異なる可能性がありますのでご注意ください。
【例外】125～175%に設定されていることが原因で起きる問題もある
ここまでCSSピクセルが何ピクセルの画面で見ているかが重要だとお伝えしましたが、125～175%に設定されている場合に特有の問題もあります。
（これはWindowsの拡大縮小の問題というよりは、デバイスピクセル比に小数点がある場合の問題としてとらえるといいです）
小数点ピクセルの描画の問題：線幅
たとえば筆者のメインPCは125%が推奨値ですが、125%だと以下の記事で説明されているような「CSSで同じサイズなのに線のサイズがバラバラ」はしばしば発生します。
筆者的には「これはもう、そういうもんじゃい」という気持ちですが、以下の記事では「設定したい太さ（高さ）の2倍を指定し、scaleY(0.5) で半分にする」という解決方法が提示されていました。
小数点ピクセルの描画の問題：メディアクエリ
昔のメディアクエリの書き方ではありますが
PC用：@media (min-width: 768px) { … }
スマホ用：@media (max-width: 767px) { … }
みたいなCSSを書いてしまうと、とくに125～175%のときは画面幅に「767.5px」のような小数点ピクセルが発生しやすく、どちらのスタイルも当たってない瞬間が誕生します。
今だったら以下のように書いた方がよいでしょう。
@media (width < 768px) {
/* スタイル*/
}
@media (768px <= width) {
/* スタイル*/
}参考：https://zenn.dev/tonkotsuboy_com/articles/css-range-syntax
まとめ
Windowsのお客様から ディスプレイ設定 1920×1080の解像度の150%で見ているといわれたら
- CSSピクセルが1280×720の端末で見ていると思って話を聞こう
- 拡大率に気を取られないこと
- 小数点ピクセルの問題だけは例外的に拡大縮小率（デバイスピクセル比）次第で発生しやすくなる
コメント