How To Enter Responsive Design Mode in Safari and See Your Website on Multiple Devices

Anyone building a website, from high-end developers to those making a quick blog site at home, need to test how it looks. It is crucial to see what your website will look like on different kinds of devices. Luckily, there is a really easy shortcut for doing this in Safari, known as Responsive Design Mode.

Entering Responsive Design Mode

The first thing to do is turn on the ‘Develop’ menu, if you have not done so already. This is done by going to: Safari > Preferences > Advanced and ticking the box that says “Show Develop menu in menu bar”. Then press CTL + CMD + R. This brings up Responsive Design Mode. From there you can see your website on different devices, by selecting them at the top of the page.

Responsive Design Mode

If you are viewing a mobile device and want to see what the website looks like in both portrait and landscape, click on the device to rotate it.

You can also view the website in a number of different browsers via dropdown menu:

To exit Responsive Design Mode press CTL + CMD + R again.

2 thoughts on “How To Enter Responsive Design Mode in Safari and See Your Website on Multiple Devices

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.