Device Pixel Ratio, diğer adlarıyla CSS pixel ratio veya dppx, Türkçe adıyla ise cihaz piksel oranı olarak tanımlayabileceğimiz bu terimin ne işe yaradığından bahsedelim.
Device Pixel Ratio, Chrome’da F12’ye basarak açılan geliştirici araçlarında görülmektedir.
Resimde “2” değeri bulunan kutu device pixel ratio değeridir. Peki bu değer ne işe yaramaktadır?
Resimde ayrıca ekran çözünürlüğünün 360×640 olduğunu görebiliriz. Bu mantıksal çözünürlüktür. Cihazın fiziksel çözünürlüğü device pixel ratio ile mantıksal çözünürlüğünün çarpımıyla bulunur. Yani resimdeki cihaz için fiziksel çözünürlük 720×1280 değerindedir.
Vurgulanmak istenen şudur:
CSS ile media screen kontrolü yaparken cihazın fiziksel çözünürlüğü 720×1280 olsa da device pixel ratio değeri 2 ise site kodların ekranda görülmesini 360×640 değerine göre yapmalıdır.
CSS kodu ise şöyle olabilir:
|
1 2 3 4 5 6 |
@media only screen and (-webkit-min-device-pixel-ratio: 1.1), only screen and (-o-min-device-pixel-ratio: 11/10), only screen and (min-resolution: 120dpi) { /* 1.1 ve üstü dppx için kod*/ } |
Özellikle 1.1 oranın yukarısı için çalışacak kodları yazabiliriz. 1.5, 2, 2.5, 3, 4 dppx kapsar. Ancak bir tane daha yazalım ve üstteki kod 1.5 ve 2 için olmuş olsun.
|
1 2 3 4 5 6 |
@media only screen and (-webkit-min-device-pixel-ratio: 2.1), only screen and (-o-min-device-pixel-ratio: 21/10), only screen and (min-resolution: 240dpi) { /* 2.1 ve üstü dppx için kod*/ } |
