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

Question

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?

Answer 1

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.

Answer 2

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.

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.