Quelle max-width pour site mobile ?

Bonsoir,

J'ai un site designé pour desktop (non responsive). Je voudrais ajouter une version pour mobile. J'ai lu plusieurs articles d'Alsacréation. Je pense avoir compris le principe des media queries. J'ai encore du mal avec le principe de viewport. Et avec les différentes tailles et résolutions d'écran qui existent, je me demande juste quelle est la meilleure max-width à utiliser ?

Merci de votre aide.

Salut !

J'aurais tendance a dire : la taille ou ton design n'est plus lisible

Sinon c'est aux alentours de 600px mais comme tu dis il y a tellement de résolution qu'il vaut mieux se baser sur ton design plutôt que d'essayer de chopper la taille de tout les smartphones...

576px pour KNACSS https://www.knacss.com/doc.html#rwd
578px pour Bootstrap https://getbootstrap.com/docs/5.0/layout/breakpoints/
600px pour Material https://material.io/design/layout/responsive-layout-grid.html#breakpoints

Mais la encore ce ne sont que les valeurs "xs" ils ont au autre Breakpoints en "s" etc.. mais vu que ce sont des frameworks ils ne peuvent pas coller aux design donc ils ont mis les breakpoints par défaut.

Merci _laurent,

Mon site actuel est sur une colonne centrée en 1280 px de large. Je pense laisser les tablettes utiliser la version desktop.

Donc pour les mobiles, je pourrais mettre un max-width à 600px soit la moitié ?

Ok. Et il faut prévoir une résolution particulière avec les écrans rétina & co ?

Normalement non avec un viewport adapté. Le rétina apportera une meilleur résolution mais pas plus de px de large. Il y aura plusieurs "pixel physique de l'écran" par "pixel CSS utilisable".

Je ne sais pas si tu es passé sur cet article mais c'est totalement le point : https://www.alsacreations.com/article/lire/1490-Comprendre-le-Viewport-dans-le-Web-mobile.html