Safari 9: Using Responsive Design Mode

| TMO Quick Tip

If you’re a Web designer, boy, are you gonna love this. Under the secret “Develop” menu, the new version of Safari is hiding something cool—the ability to view a site as it would appear on different devices and under different user agents, all in one place! That’s just…well, that’s awesome, is what that is.

To use this, first you’ll need to turn on the aforementioned “Develop” menu, the toggle for which is within Safari > Preferences under the “Advanced” tab.

Once that’s on, you’ll see “Develop” appear in your menu bar. Click it, and then choose “Enter Responsive Design Mode.”

Then you’ll be treated to a screen where you can see how your current webpage would look on quite a few different devices.

If you want, you can also change the User Agent (which browser the site will think it’s loading on) with the drop-down menu at the upper-right. 

And finally, the site you’ve got open will have little draggy handles around it so you can change the dimensions to match your specific needs. 

And yes, “draggy handles” is the correct technical term. 

So here’s your chance to go nuts. Drag things around! View the TMO website at 576 x 553! Imagine what your new iPad Pro’s display would look like if you had one! Or I guess you could go do something actually productive with your time if you want to be all boring like that. I don’t recommend it.

Popular TMO Stories



Only problem with this, it doesn’t actually render what the device renders. Tried iPhone 6 Plus, using “Using Responsive Design Mode”  on Mac OS X it shows the corner of an unresponsive website , on iOS 9 on iPhone 6 Plus it shows the full page just smaller.

Jeff Treegarden

Ditto JustCause…it doesn’t render the same as my 4S. It does show the mobile version of the page I visited, but it didn’t scale down to screen width as it actually does on that phone.

Log in to comment (TMO, Twitter or Facebook) or Register for a TMO account