Wordpress. Balise meta name viewport et Media queries.

Résolu
Escienca Messages postés 428 Date d'inscription mercredi 12 janvier 2011 Statut Membre Dernière intervention 29 mai 2024 - 29 avril 2024 à 11:50
Escienca Messages postés 428 Date d'inscription mercredi 12 janvier 2011 Statut Membre Dernière intervention 29 mai 2024 - 3 mai 2024 à 12:15

Bonjour,

Comme beaucoup d'utilisateur Wordpress, j'ai des problèmes d'affichage sur les différentes et désormais infinies résolutions d'écrans ! Une véritable usine à gaz ! Le pire étant que beaucoup d'utilisateurs de Wordpress n'en sont même pas au courant, parce qu'ils ne le voient pas ! Et je pense que c'est des centaines, si ce n'est plus encore, de rebonds, pour des visiteurs qui voient n'importe quoi comme affichage ! J'ai la "chance" d'avoir tous les supports dispos : PC fixe et PC portable, tablette, téléphone, donc du coup, je vois bien que ça déraille ! 

J'ai le fameux <meta name="viewport" content="width=device-width, initial-scale=1> dans mon <head>, je n'y comprends rien, mais je l'ai mis !

Je personnalise aussi mon CSS avec des Media queries, que je comprends mieux. Sur PC et PC portable, l'affichage est impeccable, sur ma tablette 8 pouces en paysage, c'est nickel, mais tout le reste déraille ! Sur le téléphone mobile, portrait et paysage déraille, et portrait sur la tablette aussi !

Ce que je me demande au final, avant d'attaquer les Media queries pour les téléphones portables, et pour ne pas faire tout ça pour rien, c'est :

1/ Si cette balise <meta name="viewport" content="width=device-width, initial-scale=1> est bien compatible avec les Media queries ? 

3/ Est-ce que cette balise et les Media queries sont deux méthodes différentes, sont-elles complémentaires ou bien peuvent-elles entrer en conflits ?

Juste pour préciser : je ne veux pas d'AMP, c'est juste horrible, je ne veux pas de ce truc infâme, et mon thème est SEOmag, donc vu la qualité de ce thème (que je conseille grandement), ça ne vient pas de là !

Merci de vos réponses.


Linux / Chrome 123.0.0.0


A voir également:

4 réponses

Escienca Messages postés 428 Date d'inscription mercredi 12 janvier 2011 Statut Membre Dernière intervention 29 mai 2024 57
Modifié le 30 avril 2024 à 18:42

Re,

mon souci n'est toujours pas résolu (c'est en cours) mais voilà déjà un site incroyablement pratique qui va vous montrer... Comment beaucoup de gens voient votre blog sur leurs propres écrans !!! Je pense que la plupart des utilisateurs de WordPress ne se doutent même pas d'un dixième de ça et vont être surpris ! Entrez l'adresse de l'index ou d'une page de votre de votre blog et regardez le résultat !!! Sic ! Wordpress n'est pas du tout nativement responsive !

http://www.responsinator.com/


bg62 Messages postés 23620 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 8 juillet 2024 2 371
30 avril 2024 à 18:45

jusque là rien de nouveau ....   :)

0
bg62 Messages postés 23620 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 8 juillet 2024 2 371
30 avril 2024 à 18:48

WP est une véritable usine à gaz dont les gens font principalement ' commerce ' un peu n'importe comment ....

on ne manipule pas 'en dur' un thème ( par exemple ) sans véritablement s'y connaître ...

celui dont tu nous parler est ' payant ' et donc ... normalement il doit avoir un suivi ET donner les réponses à toutes ces questions qui le plus souvent sont résolues avec un ou x plugins + quelques tests personnels, jusqu'aux prochaines mises à jour ...


Escienca Messages postés 428 Date d'inscription mercredi 12 janvier 2011 Statut Membre Dernière intervention 29 mai 2024 57
Modifié le 1 mai 2024 à 13:05

Re,

j'ai eu une réponse du staff du thème. Il m'ont expliqués les breakdowns en diminunant la résolution de l'écran jusqu'au point de rupture. Je pense que c'est la solution.

Le souci venait surtout du fait que j'ai fortement modifié mon CSS en me servant de l'écran du PC fixe, pensant rêgler le reste avec de simples Media queries ! Mais les Média queries, c'est tout sauf simple ! Et je ne connaissais pas le concept des points de ruptures.

Je teste ça demain.

Mon blog, qui donc s'affiche très mal sur les mobiles, surtout la page d'acceuil

https://www.desmotssanschaines.fr/

0
bg62 Messages postés 23620 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 8 juillet 2024 2 371
1 mai 2024 à 13:07

ben voilà :

1 - tu as bidouillé toi-même sans trop t'y connaître

2 - tu as demandé aux auteurs

Perso je remettrai tout à zéro avant d'entreprendre quoique ce soit, et ceci sur un 'site d'essai' avant de toucher au vrai ....

bon courage :)


Escienca Messages postés 428 Date d'inscription mercredi 12 janvier 2011 Statut Membre Dernière intervention 29 mai 2024 57
Modifié le 3 mai 2024 à 12:16

Bonjour,

en vieux Linuxien que je suis, j'ai une constante en informatique : faut que ça marche !  Et avec Wordpress, qui est en effet une grosse bête extrêmement sensible, ce concept s'applique à la lettre ! Il faut s'acharner, chercher, tester, se planter, recommencer... Et ça finit toujours par marcher ! :-)

