cssgoogle-chromegoogle-chrome-extensionmedia-queriesdevice-width

How to simulate device-width and orientation in browser to test media queries?


I'm developing my website locally and using Chrome to preview it as I go. While it's really easy to resize the browser to test media queries that use max/min-width, it's not possible from what I can tell to simulate max/min-device-width with any built in settings. Is there a Chrome extension that will simulate a mobile device and trigger media queries, specifically max/min-device-width and also orientation:portrait/landscape?

I basically would like some way to test this media query with Chrome on my computer rather than a smartphone:
@media only screen and (max-device-width: 600px) and (orientation: portrait)


Solution

  • Mobile device emulation is available as a built-in feature for Chrome, currently in the Beta channel. You need to enable it in the DevTools settings.