Safari 9 brings Responsive Design preview mode

With 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’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.


Mac Issues

At Mac Issues, we're dedicated to helping you learn how to use your Macbook properly. With tutorials, how-to troubleshooting guides & real reviews, hopefully we can make your day that little bit easier.

Read more from Mac Issues