How to Use Safari DevTools to View Mobile Versions of Web Pages

This article will illustrate how to use Safari DevTools to view the mobile version of a particular web page.

Responsive Design Mode in Safari DevTools for Mobile view

To start with, bear in mind that the Developer menu is, by default, disabled for Safari browser. In order to access the Responsive Design Mode, enable the Safari Develop menu.

Follow the steps below to enable the Develop menu:

1. Launch Safari browser
2. Click on Safari -> Preferences -> Advanced
3. Select the checkbox -> Show Develop menu in menu bar

Once the Develop menu is enabled, it’ll show up in the menu bar as shown in the image below:

Also learn: How to remotely debug on iOS and Mac Safari

Now follow the steps below to view the mobile version of a web page using Safari DevTools:

1. Launch Safari and navigate to the desired URL that needs to be loaded in mobile view.
2. Click on the Develop menu and select Enter Responsive Design Mode.
3. Now the target URL (Wikipedia in this example) can be viewed in the desired iPhone or iPad.

Furthermore, developers can leverage the Web Inspector in case they need to inspect any particular element and debug a certain issue for a specific screen size. One can find the web inspector in the Develop menu. Once the web inspector is active, inspect a particular element using the element selector.

Refer to the image below:

It’s vital to bear in mind that this approach just allows the simulation of different viewports on a desktop browser. However, this is not the most accurate way to test the mobile version of a website on Safari, as it is just a device simulation. It cannot simulate all aspects of a real mobile device.

For accurate results of viewing web pages on a mobile Safari, one must prefer using a real device cloud that offers real devices for testing apps and websites.

Testing a website on real devices is the most effective way to validate its appearance and performance. This also allows team members to identify UI bugs that end users may face in the real world.