Update 10/09/2014 : Ajout des dimensions pour l'iPhone 6 et 6 Plus

Lorsque je dois intégrer un design responsive ou un site mobile, j'utilise le mode « vue adaptative » de Firefox (Outils > Développeur web > Vue adaptative).

Je le trouve plus pratique que les différents bookmarklets qu’on trouve un peu partout (ici, là ou encore là), mais dans l’absolu ils se valent tous plus ou moins.

Une chose qui fait cependant défaut à l’outil de Firefox, ce sont les tailles prédéfinies — les presets. On y retrouve en effet les résolutions les plus répandues sur le marché, sans plus d’indications, notamment sur la correspondance avec les appareils.

Qu’à cela ne tienne, étant donné que l’on peut créer et sauvegarder ses propres presets, je me suis attelé à ajouter les différentes résolutions du marché, en me basant sur le projet de Stefanie Hatcher, Mobile + Tablet devide dimensions.

Si ça vous intéresse, je vous donne la marche à suivre :

1. Dans le mode « vue adaptative », sélectionner une résolution et cliquer sur « Ajouter la préselection »
2. Ouvrir un nouvel onglet et taper about:config (n’allez pas y faire n’importe quoi par contre !)
3. Taper « preset » dans le moteur de recherche. Normalement, vous devriez voir apparaitre deux lignes :
   • devtools.responsiveUI.presets
   • devtools.responsiveUI.currentPreset
4. Ouvrir devtools.responsiveUI.presets et coller le code suivant :

[{"key":"266x533","name":"HTC EVO","width":266,"height":533},{"key":"320x480","name":"iPhone 3GS - 4 - 4S","width":320,"height":480},{"key":"320x533","name":"Galaxy SII - HTC Desire - Nokia Lumia 710","width":320,"height":533},{"key":"320x568","name":"iPhone 5","width":320,"height":568},{"key":"360x640","name":"Galaxy Note II - Galaxy SIII, SIV - HTC One","width":360,"height":640},{"key":"375x667","name":"iPhone 6","width":375,"height":667},{"key":"414x738","name":"iPhone 6 Plus","width":414,"height":738},{"key":"384x640","name":"Nexus 4 - Nokia Lumia 920 - BlackBerry Z10","width":384,"height":640},{"key":"400x640","name":"Galaxy Note","width":400,"height":640},{"key":"480x800","name":"Galaxy S","width":480,"height":800},{"key":"533x853","name":"Kindle Fire HD - Galaxy Tab","width":533,"height":853},{"key":"600x1024","name":"Galaxy Tab 1 & 2","width":600,"height":1024},{"key":"601x962","name":"Nexus 7","width":601,"height":962},{"key":"720x1280","name":"Surface Pro","width":720,"height":1280},{"key":"720x1366","name":"Surface","width":720,"height":1366},{"key":"768x1024","name":"iPad","width":768,"height":1024},{"key":"800x1280","name":"Kindle Fire HD 9 - Galaxy Note 10 - Galaxy Tab 2 10 - Nexus 10","width":800,"height":1280},{"key":"980x1280","width":980,"height":1280},{"key":"1280x600","width":1280,"height":600},{"key":"1920x900","width":1920,"height":900}]

Attention, cette opération effacera les tailles existantes ! Donc si jamais vous en aviez ajouté, il faut les sauvegarder avant de coller ce code.