55

Since we're now in a mobile-first world, it becomes more and more important to be able to test websites easily on mobile phones, or on emulated mobile phones. I collaborate with people who work on websites and social media offerings, and I would like to encourage them to regularly open websites from their desktop browsers in a mobile view. I'm specifically thinking of the browser's built-in "mobile view" feature, which is often hidden among all the other developer tools a browser provides, but I'm happy to consider anything which is just as quick to set up.

How can you open a mobile view of a website from a desktop browser?

Improve this question
13
  • 24
    "Since we're now in a mobile-first world" Woah there a minute... context is for kings.
    – Lightness Races in Orbit
    Commented Feb 6, 2018 at 12:49
  • 3
    Just a comment - don't know the context really, but if I was asked to be opening webpages from my desktop/laptop in mobile view first ....what's the point of using the desktop? I hope by "encourage", you're not forcing it via some code or other method. Especially since many webpages that do format for mobile are pared down quite a bit and don't have full functionality.
    – BruceWayne
    Commented Feb 6, 2018 at 16:27
  • 1
    Add a change user agent or similar extension or plug in to your browser, and set a smart phone user agent.
    – Salman Arshad
    Commented Feb 6, 2018 at 17:10
  • 1
    “I would like to encourage people to regularly open websites from their desktop browsers in a mobile view.” ...That's goofy. And waste all that desktop screen real estate? Desktop and mobile both have their place, and that's why responsive solutions have been developed. Let's deliver the best experience possible for every user, and let people browse on the device that's most comfortable for them. Anyway, valid question, as web designers and developers need to emulate multiple devices when building sites.
    – Mentalist
    Commented Feb 7, 2018 at 2:52
  • 3
    @Mentalist I meant people who are working on websites and social media offerings.
    – Flimm
    Commented Feb 7, 2018 at 7:28

7 Answers 7

Reset to default
98

Firefox:

  • In Windows/Linux, press Ctrl+Shift+M
  • In macOS, press option+command+M

You can also find the menu item under ("Tools"), "Web Developer", "Responsive Design Mode".

Chrome and Edge:

You need to have "Developer Tools" open first:

  • In Windows/Linux, press Ctrl+Shift+I or just F12
  • In macOS, press option+command+I

Once developer tools is open and focused, you can toggle device emulation:

  • In Windows/Linux, press Ctrl+Shift+M
  • In macOS, press command+shift+M

There is a small button in the developer tools toolbar that enables device emulation, if you prefer to click a button rather than press a keyboard shortcut.

Safari:

It looks like Apple have disabled by default the keyboard shortcut for entering responsive design mode. You can follow this tutorial on configuring a keyboard shortcut for it.

You can find the menu item by clicking "Develop", "Enter Responsive Design Mode". If you can't see the "Develop" menu item, you need to enable it by opening "Preferences", "Advanced", and ticking "Show Develop menu in menu bar".

Improve this answer
7
  • 2
    Note that ctrl shift M works only if developer tools are already open
    – Naramsim
    Commented Feb 6, 2018 at 10:29
  • 3
    @Naramsim Thanks. That only applies to Chrome. I've edited my answer.
    – Flimm
    Commented Feb 6, 2018 at 11:19
  • 3
    For Windows/Chrome, F12 is a potentially easier way to get to Dev Tools... although if the next keystroke is going to be Ctrl-Shift-M, I suppose starting with Ctrl-Shift-I may be more logical.
    – sǝɯɐſ
    Commented Feb 6, 2018 at 13:21
  • I believe on previous versions of Safari Cmd+Shift+R would open responsive design mode. Seems to not exist on latest version unless you manually bind it
    – Downgoat
    Commented Feb 6, 2018 at 23:52
  • 1
    Chrome remembers if you wanted a mobile preview, so once you've enabled it, you can toggle between mobile/desktop simply using F12
    – Pieter De Bie
    Commented Feb 8, 2018 at 12:26
12

Flimm’s answer is 100% correct. Just in case remembering the shortcuts is too much of a hassle, it’s this blue button in the Developer Tools to toggle between the web view and mobile/tablet view:

chrome

Or with Firefox:

firefox

After enabling the device toolbar, you can then choose the make and model of the device you wish to emulate from the dropdown menu.

