Test Discourse in mobile screen emulator

Community wiki Developers
1

After some trial and error, I came to the conclusion that the built-in Mobile Emulation in Chrome is the best way to quickly preview Discourse pages on a mobile device.

Sure you can also just append ?mobile_view=1 to an URL, but the emulator has the added benefit of letting you select the screen profile of a specific device.

I also tested all of the most popular online screen emulators, but unfortunately Discourse doesn’t work on any of these. I assume they’re not made to handle JavaScript-heavy apps.

Edit: I asked Screenfly why Discourse wasn’t working, this is their reply:

Screenfly doesn’t work on every website. Most commonly, this is a security setting on the web server that disallows display inside of frames (like those used in Screenfly).

http://www.viewlike.us/

5 Likes
2

Yes, here’s how to do it in Chrome.

  1. (optional) Enter incognito mode so you don’t conflict with your existing browser instance cookies, etc.

  2. Press f12 to show developer mode.

  3. Press the “Show Drawer” icon

  4. In the expanded drawer, select the Emulation tab.

  5. Select the device you wish to emulate from the drop down list. I recommend Google Nexus 5/7 and Apple iPhone 5 as typical these days, at least for what we’re doing on Discourse. Bear in mind that Google Chrome is Blink so it is spiritually closest to Android Chrome at this point, if you want the most “realistic” emulated mobile device, that is it.

  6. Press the Emulate button.

  7. Make sure to turn off “touch” in the Sensors, otherwise mousing is a pain.

  8. Refresh the page via f5 or the refresh button.

  9. Collapse the expanded drawer by clicking the drawer icon again.

Now you’re using a “mobile device”, right in your regular desktop browser.

Pasted image370×652 19.3 KB

Just close the browser when you’re done.

3 Likes
3

This process changed a bit in the latest Chrome – the mobile emulation is much more sophisticated now:

  • you can specify simulated network delays
  • you can show media queries by width to identify which CSS (by width) is specifying the current layout
  • there’s a nice black grid background for visualizing layout sizes

But the basic process is the same, F12 to launch developer tools, then emulation.

1 Like