# 在移动屏幕模拟器中的测试Discourse

**URL:** https://meta.discourse.org/t/test-discourse-in-mobile-screen-emulator/17155
**Category:** Developers
**Tags:** how-to
**Created:** [2014年七月3日 11:45 UTC](https://meta.discourse.org/t/test-discourse-in-mobile-screen-emulator/17155 "2014-07-03T11:45:09Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [2014年七月3日 11:45 UTC](https://meta.discourse.org/t/test-discourse-in-mobile-screen-emulator/17155/1 "2014-07-03T11:45:09Z")

</div>

After some trial and error, I came to the conclusion that the built-in [Mobile Emulation](https://developer.chrome.com/devtools/docs/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://quirktools.com/screenfly/](http://quirktools.com/screenfly/)

> **[Website Responsive Testing Tool](http://responsivetesttool.com/)**
>
> Check your website at different screen resolutions.

[http://www.viewlike.us/](http://www.viewlike.us/)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2014年七月12日 16:47 UTC](https://meta.discourse.org/t/test-discourse-in-mobile-screen-emulator/17155/2 "2014-07-12T16:47:29Z")

</div>

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.

 ![](https://global.discourse-cdn.com/meta/original/3X/1/4/14705d4104ee7d2fe2967a3bc8565ab683446848.png) 

Just close the browser when you’re done.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2014年十月12日 22:19 UTC](https://meta.discourse.org/t/test-discourse-in-mobile-screen-emulator/17155/3 "2014-10-12T22:19:24Z")

</div>

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.
