Wordpress. Balise meta name viewport et Media queries.

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/

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 ...

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 :)

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.