0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

4:3モニターの解像度依存が原因で変な挙動が起きるって、どういうこと???

Posted at

そもそも4:3モニターってなに?

地上波放送がデジタルに移行する前のテレビやビデオなどに採用されていたアスペクト比のモニターのこと。
現在の16:9のモニターが普及する前に、主流だったことから、『スタンダード』と呼ばれることもある。
解像度は『1280 x 720ピクセル』ぐらい。
※モニターによって解像度は前後することがあるかも!(ココは要確認かな?)

解像度依存で起きる障害とは、どんなもの?

【前提知識】

デバイスピクセル
 デバイスの物理的なピクセル数。
 画面解像度のこと。
CSSピクセル
デバイスに表示させる理論上(仮想的な)ピクセル数。
デバイスピクセル比
 デバイスピクセルとCSSピクセルとの比率のこと。

【解像度依存とは???】

ココで問題となるのは ”CSSピクセル” なのです!
何が問題なのかというと、モニターによってデバイスピクセル(物理的なピクセル数)が違っていることにより、CSSピクセルで設定しているピクセル数とズレが生じてしまうことが問題となる。

仮にCSSで100×100pxと設定したとすると、
低解像度(4:3モニターなど)と高解像度(Retina:Macのモニター)で比較すると、デバイスピクセル、つまりは物理的なピクセル数が高解像度ほど、1px辺りの表示サイズがそもそも違うから、期待していた大きさと違う結果で表示されてしまうよねっというお話!

image.png

参考サイト

◆「解像度」の理解があいまいだったので備忘録としてまとめてみた
https://www.indetail.co.jp/blog/171208/

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?