How can I quickly open a mobile view of a page in a desktop browser?
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:
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 open the device toolbar:
- In Windows/Linux, press Ctrl+Shift+M
- In macOS, press command+shift+M
You can also find the menu item by opening developer tools ("More Tools", "Develepor Tools"), and then clicking the icon that looks like a mobile phone in front of a table "Toggle device toolbar".
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".
Edge:
- Press F12 to open the developer tools, and then Ctrl+7 to open the "Emulation tab". Configure the device you want to emulate.
You can open the developer tools using the mouse by right-clicking inside the webpage, and choosing "inspect element".
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:
Or with 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.
For the purpose of testing, i use the following websites :-
- http://www.jamus.co.uk/demos/rwd-demonstrations/
- http://mattkersley.com/responsive/
Both of the above sites allow me to view my web application in multiple device widths.