Quelle media query pour le mobile ?

Bonjour,

Je planche sur une version Responsive d'un de nos sites et comme d'habitude je me pose la question des media queries.
J'utilise bêtement ceci pour les styles à appliquer sur mobile :

@media (max-width: 640px) {
/* CSS mobile ici */
}

Et au niveau viewport :

<meta name="viewport" content="width=device-width">

J'ai repris ça d'un de mes anciens site qui lui même s'appuyait sur un ancien site, etc.

A l'heure actuelle, sur les quelques téléphones essayés ça fonctionne bien : iPhone 4, 5, 6, HTC One m7, Galaxy s4 etc.

Est ce que cette consigne est suffisante et est elle toujours au gout du jour ?

Je me pose la question par ce que les téléphones deviennent de plus en plus grands et la résolution ne fait que monter.

Merci d'avance
Modifié par vanquish (04 Oct 2016 - 10:35)

vanquish a écrit :
les téléphones deviennent de plus en plus grands et la résolution ne fait que monter.

Hello,

Smartphone, phablette, tablette, desktop, portrait, paysage, largeur, densité de pixels, vrais pixels, faux pixels, devices passés, actuels, futurs, etc.
Le champs des possibles rend tout simplement... impossible la détection d'un device à l'aide de Media Queries (ce site devrait t'en convaincre encore un peu plus : http://mydevice.io/devices/)

La seule méthodologie viable actuellement est de ne pas baser tes points de rupture sur des devices dont on ne connaît presque rien, mais de te servir de ton propre design. Exprimé différemment : quand ton design casse, tu ajoutes un point de rupture. Ainsi, celui-ci devrait s'adapter à toutes les surfaces... et au final qu'importe que cette surface soit un smartphone ou une tablette, non ?

EDIT : pour la meta Viewport, je te conseille celle décrite dans cet article : http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html
Modifié par Raphael (04 Oct 2016 - 11:28)

Raphael a écrit :

La seule méthodologie viable actuellement est de ne pas baser tes points de rupture sur des devices dont on ne connaît presque rien, mais de te servir de ton propre design.

C'est même, certains l'oublient, le principe même du «responsive design». travailler un visuel/contenu adapté pour des périphériques connus est plutôt de l'«adaptative design». (Et il est même possible de combiner les deux).

vanquish a écrit :
C'est donc une mauvaise pratique ?

Il n'y a pas de bonne et de mauvaise pratique
Cela dépend de beaucoup de contraintes, notamment temporelles et budgétaires.
Mais en terme de maintenance ou en prévision de devices à venir, c'est l'idéal.

Pour rappel, quand l'iPhone 6 (et 6+) sont arrivés sur le marché avec leurs tailles respectives de 375px et 414px de large alors que tout le monde prévoyaient des media queries à 320px... ben ça a fait tout bizarre.

vanquish a écrit :
Avez vous des exemples de sites ecommerce qui gèrent ça bien ?

Bien, bien c'est toujours difficile de dire ce qui est bien. Mais au hasard, on a quelques références chez Alsacréations
- http://www.aussiebum.com/
- http://www.thalasseo.com/
- http://www.creavea.com/

Raphael a écrit :
Bien, bien c'est toujours difficile de dire ce qui est bien. Mais au hasard, on a quelques références chez Alsacréations
- http://www.aussiebum.com/
- http://www.thalasseo.com/
- http://www.creavea.com/

La boutique de slip est terrible !

Raphael a écrit :

Il n'y a pas de bonne et de mauvaise pratique
Cela dépend de beaucoup de contraintes, notamment temporelles et budgétaires.
Mais en terme de maintenance ou en prévision de devices à venir, c'est l'idéal.

Pour rappel, quand l'iPhone 6 (et 6+) sont arrivés sur le marché avec leurs tailles respectives de 375px et 414px de large alors que tout le monde prévoyaient des media queries à 320px... ben ça a fait tout bizarre.


Bien, bien c'est toujours difficile de dire ce qui est bien. Mais au hasard, on a quelques références chez Alsacréations
- http://www.aussiebum.com/
- http://www.thalasseo.com/
- http://www.creavea.com/

Merci pour ta réponse.
En fait j'ai du mal m'exprimer par ce que je ne vois pas du tout ce qu'on fait de différent à part que tu as des breakpoints en plus par rapport à moi.
Par exemple Creavea est fixe au delà d'une certaine largeur et ensuite plusieurs breakpoints pour gérer les cas.

Moi pour ma part, pour des raisons de budget, on a commencé par un design "fixe" et un breakpoint à 640px de large en dessous duquel tout est "responsive" c'est à dire que de 640px de large à 0, tout s'adapte : les images changent de taille, les marges s'ajustent, le menu fonctionne, etc.

Je pensais par la suite ajouter un breakpoint pour gérer les largeurs sous 1024px (qui est la largeur du site quand il est sur un grand écran) mais supérieur à 640px pour gérer le cas qui ne l'est pas encore. Ainsi tout sera fluide de < 1024 à zéro.
On a déjà un breakpoint supérieur pour gérer les ipad pro 13 donc là on vise spécifiquement un modèle et une résolution mais c'est voulu puisque nos 50 boutiques sont équipées de ce matos et on n'est pas prêt de le changer.

Donc pour résumer, je ne cible pas du tout de device mais une largeur.

Ma media query est elle adaptée ou il y a "mieux" depuis ?

Désolé je ne comprends pas trop la question.
Le 640 est "arbitraire" car il fallait bien une valeur pour déclencher un autre affichage sur les petits écrans.
Le 1024 est le seuil en dessous duquel le design est coupé.
Au delà de 1024 aucun souci d'affichage.
Modifié par vanquish (05 Oct 2016 - 09:48)