Safari Responsive Design Mode (TIP)

Instead of previewing my design on my actual iPhone or stretching Safari (Mac) to a responsive size, Apple has a special mode in Safari on Mac that allows you to preview any site in a responsive mode. See screenshot.

SUPER useful and since I’ve discovered it, it’s massively sped up making adjustments to iPhone/iPad landscape and portrait views.

You can click on the individual device icons to select one (in BLUE), then click again to change the orientation (portrait to landscape, and vice versa).

I’m sure lots of you already use this tool, but I just RE-discovered it, and thought many would find it helpful. :blush:

NOTE: You’ll need to have the Develop menu turned on:
1. Safari > Preferences > Advanced > “Show Develop Menu in menu bar”
2. Click Develop menu bar > Enter Responsive Design Mode (Option - Command - R)



This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.