8

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)

Jordan H
  • 52,571
  • 37
  • 201
  • 351
  • If you can't find it by googling it probably doesn't exist. I don't rely on browser resizing, best to test it on actual devices or join crossbrowsertesting.com and avoid the simulators, they have lots of devices. Also, there's http://mattkersley.com/responsive/ for just looking at various sizes. – Christina Dec 15 '13 at 22:41
  • I need a local solution. I don't want to tweak, upload, refresh, repeat. Otherwise I'd just use my physical devices. A Chrome extension would be perfect! – Jordan H Dec 15 '13 at 23:16
  • See [Faking max-device-width](http://stackoverflow.com/questions/6149131/faking-max-device-width). Answer from user _wasabi_ may help you if you are using Chrome. – Anto Jurković Dec 15 '13 at 23:51
  • @AntoJurković Thanks, but that unfortunately didn't do the trick. It did not render various UI elements at the correct size, including font and SVG files. – Jordan H Dec 16 '13 at 04:52
  • 2
    Mobile emulation is available in the Beta Channel http://blog.chromium.org/2013/12/chrome-devtools-for-mobile-emulate-and.html https://developers.google.com/chrome-developer-tools/docs/mobile-emulation – rsanchez Dec 16 '13 at 08:49
  • Thanks @rsanchez! That improved emulator is working much better. Still not perfect. It still renders the font too large compared to what it actually looks like on a real iPhone, but this is good enough. :) Care to state that as an answer? – Jordan H Dec 18 '13 at 02:45

2 Answers2

9

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.

rsanchez
  • 14,467
  • 1
  • 35
  • 46
0

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

user1647347
  • 507
  • 1
  • 8
  • 23
  • Thanks, but I actually tried that extension before posting. The problem with this is that it doesn't simulate `device-width` - only regular `width`. Also, doesn't work at all for local files. – Jordan H Dec 16 '13 at 05:11
  • Seems to simulate device width for me. Not sure about local testing, I'm only using it with live examples. – user1647347 Dec 16 '13 at 14:49