To view a mobile site in Safari desktop, you can use Safari DevTools and enable the responsive design mode. Here are the step-by-step instructions:
1. Launch the Safari browser on your desktop.
2. Click on Safari in the top menu bar, and then select Preferences.
3. In the Preferences window, click on the Advanced tab.
4. At the bottom of the Advanced tab, check the box that says “Show Develop menu in menu bar”.
5. Close the Preferences window.
Now, you have enabled the Develop menu in Safari. Follow the next steps to view the mobile version of a web page:
1. Navigate to the web page you want to view in mobile mode.
2. Click on the Develop menu in the top menu bar.
3. From the dropdown menu, select “Enter Responsive Design Mode”.
At this point, the Safari browser will switch to a responsive design view, simulating a mobile device’s screen size and resolution. You will see the web page in a mobile-friendly format.
In the responsive design mode, you can also select specific mobile device options to test how the web page appears on different devices. To do this, click on the device icon in the top left corner of the responsive design mode window. A dropdown menu will appear with various device options such as iPhone, iPad, and more. Select the desired device to simulate its screen size and view the web page accordingly.
Additionally, you can interact with the mobile version of the site in this mode, allowing you to test responsiveness, layout, and functionality. You can scroll, click on links, and perform other actions just as you would on an actual mobile device.
To exit the responsive design mode and return to the regular desktop view, simply click on the “X” button in the top right corner of the responsive design mode window.
Using Safari DevTools and the responsive design mode is a handy way to preview and test how a website looks and functions on mobile devices without actually needing a physical device. It can be particularly useful for web developers and designers who want to ensure their sites are responsive and mobile-friendly.
I hope this detailed explanation helps you view mobile sites in Safari desktop effectively.