ピッタリデザインのつもりが全然ピッタリにならなかった。なんで？

Question

質問内容

画面サイズ1920×1080を想定してデザインをしており、そのデザインをHTMLcssにおこした際に画面はばピッタリのはずがかなり大きく表示されてしまいました。これが正常なのですか？

正常であれば何×何でデザインをすれば良さそうな感じですか？

そしてもし異常であれば思い当たる解決法などありましたらお書きくださると幸いです。

環境

MacBook Air
Google Chrome
Adobe XD
VS CODE

かなり初歩的な質問で申し訳ないです。

Comments

[recal]

その問題のあるソースを貼ってください。

[m.ts10806]

この内容では初歩的かどうかすら分かりません。
他者が問題を再現できるようご配慮願います

Answer 1

ソースコードが何も書かれていないので、
完全に憶測で回答いたします。

かなり大きく表示されてしまいました。

質問者さんがmacOSであることことから、
Retinaディスプレイである可能性が非常に高いです。
これは、通常のディスプレイよりも、
1インチあたりの画素数が多く、その分綺麗に表示されるものです。

ただし、デザインを起こし、同じピクセル数で、CSSなどを組むと、単純に2倍になります。

これを理解するには、論理ピクセルと物理ピクセルを理解する必要があります。

デザイン上では、1920pxだとしても（物理ピクセル）Web画面上では、半分の960px（論理ピクセル）として扱われるため、
その場合、デザイン上の大きさの1/2の大きさでCSSなどを組む必要があります。

つまり、同じ現実的な物理サイズに、2倍のピクセル数を詰め込めるため、より鮮明な画面表示が可能になるのが特徴ということです。

なので、画像などの物理ピクセルの大きさはそのままに、
CSSなどはデザイン上の1/2の数値を使って、組んでみてはいかがでしょうか。

Answer 2

完全に位置まで指定したデザインが必要ならpdfを検討ください
htmlにこだわるならsvgなどでもよいかもしれません。
基本的にブラウザのウィンドウサイズは可変ですし、拡大縮小も自由にできるのが
HTMLのいいところですから、あまりabsoluteな位置指定にこだわるのはやめたほうが良いと思います。