そもそも4:3モニターってなに?
地上波放送がデジタルに移行する前のテレビやビデオなどに採用されていたアスペクト比のモニターのこと。
現在の16:9のモニターが普及する前に、主流だったことから、『スタンダード』と呼ばれることもある。
解像度は『1280 x 720ピクセル』ぐらい。
※モニターによって解像度は前後することがあるかも!(ココは要確認かな?)
解像度依存で起きる障害とは、どんなもの?
【前提知識】
① デバイスピクセル
デバイスの物理的なピクセル数。
画面解像度のこと。
➁ CSSピクセル
デバイスに表示させる理論上(仮想的な)ピクセル数。
③ デバイスピクセル比
デバイスピクセルとCSSピクセルとの比率のこと。
【解像度依存とは???】
ココで問題となるのは ”CSSピクセル” なのです!
何が問題なのかというと、モニターによってデバイスピクセル(物理的なピクセル数)が違っていることにより、CSSピクセルで設定しているピクセル数とズレが生じてしまうことが問題となる。
仮にCSSで100×100pxと設定したとすると、
低解像度(4:3モニターなど)と高解像度(Retina:Macのモニター)で比較すると、デバイスピクセル、つまりは物理的なピクセル数が高解像度ほど、1px辺りの表示サイズがそもそも違うから、期待していた大きさと違う結果で表示されてしまうよねっというお話!
参考サイト
◆「解像度」の理解があいまいだったので備忘録としてまとめてみた
https://www.indetail.co.jp/blog/171208/