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

5.9k views Asked by At

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)

2

There are 2 answers

0
rsanchez On BEST ANSWER

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.

2
user1647347 On