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}] |
by 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
