How to View Mobile Site in Safari on Mac Computer?

Learn how to view the responsive mobile site view on the macOS Safari on a computer or laptop. The mobile site can be viewed in developer mode within safari.

Do you want to load the desktop site in mobile view on your safari browser on macOS computer? We got you cover and details steps on how to enable mobile site view option.

This option is generally used by web developer and designer when they want to validate the look and feel of new site on different screen size. When you load the website on safari desktop browser, full desktop experience will be loaded. However, in order to switch to mobile site, you can either reduce the screen size or enable the responsive design mode.

A similar option is also available on chrome developer tools where you can toggle the device settings to switch between responsive and normal desktop view.

Related: How to Request and View Desktop Site on Safari iOS/iPadOS?

As mentioned mobile site view will be helpful for cross checking the website experience without having to use the Safari on iPhone. Just enable the develop menu and start the responsive design mode.

Let get started with the setup and step to enable mobile responsive view —

How to Enable Develop Menu in Safari macOS?

We need to enable the develop menu in order to view the responsive site option. The develop menu is hidden by default, but you can easily enable it.

Here are the steps to enable the Develop menubar in safari browser on mac computer:

  1. Launch safari browser on Mac.
  2. Click on Safari menu option.
  3. Choose Preference from the list to open the dialog window.
  4.  Switch to Advanced menu option.
  5. Enable the checkbox against — Show Develop menu in menu bar.

Apple Safari Advanced Preference Show Develop Menu

This will enable the Develop menu in safari browser menu bar list.

How to View Mobile Responsive Site in Safari Mac?

There is no standalone option like we do have on safari browser on hand-held. However, the option is hidden under Develop menu.

Here are the steps to view mobile responsive web design in safari macOS:

  1. Launch Safari browser on Mac computer.
  2. Open the website that you want in mobile site view.
  3. Click on the Develop menu for options.
  4. Select the Enter Responsive Design Mode option from the drop-down.

Enter Responsive Design Mode in Safari Mac Computer

This will reload the website and enter into responsive design mode. Here you can select different device type and screen resolution based on needs.

Simply switch between the iPhone or iPad models listed on page to view the mobile site on safari computer browser.

Bottom Line – Safari Mac View Mobile Site

This will enable to view the mobile responsive site on safari browser on macOS computer. The mobile site will be  based on the model selected in responsive design mode.

View Mobile Site on Safari Mac Computer

Similarly, you can also enable the desktop site view on iPhone or iPad device. This will help in retriving the full desktop experience on small screen device.

Have you ever tried using the developer mode in safari?

Lastly, here are the recommended web browsers for your computer and mobile phone that you should give a try.

WindowsMacOSiOSAndroidLinux
Chrome WindowsChrome MacChrome iOSChrome AndroidFirefox Linux
Firefox WindowsSafari MacSafari iOSEdge AndroidChrome Linux
Edge WindowsFirefox MacEdge iOSSamsung InternetEdge Linux

If you've any thoughts on How to View Mobile Site in Safari on Mac Computer?, then feel free to drop in below comment box. Also, please subscribe to our BrowserHow YouTube channel for videos tutorials. Cheers!

Share

Leave a Reply

Your email address will not be published. Required fields are marked *