0
Escienca Messages postés 428 Date d'inscription mercredi 12 janvier 2011 Statut Membre Dernière intervention 29 mai 2024 57
3 mai 2024 à 12:11

Rebonjour,

Voilà, c’est résolu, après 7 jours et nuits de sang et de larmes (j’abuse un peu, mais les wordpressistes me comprendront ^^ ) mon blog est désormais totalement responsive. Youpi !

Il s’agissait d’abord de comprendre le concept des breakdowns (points de ruptures). Cela signifie que vous travaillez le CSS de votre thème sur votre propre écran avec sa propre résolution (PC fixe, PC portables, etc) puis il faut que les visiteurs de votre blog le voient parfaitement affiché sur leurs propres écrans, avec sa propre résolution. Quand l’appareil détecte un écran avec une résolution différente du CSS que vous avez créé sur votre propre résolution, cela se nomme « un point de rupture (breakdown) » et la Media query va alors s’appliquer. C’est très important, car aujourd’hui, les écrans sont multiples et quasi infinis : PC fixes et portables, téléphones, tablettes, liseuses, bientôt les écrans hologrammes sans supports, etc. Ne pas optimiser cela, c’est perdre beaucoup de visiteurs et votre taux de rebond va exploser. Pour exemple, rien qu’avec ça depuis 2 jours, mon TDR est passé de 64 % à 48 % ! On y gagne quand même pas mal.

Pour calculer mon point de rupture, je me suis servi de 2 choses :

1/ Ce site absolument génial et pratique : http://www.responsinator.com/ qui va afficher votre blog sur les résolutions les plus courantes. C’est ici, quand tout s’affichera impeccable, que votre responsive sera au top et réussi. Vous pouvez aussi tester sur vos propres écrans, par exemple votre téléphone, en portrait et en paysage. Une fois que tout sera bon, vous pourrez enfin allez dormir ! ^^

2/ Les outils développeurs/affichages de mon navigateur, pour moi, c’est Chrome. Les tutos pour trouver et utiliser les outils développeurs/affichages des différents navigateurs étant nombreux, inutile que je détaille ici. 

3/ Le support de mon thème (SEOmag). La plupart des thèmes premium sont nativement responsives, mais si vous modifiez le CSS avec le customizer, alors vous perdez ce responsive, et c’est donc là que vous allez devoir trouver et appliquer votre point de rupture (breakdown). Les différents breakpoints (SEOmag) sont : 1920px, 1440px, 1280px, 1024px, 800px, 575px. 

Quand vous aurez obtenu les différents points de rupture définis par défaut pour votre thème, au boulot, vous allez devoir trouver votre propre point de rupture, puis appliquer le plus proche dans la liste défini par défaut par les développeurs de votre thème. Pour cela, en vous servant des sites et outils indiqués au-dessus, vous allez observer à quelles résolutions l’affichage casse (rupture). Une fois définis cette « rupture », vous allez devoir écrire une Media query, l’appliquer dans votre CCS personnalisé, et finalement, travailler ce CSS pour affiner l’affichage. À savoir qu’une Media query ne concerne que le Width (largeur), le Height (hauteur) étant toujours appliqué automatiquement sur tous les écrans en rapport au Width.
 
Pour exemple, j’avais calculé le breakdown de mon blog à 768px, j’ai donc appliqué la plus proche Media query défini par défaut dans mon thème, cela a donc donné :

@media screen and (max-width: 800px)

Oui, oui, c’est tout : c’est cette « simple » ligne qu’il faut appliquer avec le bon max-width !

Pour finir, trois conseils, qui, je pense, vous seront utiles :

1/ Quand vous testerez sur vos propres écrans, n’oubliez pas une chose : si vous aviez modifié l’affichage de votre appareil (plus grand, plus petit, etc.) n’oubliez pas de remettre l’affichage par défault, car certains navigateurs mobiles (par exemple Silk) ont du mal à gérer les breakdows si l’affichage n’est pas défini par défaut.

2/ Lorsque vous aurez appliqué votre Media query, si vous veniez à remodifier votre CSS de base, n'oubliez pas de recalculer votre breakdown !

3/ Pour finir cette longe réponse, un dernier conseil : comprenez bien que même avec ces concepts, tout ne pourra pas être parfait et au millimètre sur tous les écrans, il y aura toujours des petits points qui resteront moyens. Par exemple, sur l’index de mon blog, en paysage, la marge (margin-bottom) au-dessous du menu sur l’index est trop grande, mais en paysage, si je la diminue plus, mon widget, au-dessous, chevauche le menu. Il faut donc trouver des justes-milieux avec votre Webdesign, qui seront travaillés dans la partie CSS personnalisé de la Media query.

Ma conclusion concernant la balise :

<head>

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1" />

</head>

Je n’ai toujours pas très bien compris son utilité, je ne note aucune différence d’affichage responsive avec ou sans cette balise, mais je ne l’ai pas retiré du code de mon index, car lorsque je teste mon index sur le PageSpeed Insights de Google :

https://pagespeed.web.dev/

et si elle n’est pas présente, il me le signale en erreur, j’ai donc décidé de la laisser présente.

Voilà, ma longue réponse sur le responsive, absolument indispensable aujourd’hui pour votre blog, est terminé. Elle ne vous apprendra pas tout, mais je pense et espère qu’elle vous donnera les bonnes pistes pour travailler votre responsive.

À bientôt.