Menu
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)
664
Media queries can also be used to change layout of a page depending on the orientation of the browser.
Use a comma to specify two (or more) different rules: @media screen and (max-width: 995px), screen and (max-height: 700px) { ... } Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others.
Media queries can be used to check many things, such as: width and height of the viewport. width and height of the device. orientation (is the tablet/phone in landscape or portrait mode?)
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.
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
