Responsive Design View on Chrome / Safari or IE

Question

In Firefox it is possible for me to go to responsive design view by pressing ctrl + shift + m and I can adjust the context area to a size such as 720 * 720.

How do I do this on IE, Chrome or Safari?

score 4 · Answer 1 · answered Jul 25 '13 at 12:08

4

The new rewritten dev tools in IE11 will include a feature to allow you to set the resolution and orientation for the browser, for use with testing responsive layouts.

See here for more details.

(note, IE11 hasn't been released yet, but it is in preview if you want to try it out)

answered Jul 25 '13 at 12:08

Spudley

166,037
39
233
307

as well as IE 9+, see this link http://love2dev.com/#!article/Use-Custom-Resize-to-Make-The-IE9-Mobile-Experience – Chris Love Jul 25 '13 at 12:15
Microsoft loves to point to features it will include in their "next version" that other browsers had years ago. I'm pretty sure the OP is looking at current browsers, not unreleased ones. – Rob Jul 25 '13 at 12:20

score 4 · Answer 2 · answered Oct 10 '15 at 15:31

4

In Apple's Safari, your best option for diagnosing responsive views is using the following: -

Open Safari and click Safari > Preferences > Advanced
Enable the "Show Develop Menu in Menu Bar" option and close the preferences dialog
There should now be a Develop menu item at the top of your screen
Click the Develop menu and the option "Enable Resposnive Design Mode" or use the keyboard shortcut [Command] + [Option] + R. ⌥ + ⌘ + R

answered Oct 10 '15 at 15:31

spaceshipdev

101
1
10

@nivritgupta Excellent, glad I could help (: – spaceshipdev Feb 23 '16 at 22:39
Thanks. How can one accomplish this in mobile Chrome? – Kyle Vassella Apr 02 '17 at 16:48

score 3 · Answer 3 · answered Jul 25 '13 at 19:31

3

Here's a javascript tool I use on Safari and Chrome, though I'm not sure how it works in IE; very useful: http://responsive.victorcoulon.fr

answered Jul 25 '13 at 19:31

pygeek

7,356
1
20
41

+1 - pretty good but restrictive compared to Firefox version... thanks. – nicorellius Sep 12 '14 at 16:40

score 2 · Answer 4 · answered Jul 25 '13 at 11:33

2

There is no such thing in IE. Chrome has something similar when you are in dev tools by clicking on the gear in the right bottom corner as "overrides -> device metrics".

answered Jul 25 '13 at 11:33

Rob

14,746
28
47
65

re IE... there is no such thing **yet**. IE11 will have it. See my answer. – Spudley Jul 25 '13 at 12:10
You can actually do it in IE 9+ http://love2dev.com/#!article/Use-Custom-Resize-to-Make-The-IE9-Mobile-Experience You just need to use the F12 tools like all the other browsers – Chris Love Jul 25 '13 at 12:13
1

@ChrisLove What IE has is a resizer but not the same thing as what Chrome and FF offer with more tools and options. – Rob Jul 25 '13 at 12:28
@BreakoBreako I believe Safari has the same as Chrome but I'm at a customer site and can't check right now. – Rob Jul 25 '13 at 15:16
@ChrisLove The link is now https://love2dev.com/blog/use-custom-resize-to-make-the-ie9-mobile-experience/ – Joseph238 May 10 '17 at 16:49
thanks, I need to add 301 to the site. Added to the todo list ;) – Chris Love May 12 '17 at 12:34

score 2 · Answer 5 · answered Dec 10 '13 at 17:23

2

The option in my Chrome (32.0.1700.41 beta-m Aura) is "Overrides" -> "Show 'Emulation' view in console drawer". Then click the "Show console" icon found next to the gear icon.

answered Dec 10 '13 at 17:23

edhillis

143
1
5

score 0 · Answer 6 · answered Feb 20 '14 at 12:06

The easiest way to emulate screen resolutions in Chrome is to dock its Dev Tools to right side (there is the button in right top corner) and then drag its border (and optionally bottom browsers border). Chrome will show current viewport dimensions in its top right corner so you can to, say, 320x480px. It acts very similar to FF Responsive Design View.

score 0 · Answer 7 · edited Apr 13 '17 at 12:22

Chrome

First enable "Emulation" by going to Settings (Gear Icon) and check "Show 'Emulation' view in console drawer" Now, close the settings panel, and press Esc and you'll get an Emulation tab. You can do a lot of changes there. Changing the screen size, emulating touch, accelerometer, user-agent spoofing, etc.

If you are getting the warning "chrome screen emulation is not available on this page", (probably you're in Linux, where chrome has disabled some things right now), then you'll need to change a [[chrome://flags][chrome://flags] options follow up this solution

IE11

For IE 11, the F12 Developer Tools have a dedicated tab for changing device metrics, etc.

I don't use Safari, so I can't say about it.

Responsive Design View on Chrome / Safari or IE

7 Answers7

Chrome

IE11