Um Websites für Endgeräte mit unterschiedlicher Pixeldichte bzw. device pixel ratio zu optimieren, eignet sich der resolution–Mediaquery sehr gut:
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {}Während -webkit-min-device-pixel-ratio das Verhältnis von Gerätepixeln zu geräteunabhängigen Pixeln abfragt, checkt min-resolution ob eine Punktdichte von mindestens 192dpi erreicht ist. In einer hoffentlich nicht allzu fernen Zukunft soll sogar nur noch die device pixel ratio mit der Maßeinheit dots per pixel relevant sein- dann wird der Mediaquery so aussehen:
@media only screen and (min-resolution: 2dppx) {}(Lies: Wenn 2 oder mehr Gerätepixel auf ein geräteunabhängiges Pixel kommen, dann…)
