Safari 9 brings Responsive Design preview mode

NewSafariIconXWith the advancement of Web content towards mobile platforms, if you are a developer then you may need to test various sites on different devices to ensure compatibility. With Safari 9.0, Apple has introduced a new mode that allows you to view any Web page as if you are using a different device, such as an iPad, or an iPhone.

To use this feature, you will need to enable it from the Develop menu that is hidden by default:

  1. Open Safari’s preferences
  2. Go to the Advanced section
  3. Check Show Develop menu in menu bar (at the bottom)

With this feature enabled, close the preferences and you will see a new Develop menu, in which you can see an option to Enter Responsive Design Mode. This can also be invoked by pressing the Option-Command-R hotkey.

When in this mode, you will see the currently loaded Web page, along with a number of controls for managing it in different views. Along the top is the current window constraints, along with a multiplier that you can set. You can also choose the browser user agent (the identifier that it communicates to servers for receiving pages most compatible with the current browser platform).

Underneath these settings are a set of page size constraint presets, which include various iPhone and iPad models, along with some classic screen resolutions. These will allow you to see what the browser page will look like on these devices, and when clicked, the browser view should resize accordingly.

While these presets give you some options, if you have another page size you would like to test, then you can do so by clicking and dragging the faint indicators along the sides of the page preview, which will expand the side accordingly.

Safari 9 Responsive Mode

Safari’s new Responsive Preview mode allows you to view the current Web page as it would appear on any iOS device.

While such options are likely mostly useful for developers, they can also provide utility for users of these sites. For instance, if you have a site that is not working properly in full view on your Mac, then instead of adjusting settings, or giving up and trying to load the site on your iPhone or iPad, you can attempt to view it in this mode. However, overall it may just be fun to mess around with.

Safari 9 is currently not available for the general public, and has been distributed as part of a developer seed program. If you are not part of Apple’s testing programs and wish to try various software the company makes available for testing, then you can sign up here.

7 thoughts on “Safari 9 brings Responsive Design preview mode

  1. MaX

    “With this feature enabled, close the preferences and you will see a new Develop menu, in which you can see an option to Enter Responsive Design Mode. This can also be invoked by pressing the Option-Command-R hotkey”.

    Neither of them work here on Mac 10.10.4 (14E46) Yosemite. No submenu and nothing happens after the hotkeys.

    1. Ira Lansing

      Are you using Safari 9? The article said this version was required AND this version is only in a release to developers.

  2. xAirbusdriver

    I have a simple web site that depends on CSS for changing its display on mobile devices, mainly based on screen width. This function would have saved a lot of window width futzing!!! 😉

    As for enabling the Develop Menu, I’ve done that for quite a while. I just use the check box in the “Advanced” tab in Safari Prefs. I assume the instructions for enabling the new function would not be available until the next version of Safari (9?) is released. 😉

    1. GS

      This won’t necessarily show how the website will actually render on different devices will it? I see some sites that look ok on my Mac and on my phone they adapt to fit the screen, but in this mode on my computer they do not adapt to the smaller screen sizes. They appear as a smaller window overlaying the full size.

  3. Victor

    You can use the same feature in Chrome, with some more default devices and/or sizes.
    Click the phone icon in the Developers tools and enjoy.

  4. Raven

    Hi there, scaling the browser while in the responsive design mode (safari 1366-768, 1920-1080) all content is scaled. Both text and visuals scale proportionally correct. I’m a designer and I’m trying to figure out if this is possible. I want the design to scale between brake points in larger sizes. Anyone done this before. Smooth proportional scaling of both text and images relative to with of browser.

Comments are closed.