Responsive Design View on Chrome / Safari or IE Responsive Design View on Chrome / Safari or IE google-chrome google-chrome

Responsive Design View on Chrome / Safari or IE


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)


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

  1. Open Safari and click Safari > Preferences > Advanced

  2. Enable the "Show Develop Menu in Menu Bar" option and close the preferences dialog

  3. There should now be a Develop menu item at the top of your screen

  4. Click the Develop menu and the option "Enable Resposnive Design Mode" or use the keyboard shortcut [Command] + [Option] + R.⌥ + ⌘ + R


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