over 7 years ago from Stuart McCoy, freelance graphic designer
I accidentially pressed cmd-option-r in Safari the other day when trying to refresh my page and discovered a hidden, at least to me apparently, gem. When did this feature make it into Safari and why isn't hailed as one of the best utilities for developing responsive sites in Safari?
I agree and really dislike it when people don't elaborate on what the shortcut/feature does.
It enables "responsive developer mode" and gives you a list of iDevices that resize the viewport and spoof the user-agent and display the results, very handy!
Not as bad as the people on stackoverflow that post looking for help then say they figured it out without posting how. ARGHHH
Nice! Thanks for sharing this!
How many points do I get for trying this shortcut for a solid minute and wondering why it wasn't working...in chrome?
opt+cmd+i will do the trick in chrome
And ⌘ + ⌥ + M in Firefox
haha thanks Ellie, Sven. I definitely utilize those tricks, when I'm in the correct browser. Just total brainfart yesterday though
This is a new feature in Safari 9 which is bundled with El Capitan.
I'm on Yosemite and nothing happens in Safari for this shortcut. :(
Supposedly a feature in El Capitan (10.11)
Maybe you need check the 'Show Develop menu in menu bar' option from preferences
You can also click the device icons multiple times to rotate or on iPad show split screen.
TIL: /r/webdev HATES anything not done with Chrome.
Just remember the viewport meta tag, as this feature will render the webpage correctly regardless of that, making you think everything is alright until it hits production.
Even has IE browsers, how's that work?
Edit: User Agents.
I am not on my Mac at the moment, what feature are you talking about? :)
Check: Safari › Preferences › Advanced › Show develop menu in menu bar
once activated, shortcut will work on El Capitan.
It's nice but, who cares? Why are you developing in Safari? It has a third of the browser market share of IE 8! Do you do mobile dev on a Blackberry? Firefox Developer Edition & Chrome Canary's responsive dev tools are excellent, FWIW.
You still have to test in Safari. It's becoming the new IE.
Do you do mobile dev on a Blackberry?
Hyperbole alert... :/
Where do you get your numbers? Are you not familiar that Safari renders using the same engine as Mobile Safari, the rendering engine used on all iOS devices? With the various WebKit implementations active, Desktop Safari is a good tool for testing.
AMAZING. Thanks buddy!
That is really good! Thanks for sharing.
They should have even presented this in their keynote presentation. Thanks mate!
WOW that is good!
Amazing! Thanks for sharing! Such a cool feature!
This feature was shown during one of the sessions in last years WWDC. Every year they have handful of sessions dedicated to web development that are worth watching for every web developer / designer.
I'm on El Capitan and in Safari and I can't get anything to work. I must be going crazy.
Doesn't do a great job of emulating a 6S plus though...
Mind blown! Great feature.
I've been using this all week but didn't even think to look for a shortcut. Ta!
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now