How to simulate pixel ratio to test media queries with Google Chrome or Firefox on Windows?

43
votes

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?

5
csstestingmedia-queries
Chrome supports this in a very convenient way starting with version 32 (see my answer below). For Firefox, andrewb's answer still applies. – rob74
Possible duplicate of How to test a webpage meant for Retina display? – Szabolcs Páll
Note that -moz-min-device-pixel-ratio is deprecated, see developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/… for more details and newer methods. – andrewb

5 Answers

48
votes

about:config hack on Firefox

You actually can using Firefox:

  1. Go to "about:config"
  2. Find "layout.css.devPixelsPerPx
  3. Change it to your desired ratio (1 for normal, 2 for retina, etc.)

Refresh your page - boom, your media query has now kicked in! Hats off to Firefox for being awesome for web developing!

This was done on Windows 7 with Firefox 21.0.

Zooming on Firefox & Edge

Currently on Firefox and Edge, if you zoom it triggers dppx-based media queries. So this easier approach may be sufficient, but be aware that the functionality is reported as a "won't fix" bug for Firefox, so this could change.

26
votes

The Chrome DevTools have a feature called "Device Mode & Mobile Emulation" available in Chrome 32 and higher. It is described in detail here. Here's a video tutorial from Google's DevBytes YouTube channel.

Open DevTools by pressing F12 (or Shift+Ctrl+I / Cmd+Opt+I on Mac). In current Chrome versions, click the "smartphone" icon in the upper left corner of the DevTools window to activate Mobile Emulation. You can change most of the settings (device type, screen resolution & rotation, zoom factor...) in the toolbar on the emulation screen. For further options, click "..." on the right side of the toolbar.

enter image description here enter image description here

In older versions of Chrome, you may have to enable the feature before you can use it: in DevTools, click the Settings icon (cogwheel), then click "Overrides" and select "Show 'Emulation' view in console drawer". Then, click the ">=" icon to the left of the Settings icon to show the "console drawer" and you should see an "Emulation" tab, where you can enable the emulation and change the settings.

4
votes

Volker E. is correct in that pixel-ratio media queries will not be triggered.

It is, however, possible at least to preview the visual appearance (read: scaling) of media queries for devices which are 1.5x, 2x, etc.

Just specify your desired resolution in Chrome Dev Tools, and make sure "Fit in window" is selected. Then, resize your browser window appropriately.

enter image description here

Example: to emulate a Galaxy Nexus in landscape mode, just enter 720x1280 as the dimensions, and then resize your browser window to be 640px wide. Voila! You have now emulated the device's 2x pixel ratio.

(device width [in pixels]) ÷ (device pixel ratio) = the size your window must be

1
votes

derrylwc has a good suggestion but did not include instructions:

  • Open the developer tools (ctrl-shift-i or command-alt-i)
  • Click the gear on the bottom right corner for settings
  • Choose the "Overrides" tab (on the left side)
  • Click "Enable" and "Enable on DevTools startup"
  • Check "Device metrics" and customize. "Font scale factor" appears to be the device pixel ratio.
-4
votes

You are just able to test the media query corresponding to the device pixel ratio on your specific device, you're looking at it's browser while testing.
The device pixel ratio is a device specific unchangeable number because it takes in account the devices available physical pixels. See ppk's research on devicePixelRatio

So it's basically not possible to mimic a different device pixel ratio than the device's very own. Still you can smoke test your code f.e. rather simply by applying a different media query rule.

Take care about min-device-pixel-ratio: 1.5 as newer HDPi devices like Nexus 7 have 1.3 device pixel ratio.