Firefox Developer Tools Responsive Presets

Firefox_Devtools_Responsive_Presets.json

[{"key":"320 x 480","name":"iPhone 3/4/S","width":320,"height":480},
{"key":"320 x 568","name":"iPhone 5/C","width":320,"height":568},
{"key":"375 x 667","name":"iPhone 6/S","width":375,"height":667},
{"key":"414 x 736","name":"iPhone 6/S Plus","width":414,"height":736},
{"key":"768 x 1024","name":"iPad1/2/3/4/Air","width":768,"height":1024},
{"key":"1024 x 1366","name":"iPad Pro","width":1024,"height":1366},
{"key":"320 x 533","name":"Samsung S/S2/S3mini","width":320,"height":533},
{"key":"360 x 640","name":"Samsung S3/S4/S5/Note2/3/4","width":360,"height":640},
{"key":"400 x 640","name":"Samsung Note","width":400,"height":640},
{"key":"800 x 1280","name":"Samsung Galaxy Tab 8.9/10","width":800,"height":1280},
{"key":"384 x 640","name":"Nexus 4","width":384,"height":640},
{"key":"360 x 640","name":"Nexus 5","width":360,"height":640},
{"key":"412 x 690","name":"Nexus 6","width":412,"height":690},
{"key":"604 x 966","name":"Nexus 7v1","width":604,"height":966},
{"key":"600 x 960","name":"Nexus 7v2","width":600,"height":960},
{"key":"432 x 768","name":"MS Lumia 1520","width":432,"height":768},
{"key":"720 x 1280","name":"MS Surface Pro/2","width":720,"height":1280},
{"key":"1024 x 1440","name":"MS Surface Pro 3","width":1024,"height":1440},
{"key":"1680 x 1050","name":"Laptop 16:10","width":1680,"height":1050},
{"key":"1920 x 900","name":"Wide Screens","width":1920,"height":900}]

Adding Device Presets to Firefox Screen Size Test

If you are using the Dev Tools in Firefox, you might have seen the Screen-Size-Test Button, which toggles the device test screen. (the blue one)

I was missing some device specific screen sizes, so i created them.

If you want to use them as well, follow these few steps:

1. go to firefox adress about:config
2. search for devtools.responsiveUI.presets (if you can't find them, create a preset first in the screensize dropdown)
3. click the value, then paste the json and you are ready to go.

Have fun developing.
And remember: Always test on real devices, these presets are only a hint for layout and compositing. If you are missing devices to test, visit an OpenDeviceLab near you.