Improve this answer
6
  • 1
    What piece of software does the first part refer to?
    – Kamil Maciorowski
    Commented Feb 7, 2018 at 5:22
  • @KamilMaciorowski DevTools is the developer tool found in Chrome and Opera.
    – OptimusCrime
    Commented Feb 7, 2018 at 7:46
  • @KamilMaciorowski This is not a software, this is available on any of your web browser. Specifically if you're using chrome, right click on any window and click on inspect and you will see this window in your browser docked below or to the right of the browser. These are more commonly known as Dev Tools.
    – Shobhit Garg
    Commented Feb 7, 2018 at 16:13
  • @Shobbit Garg Is that the windows, which opens when I press CTRL + Shift + C?
    – daniel.heydebreck
    Commented Feb 8, 2018 at 8:22
  • @daniel.neumann Unfortunately I use mac, so I cannot test and see what happens when you press those keys. But referring to the shortcuts listed above, this window should open by pressing "ctrl + shift + I" on chrome, "ctrl + shift + M" on firefox or pressing f12 on IE/Edge.
    – Shobhit Garg
    Commented Feb 8, 2018 at 15:04
2

For the purpose of testing, i use the following websites :-

  1. http://www.jamus.co.uk/demos/rwd-demonstrations/
  2. http://mattkersley.com/responsive/

Both of the above sites allow me to view my web application in multiple device widths.

Improve this answer
1
  • "The connection to mattkersley.com is not secure" The other link won't open a site by giving its domain name.
    – David Spector
    Commented Jul 5 at 10:38
2

You can set the user agent and window size from the command line or launch config of a shortcut.

For example:

& "C:\Program Files\Google\Chrome\Application\chrome.exe" --new-window --window-size=375,812 --user-agent="Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Mobile Safari/537.36" --user-data-dir=C:\workspace\tmp\chrome https://google.com

The --user-data flag is mandatory to make this work. Create a folder for it.

Improve this answer
1
  • "Create a folder for it" means what?
    – David Spector
    Commented Jul 5 at 10:37
1

Add a "user agent switcher" extension in your browser and specify a mobile user agent. If the website is smart enough it will serve you mobile optimized version.

I will not recommend any specific extension. The ideal one should have presets for mobile browsers built-in and the ability to enable or disable user agent switching on per-website basis.

Improve this answer
4
  • 1
    This is incorrect. Mobile layouts should work based on device / screen dimensions via CSS media queries, not user agent strings - it's not 2006 any more.
    – PiX06
    Commented Feb 7, 2018 at 13:51
  • Most browsers' tool that allows a mobile view also lets you set a user-agent at the same time.
    – Flimm
    Commented Feb 7, 2018 at 14:33
  • 1
    @PiX06 then no effort is necessary. Just resize the browser window!
    – Salman Arshad
    Commented Feb 7, 2018 at 15:04
  • 1
    Unfortunately, I find myself with many questions: If I'm resizing the browser window anyway, why do I need to bother with user agents? To which dimensions should I resize the window? How do I measure the window?
    – Mathieu K.
    Commented Feb 9, 2018 at 5:26
0

The above answers are great for those who like to stick with a single browser, or have limited desktop "workspace" (eg. single monitor less than 21" at a low res).

There is actually an even more interesting solution I've recently discovered: https://blisk.io/

I will refrain from using the (sort of) "affiliate link" for any personal gain (There is a "token based system" that you can earn credits to get things like free "team cloud space" & "premium features" to use with it), but Blisk is actually pretty snazzy.

This Chromium-based "browser built for development" provides a multitude of ways to demo the page in various devices with a vertical "pane" on the LEFT side, much like you see Chrome Developer Tools default to the right vertical column.

It's work a look. Though there are some limits to its "freemium extended functionality", it still works very well to "preview" both the PC and Mobile versions of your pages / sites in a side-by-side comparison. The paid features seem pretty rad too if you work in remote teams (though I personally think it need a better "test drive" program before hooking people on the monthly cost).

Full disclosure: there is an EXTREMELY annoying "time limit" per day on the mobile preview part (toggles open/closed from the icon to the right of the address bar - change the "device preview" from the tiny link-to-the-menu in the top right corner "Show device list").

BliskDemoScreenshot

Also: I've found a few really nifty tricks with Browser Extensions like the 2 different "User-Agent Switcher"'s from Chrome/Firefox that go a bit further by letting you toggle between browser user-agent strings of various Operating Systems AND the browsers for them.

I prefer the "esolutions.se" flavor because of how easy it is to add custom user-agent strings to the list for as many customizations as you could ever want (runs offline also, which can be handy in certain cases): https://chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae

Anyway, that's my 2 cents. :P

Improve this answer
2
  • not available for Linux :-(
    – david.perez
    Commented Mar 3, 2020 at 14:52
  • Looks expensive. Lots of marketing.
    – David Spector
    Commented Jul 5 at 10:42
0

Online tool, limited to 5 requests every 5 minutes, lists popular cell phone models. https://www.responsivedesignchecker.com

Online tool, seems to work well, lists popular cell phone models. https://screenfly.org

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .