Responsive design mode in Safari

With Safari 9.0, Apple introduced a new mode that allows Safari to mimic how a website might preview on various mobile devices.

 It is just a preference you have to turn on in your preferences.

Here’s how to turn on Responsive Design Mode in Safari:

  1. Go to Safari > Preferences
  2. In the Advanced tab, click on Show Develop menu in menu bar.
  3. You should now have a new option available in your Safari menu bar.
  4. Under the Develop menu in your Safari menu bar, select Enter Responsive Design Mode.

Safari responsive design mode
This will allow Safari to mimic what a site looks like on various devices (an example is shown below).

Safari responsive design mode view

Note: You have to be viewing a web page in order to select Enter Responsive Design Mode in the Develop menu. If you are viewing Safari’s default start page, Enter Responsive Design Mode will be greyed out.