Firefox has a fantastic featured baked in called Responsive Design View for quickly resizing your active tab to different Preset dimensions.
To bring it up, go to Tools > Web Developer > Responsive Design View or press Cmd + Alt + M on a Mac or Ctrl + Shift + M on a PC.
If you are into building websites then you will often want to resize the screen to standard sizes like 568px (iPhone 5, 5S, 5C landscape canvas size), 320px (iPhone 4, iPhone 4S, iPhone 5, 5S, 5C portrait canvas size) to get an idea of how your webpage might look in those devices so you can write the necessary style rules.
Till recently, I used to check my completed website’s pages at 1024px, 768px, 568px, 480px and 320px widths for iPad and iPhone – Landscape and Portrait.
Thanks to the recent release of iPhone 6 and iPhone 6 Plus by Apple, we now have four more dimensions to check our designs in.
Thankfully it is possible to customize the Firefox’s Responsive Design View Presets like so:
To get the above,
Step 1
Open a new tab, type about:config in the address bar and hit Enter.
Step 2
Click on “I’ll be careful, I promise!” button.
Step 3
Type this in the Search field: devtools.responsiveUI.presets
Step 4
Double click on Preference that gets shown, replace the existing string with:
| [{"key":"1920 x 1080","name":"Nexus 5 Landscape","width":1920,"height":1080}, | |
| {"key":"1080 x 1920","name":"Nexus 5 Portrait","width":1080,"height":1920}, | |
| {"key":"1024 x 768","name":"iPad Landscape","width":1024,"height":768}, | |
| {"key":"768 x 1024","name":"iPad Portrait","width":768,"height":1024}, | |
| {"key":"736 x 414","name":"iPhone 6 Plus Landscape","width":736,"height":414}, | |
| {"key":"414 x 736","name":"iPhone 6 Plus Portrait","width":414,"height":736}, | |
| {"key":"667 x 375","name":"iPhone 6 Landscape","width":667,"height":375}, | |
| {"key":"375 x 667","name":"iPhone 6 Portrait","width":375,"height":667}, | |
| {"key":"568 x 320","name":"iPhone 5/S/C Landscape","width":568,"height":320}, | |
| {"key":"320 x 568","name":"iPhone 5/S/C Portrait","width":320,"height":568}, | |
| {"key":"480 x 320","name":"iPhone 4/S Landscape","width":480,"height":320}, | |
| {"key":"320 x 480","name":"iPhone 4/S Portrait","width":320,"height":480}, | |
| {"key":"1920 x 900","name":"Wide Screens","width":1920,"height":900}] |
Now when you press Cmd + Alt + M, you should have your new custom presets so you can resize your webpage to your device’s (I mean, heart’s) content and write the required media queries in CSS.
References:
https://support.mozilla.org/en-US/questions/957590#answer-430463
Followed your instructions but ‘devtools.responsiveUI.presets’ is not among the options available.
Followed your instructions but ‘devtools.responsiveUI.presets’ is not among the options available.
Among the user sets are: devtools.responsiveUI.currentpreset, devtools.responsiveUI.customHeight, devtools.responsiveUI.customWidth and devtools.responsiveUI.rotate, but that’s all.
I’m on a Mac and using the latest version of Firefox, v32.0.2.
Try creating a new one.
From https://support.mozilla.org/en-US/questions/981097#answer-514191:
This fix not working. Need remove dot in the name devtools.responsive.UI.presets. Name should be like this devtools.responsiveUI.presets. After that all work fine.
Did exactly the same but when I open the firefox in mobile mode it opens in default size and not the size specified in responsive.UI.presets
Sridhar, I believe it’s Ctrl+Shift+M for windows. As, it is working that way for me.
Updated the post.
On a PC its CTRL + SHIFT + M
Not ALT.
Thanks
Thanks Chris, updated the post.
Thanks for the tip, Sridhar. I use Firefox almost exclusively, but I didn’t know about this feature. I’ve also use Responsinator (www.responsinator.com) in the past.
Brilliant!
Thanks for sharing Sridhar 🙂
Thanks for posting this! I have been meaning to reset my defaults because I accidentally deleted a few default presets.
So I added your version and realized it was missing some of the other defaults, so looked them up and added them back.
Question: I am wondering why you chose to include both versions, portrait and landscape, of some sizes, when you could simply toggle the rotate button for the same effect?
Also, I found a bunch more presets here, but they are not formatted well, like yours: https://support.mozilla.org/en-US/questions/981097
Cheers.
It wasn’t showing up for me, so I added a new string and pasted your values in. But it doesn’t seem to be working … I’m only getting the default values and no names are showing. What could I be doing wrong?
I think another way for that string – value pair to be generated is to resize the responsive design view window and add a custom preset.
http://cl.ly/image/0b283P2h0E1r
Give it a try.
Check for devtools.responsiveUI.presets afterwards.
Okay, I got it working now. The one I had entered says “devtools.responsive.UI.presets” (an extra period). I think what happened is when I was trying to figure out where to find it, I was on the Mozilla help site and copy/pasted from there and it was wrong! Thanks much!
Perfect – exactly what I was looking for – thank you.
I know you have a LOT of posts addressing responsive sites in Genesis and DWB. But I have someone who has me updating and maintaining a site I did not build. It is a site build in what I call “old-school” WordPress, not using Genesis or DWB. I could easily replicate the site in DWB, but that’s not what this client wants. He wants me to convert the existing theme that somebody else installed that isn’t responsive…. and make it responsive. In other words, he doesn’t want to spend the money for a redesign the right way, he wants what is currently there to be “fixed”.
Sridhar, if this were your dilemna, what would you do?
The website I’m talking about is http://www.americanfamilylife.com.
It is running a modified version of a WP theme that seems to no longer be available for sale on themeforest called “inspired”.
Thank you. Great to have the added piece for iPhone 6.
Works for me perfectly fine. Thanks!
I added the devtools.ResponsiveUI.presets , but still opening in default mobile mode size
For a long time, I wasn’t actually aware that this feature was available in Firefox – I pretty much discovered it in Firefox only when Chrome articles surfaced. It’s a bit ironic because I don’t really use Chrome at all for the web projects I work on!
Website Design Cape Town,
Dev
The usability of this feature is a bit awkward. It seems that no matter what the view will always open at dimensions 320×480. It’s bit quite a while since that was typical for phones. Are people doing mobile development actually using this feature?>