How to simulate pixel ratio to test media queries with Google Chrome or Firefox on Windows?
about:config hack on Firefox
You actually can using Firefox:
- Go to "about:config"
- Find "layout.css.devPixelsPerPx
- 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.
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.
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.
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