CODEWITHSUNDEEP
cssgoogle-chromegoogle-chrome-extensionmedia-queriesdevice-width
Jordan H
Jordan H

Reputation: 55725

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)

Upvotes: 8

Views: 6108

Answers (2)

rsanchez
rsanchez

Reputation: 14657

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.

Upvotes: 9

user1647347
user1647347

Reputation: 507

Give this one a try...I think it's exactly what you need... https://chrome.google.com/webstore/detail/responsiview/kcemonjjmilbiepahkhanlkddonpjlep?hl=en-US

Upvotes: 0

Related Questions