Enable Safari's Develop menu for Responsive Design Mode

You've built a page on a wide Mac display and now need to know what it looks like on an iPhone before you ship it. Safari has this built in — Responsive Design Mode renders your page at any device size right in the browser. It lives under the Develop menu, though, which Apple hides by default. Show that menu once and you can preview every breakpoint with Cmd+Opt+R.

Unhide the Develop menu

Responsive Design Mode is a Develop-menu command, so turn that menu on first:

1. Open Safari → Settings (Cmd+,) and go to the Advanced tab.
2. On macOS 14 Sonoma and 15 Sequoia, tick Show features for web developers. On macOS 13 Ventura and earlier, tick Show Develop menu in menu bar.
3. The Develop menu appears in the menu bar. That's the only setup — the mode itself needs nothing else enabled.

Enter Responsive Design Mode

Load the page you're testing, then choose Develop → Enter Responsive Design Mode or press Cmd+Opt+R. The window switches to a canvas with a row of device outlines across the top:

• Click a device — iPhone and iPad presets snap the viewport to that model's exact dimensions, so you see real screen widths instead of guesses.
• Drag the handles — grab the edge of the frame to resize freely and watch exactly where your CSS breakpoints kick in.
• Rotate — the orientation button flips between portrait and landscape.
• Scale — the percentage control shrinks a large layout to fit your display without changing the reported viewport size.

Because it's the real WebKit engine at that viewport — not a rough emulator — media queries, viewport meta tags, and touch-vs-pointer styles all behave as they would on the device. Press Cmd+Opt+R again to exit.

Pair it with Web Inspector

Responsive Design Mode and the Web Inspector work side by side. Open the Inspector with Cmd+Opt+I while a device size is active, and the Elements and Console tabs reflect that narrow viewport — ideal for chasing a layout bug that only shows up on mobile. Adjust a CSS value in the Inspector and the resized canvas updates live.

Turn it on from the Terminal

Setting up a machine for front-end work? Enable the whole Develop menu in one line:

# Show the Develop menu (home of Responsive Design Mode)
defaults write com.apple.Safari IncludeDevelopMenu -bool true

# Undo
defaults write com.apple.Safari IncludeDevelopMenu -bool false

Quit and relaunch Safari after running it. On current macOS the write only takes if Terminal has Full Disk Access under System Settings → Privacy & Security; otherwise the Advanced-tab checkbox is the dependable route.

Check the same page at real zoom

Responsive Design Mode changes the viewport; page zoom changes text size for readers on the actual site. It's worth knowing both — see how to control page zoom in Safari on Mac.