Enlarge ton device avec Windows Phone 10 !

J’ai procédé ce week-end à la mise à jour de Windows Phone 8.1 vers Windows Phone 10 sur mon Nokia Lumia 1020.

Jusqu’alors, sur mon ex-Windows 8.1, l’ensemble de mes navigateurs affichaient des dimensions d’écran similaires :

  • en portrait, largeur d’écran 320px sur IE11, Opera mini, Maxthon et UC Browser
  • en paysage, largeur d’écran 480px sur IE11, Opera mini, Maxthon et UC Browser

(source de test : mydevice.io)

Depuis la mise à jour vers le nouvel OS de Microsoft, quelle ne fut pas ma surprise de constater un certain nombre de modifications quant à la taille d’écran utilisable.

Si les dimensions annoncées en portrait ne changent pas et sont toujours annoncées à 320px sur l’ensemble des navigateurs mobiles, les résultats sont bien plus étonnants dès lors que l’on tourne son device en paysage :

  • IE Edge : largeur d’écran 640px en paysage (contre 480px précédemment)
  • Opera mini : largeur d’écran 568px en paysage (contre 480px précédemment)
  • Maxthon : largeur d’écran 320px en paysage (contre 480px précédemment)
  • UC Browser : largeur d’écran 320px en paysage (contre 480px précédemment)

En résumé :

  • les navigateurs ne renvoient plus résultats identiques entre eux
  • IE Edge lui-même a décidé de modifier sa valeur par rapport à son prédécesseur

Quelles conclusions en tirer ?

Si ce n’était pas déjà le cas, arrêtons de calculer nos breakpoints et nos Media Queries en fonction des devices car cela n’a vraiment aucun sens :

  • il est impossible de cibler tous les device existants,
  • chaque jour de nouveaux devices et de nouvelles valeurs apparaissent,
  • même les devices actuels et reconnus se permettent de muter avec leurs navigateurs.

Bref, établissez vos breakpoints selon votre design et uniquement selon votre design. Il doit pouvoir s’adapter quel que soit le média, sa taille et ses caractéristiques.

Visuel Edge en paysage :

edge

Visuel Opera en paysage :

opera

Visuel Maxthon et UC Browser en paysage :

maxthon.png