How to View Mobile Site Layout in Apple Safari on Mac

You open a site in Safari on Mac and it looks nothing like the version your phone shows. A full-width window hides the phone-sized layout, so menus, images, and text never get tested at the widths most visitors use.

Turn on Safari's developer features, then open the page in Responsive Design Mode and pick an iPhone or iPad viewport. You'll see how the layout reflows before you ship it.

In this guide, I have covered:

Start with the Develop menu in Safari on Mac

You open Safari, scan the menu bar, and there is no Develop menu. Without it, Responsive Design Mode stays hidden and you cannot put a page into a phone-sized viewport. You only have to turn this on once.

1. Open Safari on your Mac.
2. Choose Settings… from the Safari menu. You can also press Cmd + ,.
3. Select Advanced in the Settings sidebar.
4. Turn on Show features for web developers. On older Safari versions, the same option is called Show Develop menu in the menu bar.

You’ll know it worked when Develop appears in the macOS menu bar after the Settings window closes. If it does not show up, check that the toggle is still on, then quit and reopen Safari.

View a mobile site layout in Safari on Mac

You have the Develop menu. Now open the page you want to inspect and enter Responsive Design Mode. Safari swaps your window for a device-sized preview, and the page re-renders at that width instead of your monitor’s.

1. Open the website you want to inspect.
2. Choose Develop from the macOS menu bar.
3. Select Enter Responsive Design Mode.

You’ll know it worked when the page reloads inside a device frame with a responsive toolbar across the top. That toolbar confirms Safari is rendering at a mobile or tablet width, not at your window width.

Choose an iPhone or iPad viewport

The default viewport is rarely the phone you care about. The responsive toolbar lists real device sizes, so you test a specific iPhone or iPad model instead of guessing at a narrow window. Which models appear depends on your Safari version.

1. Open the device selector in the Responsive Design Mode toolbar.
2. Choose the iPhone or iPad model you want to test.
3. Switch the orientation if you need to check both portrait and landscape layouts.
4. Scroll through the page and test its menus, images, and text at that width.

Pick the model your visitors actually use. Landscape is worth a look on layouts where navigation or images need extra horizontal space.

What Safari’s mobile preview tells you

The frame is up and the page has reloaded. So what are you actually looking at?

Responsive Design Mode changes the viewport, and the page reacts to it. That makes it useful for CSS breakpoints, text wrapping, image scaling, and navigation behavior when space runs short.

Layout is not the only thing worth checking. The site information and permissions panel shows what the page is allowed to do while you test it.

One limit: the preview is not an iPhone. It does not guarantee an exact device result. Sites with separate desktop and mobile pages, and browser features that only exist on the device itself, can still behave differently.

Troubleshoot a mobile preview that does not change

Sometimes the frame appears but the page still looks like the desktop version, or you see content from an earlier visit. Work through these in order:

1. Reload the page while Responsive Design Mode is active.
2. Choose a different iPhone or iPad model in the responsive toolbar.
3. If the content itself is stale, use the How to Clear Site and Browsing Data in Safari on Mac guide to reset the site data.
4. Reload the website and check the mobile layout again.

Clearing site data signs you out of websites. If you are mid-review, expect to log back in.

A site with a separate mobile page can keep serving the desktop version at a narrow width. Compare the layout rather than expecting every page to switch automatically.

RELATED: View Cache and Clear Site Storage in Safari on iPhone & iPad

How this differs on iPhone and iPad

Testing the opposite direction? On an iPhone or iPad you can enable the desktop site view in Safari on iPhone and iPad, which asks the mobile browser to load the full desktop page. Responsive Design Mode does the reverse: it previews mobile dimensions on your Mac.