Edit Question - KnowledgeHub

Title Body

While it is easy to test different screen resolutions in Google Chrome i wonder how developers could test different device pixel ratios underlying the following CSS media queries. /* Pixel ratio of 1. Background size is 100% (of a 100px image) */ #header { background: url(header.png); } /* Pixel ratio of 1.5. Background-size is 1/1.5 = 66.67% (of a 150px image) */ @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { #header { background: url(headerRatio1_5.png); background-size: 66.67%; } } /* Pixel ratio of 2. Background-size is 1/2 = 50% (of a 200px image) */ @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { #header { background: url(headerRatio2.png); background-size: 50%; } } Does there exist any way or a browser extension to mimic device pixel ratio?

Tags (comma-separated) Cancel