Statistiques sur la taille des écrans mobiles et de bureau

I just finished doing a responsive business website ( https://plus.google.com/101258044853419629282/posts/GejAf734nP6) et voici ce que je peux vous dire - le point de rupture n'est certainement pas 600px!

Voici les faits (en termes de requêtes CSS et @media):

1. 1366px largeur du bureau vient de dépasser 1024px comme la taille la plus populaire: http://techcrunch.com/2012/04/11/move-over-1024x768-the-most-popular-screen-resolution-on-the-web-is-now-1366x768/

2. pourtant, sur les tablettes, l'iPad avec son 1024x768px est le plus populaire.

3. iOS Safari est sain d'esprit et signale toujours le bon point de vue, c.-à-d.: peu importe si vous avez un iPad régulier ou un iPad Retina, il vous dira que c'est 1024x768, de la même façon iPhone vous dira que c'est 320x480.

4. Android navigateur a plus de problèmes, puisque les écrans varient sur cette plate-forme. Par exemple, Nexus One a un écran 480x800px, mais à 254ppi (rapport de pixel 1,5) le viewport rapporté à CSS est en fait 360x600. Même le funnier Galaxy Nexus a un écran 1280x720px à 316ppi (rapport de pixel 2.0, comme Retina), le viewport rapporté est 360*640.

Exception est Chrome Beta sur Android 4.0, en mode paysage il a un bug et semble comme il déclare la largeur de viewport comme 1280px sur ce Nexus Galaxy, ce qui rend très difficile de ne pas entrer en conflit avec les CSS de bureau.

Conclusion

j'ai personnellement utilisé un point de rupture de largeur d'écran de 768px, à savoir: je traite l'iPad dans le paysage comme bureau, et je suppose que la taille minimale du bureau est de 1024px. Mais je pourrais aussi supposer que c'est 800px, comme au bon vieux temps. Ensuite, je traite 768px spécifiquement pour l'iPad portrait, puisque les iPads non rétiniens ont beaucoup d'espace, ce n'est pas encore tout à fait petit écran. Alors, tout ce que j'appelle moins de 768px le petit écran d'un smartphone.

pour une optimisation maximale, vous pouvez utiliser des points d'arrêt intermédiaires à 640px, 600px, 480px, 360px, 320px et même 240px (bas-bas-bas androïdes) mais c'est probablement une bonne pratique de le faire totalement %-basé en dessous de 768px de sorte qu'il s'adapte automatiquement.

UPDATE: un point de rupture utile que j'ai trouvé est 810px - la largeur d'une iframe dans un onglet Facebook. Utile lorsque vous créez des applications FB et que vous voulez réutiliser votre code webapp.