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)

Merci.

Actuellement on est sur du semi adaptative, semi responsive.

En gros le site a le même look jusqu'à un point de rupture (640px de large) qui fait basculer sur les styles "mobile" / navigateurs à largeur réduite.
En dessous de ces 640px, c'est du responsive : que le tel fasse 300px ou 640 de large, ça s'ajuste automatiquement.

Je n'ai pas visé le 640px en pensant à un mobile en particulier.

Je sais que ce n'est pas le top mais nous avions une contrainte budgétaire et temps et c'est mieux que de n'avoir rien fait (et moins bien que de l'avoir fait à fond nous sommes d'accord).

Si je vous comprends bien il faudrait que tout soit fluide quelle que soit la largeur d'écran et n'ajouter des breakpoint que à partir du moment ou ça "casse".

Notre site fonctionne comme celui ci en gros : http://www.jules.com/fr/index sauf que eux ont deux breakpoint de plus que nous. Idem http://www.celio.com
C'est donc une mauvaise pratique ?
Avez vous des exemples de sites ecommerce qui gèrent ça bien ?

Merci!

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 ?

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

Est-ce que les valeurs (arbitraires ?) de 640px et 1024px sont-elles parfaitement adaptées à ton design, ou bien d'autres valeurs lui siéraient mieux ?

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)

Tiens Raphael, la boutique de slip est inutilisable sous chrome, il y a tout le javascript qui charge quand on clique sur un lien pour visiter la page d'un super slip (guide des tailles, fenêtre modale, loader etc.) et ça ne renvoie pas sur la page ciblée. Sous FF aucun pb par contre.

Et encore désolé pour le HS
Modifié par SuperMerguez (05 Oct 2016 - 09:54)

Re

Je ne comprends pas une chose.

@media screen and (max-width: 1024px){
				div{background:blue}
			}

Sur iPad le div est toujours bleu, qu'il soit en mode paysage (dans lequel il fait 1024px de large) ... ou en mode portrait (mode dans lequel l'affichage fait 768px)
Pourquoi ?
Il faut obligatoirement utiliser orientation: ?
Comment gérez vous ça ?

Merci