Dimensions des écrans de téléphone pour les modèles populaires

Dans le monde d’aujourd’hui, il existe de nombreux appareils parmi lesquels les gens peuvent choisir, et cela peut être décourageant si vous essayez de mettre et de construire pour la meilleure expérience sur tous les appareils. Cependant, lors de la conception de sites Web et d’appareils mobiles, il est important de connaître les dimensions et les résolutions des écrans de téléphone les plus populaires afin de pouvoir adapter votre conception à l’écran de vos spectateurs. Un site Web optimisé et réactif facilite la circulation des utilisateurs et, au final, plaît à votre public.

Dimensions de l’écran du téléphone par rapport à la zone de visualisation

Lorsque vous achetez un appareil, la taille de l’écran et la résolution spécifiées dans les spécifications sont souvent affichées. La sensibilité de l’écran est la mesure de la diagonale de l’écran en pouces. Il ne faut pas la confondre avec la résolution, qui est le nombre de pixels sur l’écran, souvent affichée en termes de largeur dans la hauteur (c’est-à-dire 1024×768). Comme des appareils de même taille d’écran peuvent avoir des résolutions très différentes, les développeurs utilisent des fenêtres d’affichage lorsqu’ils créent des pages mobiles faciles à utiliser. Les fenêtres d’affichage ont des versions plus petites de la résolution, ce qui permet d’afficher les sites Web sur différents appareils de manière plus cohérente. Les fenêtres d’affichage sont souvent plus standardisées et ont une résolution inférieure à la résolution.

Bien que les écrans des ordinateurs de bureau et des ordinateurs portables soient horizontaux (plus hauts), de nombreux appareils mobiles peuvent être tournés pour afficher les sites en orientation horizontale et verticale (plus hauts que la largeur). Cela signifie que les concepteurs et les développeurs doivent concevoir en tenant compte de ces différences. Alors que les écrans des ordinateurs de bureau et des ordinateurs portables sont horizontaux (plus hauts), de nombreux appareils mobiles peuvent être tournés pour afficher les sites en orientation horizontale et verticale (plus haute que la largeur). Cela signifie que les concepteurs et les développeurs doivent concevoir en tenant compte de ces différences.

Vous avez besoin d’aide pour déterminer si votre site est réactif ? Utilisez notre outil gratuit responsive viewport.

Codage pour différentes dimensions d’écran de téléphone

Il serait presque impossible pour les entreprises de concevoir chaque appareil individuellement. Au lieu de cela, les développeurs regroupent souvent les projets responsive :

Groupez les styles selon les tailles les plus courantes pour les téléphones, les tablettes et les ordinateurs de bureau. Dans ce cas, tout ce qui est plus grand que 7 pouces est généralement affiché avec une résolution de bureau ou… Utiliser des points d’arrêt (définis par la largeur des pixels, que l’affichage ajustera en fonction de la taille de l’écran) en fonction du design et de l’emplacement. Parfois, le développeur peut combiner les deux méthodes s’il le juge nécessaire. Il est recommandé de commencer par regrouper les tailles d’appareils typiques.

Si vous êtes un développeur et que vous souhaitez créer les styles nécessaires pour travailler avec un style mobile ou réactif, nous avons inclus ci-dessous un fragment de CSS qui peut vous aider. Il est important de noter que ces points d’arrêt ne sont pas fixes pour tous les sites et ne doivent être utilisés que comme guide pour commencer :

Exemples:

media and (Maximum width: 991 pixels) { ** "The beginning of great styles of pills}media and (maximum width: 767 pixels) { ** The beginning of medium styles of pills}screen @media and (maximum width: 479px) { ** "The beginning of phone styles}

Quelles sont les dimensions d’écran les plus populaires ?

Sachant qu’il est important de prendre en compte différents appareils lors de la conception de sites Web, nous avons compilé une liste des appareils les plus modernes avec les tailles de pixels et les fenêtres d’affichage correspondantes, qui est donnée ci-dessous. Il s’agit d’une liste condensée, vous pouvez trouver une liste plus complète qui inclut la densité de pixels, les résolutions physiques et CSS (pixels par pouce carré,  » ppi « ) ici.

.