Comment résoudre le problème de la requête média qui ne fonctionne pas dans WordPress ?

L'une des composantes du responsive web design est le CSS Media Query. Les développeurs WordPress utilisent la technique media query pour s'assurer qu'un site web fonctionne de manière optimale sur tous les appareils et toutes les tailles d'écran. En cas de problème de fonctionnement de cette technique CSS, le message d'erreur "media query not working in WordPress" peut apparaître.

La correction de l'erreur "media query not working in WordPress" est essentielle pour garantir l'accessibilité de votre site web à tous, indépendamment du type et de la taille de l'écran. Vous trouverez ci-dessous quelques conseils pour résoudre l'erreur "media query not working in WordPress". Mais avant cela, voici une brève explication des media queries CSS.

Qu'est-ce qu'une requête de média CSS ?

Les media queries, l'une des caractéristiques des feuilles de style en cascade (CSS), permettent aux développeurs d'appliquer différents ensembles de règles CSS en fonction de conditions déterminées. Elles les aident à créer des mises en page variées en fonction du type d'appareil ou de la taille de la fenêtre du navigateur. La requête média est utilisée dans un fichier CSS individuel ou peut être insérée dans le code HTML d'une page web.

Il s'agit d'une norme recommandée par le W3C pour la conception de sites web réactifs. De plus, elle garantit que le contenu rendu est adaptable à différentes conditions, telles que les résolutions d'écran, la largeur du navigateur et le type d'appareil.

Utilisation des requêtes de média CSS

L'amélioration de l'expérience de l'utilisateur lors de la navigation sur un site web est l'un des facteurs permettant d'améliorer le classement d'un site web dans les résultats de recherche, et c'est là que CSS Media Query peut intervenir.

Les requêtes multimédias permettent de personnaliser l'apparence des pages web sur tous les appareils, tailles d'écran et résolutions. Elles fournissent des instructions spécifiques qui indiquent au navigateur comment rendre les pages web lorsqu'elles sont visualisées sur un téléphone portable, un ordinateur de bureau ou d'autres appareils.

En utilisant la requête média CSS, les développeurs peuvent créer des sites web accessibles et lisibles sur tous les appareils sans avoir à créer un site web mobile distinct.

En rapport: Différence entre un site mobile et un site réactif

Voici un exemple de requête média :

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

{

header { height: 70px; }

article { font-size: 14px; }

img { max-width: 480px; }

}

Les requêtes de médias sont utilisées pour :

• Application de styles conditionnels avec les règles CSS @media et @import.

• Déplacement d'une barre latérale sous le contenu du site lorsqu'une page est visualisée en mode portrait sur un appareil mobile.

• Targeting specific media <style>, <source>, and other HTML elements with the media= attribute.

• Ajustement de la largeur des colonnes en fonction de la taille de l'écran de l'appareil.

• Modification de la mise en page sur les appareils mobiles pour passer d'une mise en page en deux colonnes à une seule colonne.

Syntaxe des requêtes médias

Une requête média se compose des quatre éléments suivants. En comprenant la syntaxe, vous pouvez utiliser correctement les requêtes de média.

@media Rule

Cet élément permet de déclarer (spécifier) l'intention de mettre en place une requête média en CSS. Saisissez @media sans espace entre les deux.

Type de média 

Le type de média fait référence au type d'appareil pour lequel la requête de média est utilisée. Il comprend les règles suivantes :

• Tous: convient à tous les appareils et, dans les cas où le type de support n'est pas spécifié, "tous" est utilisé. 
• Discours: Ce type de média s'applique (ou est destiné) aux lecteurs d'écran.
• Imprimer: Si une page ou un document est en mode aperçu avant impression, le type de support "impression" est appliqué. Ce type de support est utilisé pour les imprimantes.
• Écran: Cette règle CSS s'applique aux écrans - smartphones, ordinateurs de bureau, tablettes, etc. 

Caractéristiques des médias 

L'élément media features est utilisé pour ajouter des détails spécifiques. Toutes les expressions relatives aux caractéristiques des médias sont placées entre parenthèses, par exemple une largeur maximale de 400px (appareils mobiles). Ici, l'élément media max-width est utilisé pour les appareils mobiles.

Les autres caractéristiques des médias et leurs fonctions sont les suivantes :

• Largeur: il s'agit de la largeur de la fenêtre de visualisation.
• Max-width: définit la "largeur maximale" de la fenêtre du navigateur.
• Hauteur: Il s'agit de la hauteur de la fenêtre de visualisation.
• Max-height: Définit la "hauteur maximale" de la fenêtre du navigateur.
• Min-height: Définit la "hauteur minimale" de la fenêtre du navigateur.
• Orientation: Il s'agit de l'orientation de la fenêtre de visualisation. (mode paysage ou portrait).

Opérateurs logiques

Les opérateurs logiques permettent de composer des requêtes de médias complexes et comprennent les éléments not, and et only. Il est également possible d'utiliser des virgules pour combiner une ou plusieurs requêtes de médias en une seule règle.

• Not: Si vous utilisez l'opérateur "not", vous devez spécifier un type de média. Généralement, l'opérateur "not" annule une requête de média.

• Et: Pour combiner deux ou plusieurs éléments multimédias en une seule requête, utilisez l'opérateur "et". Cet opérateur permet également de joindre des types de médias à des éléments de médias.

• Seulement: L'opérateur "only" est essentiel pour les navigateurs plus anciens. Il permet aux navigateurs plus anciens d'interpréter correctement la requête média, évitant ainsi des problèmes tels que l'erreur "media query not working in WordPress" (requête média ne fonctionnant pas dans WordPress). Précisez également le type de média lorsque vous utilisez l'opérateur "not".

• , (virgule): Cet opérateur est utilisé pour combiner plusieurs requêtes de médias en une seule règle. Lorsqu'une virgule est utilisée pour séparer plusieurs requêtes, chaque requête est traitée séparément. De plus, si la liste des requêtes est vraie, toute la liste des requêtes médiatiques reste vraie.

Astuces pour résoudre le problème de la requête média qui ne fonctionne pas dans WordPress

Une requête média CSS peut entraîner une erreur pour plusieurs raisons. Parfois, la requête de média peut fonctionner sur un appareil mobile, mais pas sur un ordinateur de bureau. Il arrive également qu'elle ne fonctionne pas sur tous les appareils. Pour vérifier la requête média de votre site, utilisez les outils de développement du navigateur et inspectez le CSS de votre site. Cliquez sur l'onglet "Styles" pour voir quel style est appliqué à l'élément (syntaxe) en question.

La plupart du temps, la raison de l'erreur "media query not working in WordPress" est assez courante. Voici donc quelques moyens de corriger cette erreur.

Vérifier la déclaration CSS en ligne

Si vous avez déclaré le CSS dans le document HTML, cela peut provoquer l'erreur "media query not working in WordPress". Vous pouvez y remédier en supprimant le "CSS déclaré en ligne" du document HTML.

Une autre solution consiste à remplacer cette déclaration par !important. Par exemple, pour changer la couleur du texte des paragraphes en "gris" sur les appareils mobiles, utilisez les lignes de CSS suivantes.

@media screen and (max-width: 1024px){

  p{        

        color: gray;

    }

}

Cependant, il peut arriver que cela ne fonctionne pas en raison du style en ligne appliqué au même élément. Dans ce cas, utilisez la règle !important pour remplacer le style en ligne et résoudre le problème.

@media screen and (max-width: 1024px){

  p{        

        color: gray !important;

    }

}

Positionner correctement les requêtes multimédias

Une autre raison de l'erreur "media query not working in WordPress" est le positionnement incorrect des media queries. Pour y remédier, ajoutez la requête média à la fin de la feuille de style.

Comme les navigateurs lisent la feuille de style de haut en bas, les codes mentionnés à la fin de la feuille de style peuvent remplacer les déclarations faites au début (sauf si !important est utilisé). En outre, pour les petites requêtes, placez les requêtes média avant le grand écran.

Voir l'exemple suivant

body {

background-color: black;

}

@media screen and (min-width: 480px) {

body {

background-color: blue;

}

}

@media screen and (min-width: 850px) {

body {

background-color: light blue;

text-align: center;

}

}

• Dans la première règle, la couleur d'arrière-plan est "noire" si l'écran est inférieur à 480 px.
• Dans la deuxième requête média, la couleur d'arrière-plan est "bleu" si la taille de l'écran est comprise entre 480 et 849 pixels.
• Enfin, si la taille de l'écran est égale ou supérieure à 580 pixels, la couleur d'arrière-plan sera "bleu clair" et l'alignement central.

Ordinateur de bureau vs mobile

Une fois que vous avez défini une requête média, celle-ci devrait fonctionner de manière optimale sur les ordinateurs de bureau et les téléphones portables. Toutefois, en cas d'erreur sur l'un ou l'autre, utilisez les conseils suivants pour résoudre le problème.

Media Query ne fonctionne pas sur l'ordinateur de bureau

Si vous avez utilisé la fonction "max-device-width" au lieu de "max-width", il se peut que la requête média ne fonctionne pas sur l'ordinateur de bureau. Ici, "max-width" fait référence à la taille de la zone d'affichage de l'appareil, tandis que "max-device-width" fait référence à la taille de l'écran d'un appareil (mobile).

Pour corriger l'erreur "media query not working on desktop", remplacez la fonction media par "max-width". Cela permet de spécifier la zone d'affichage du navigateur, et non la taille réelle de l'écran de l'appareil.

Media Query ne fonctionne pas sur les appareils mobiles

Likewise, if you have not set the viewport and default zoom, it could lead to the issue of media queries not working on mobile devices. To fix this, simply add the following code to your site’s header. Ensure that these lines of code are added within the <head> </head> element.

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

Ici, la "largeur" est la taille de l'écran, fixée à la largeur de l'appareil. Elle indique au navigateur de rendre le site web de manière à ce qu'il s'adapte naturellement à l'écran. Le paramètre "initial-scale" définit le niveau de zoom.

Lire: Comment éviter le CSS @import pour améliorer la vitesse de chargement des pages

Conclusion

Il est important de veiller à ce que votre site web soit accessible à tous, quel que soit le type d'appareil utilisé. La conception d'un site web réactif peut vous aider à générer du trafic à partir de différentes sources. Avec l'indexation "mobile-first" de Google, elle pourrait également conduire à une indexation plus rapide des pages web. En outre, les utilisateurs qui consultent votre site web sur des appareils mobiles bénéficieront d'une meilleure expérience, ce qui pourrait améliorer le classement de votre site.

La résolution de l'erreur "media query not working in WordPress" est simple une fois que vous en avez identifié la raison. Vous pouvez apporter les modifications nécessaires en suivant les conseils mentionnés ci-dessus.

Pour éviter que l'erreur "media query not working in WordPress" ne se reproduise, utilisez des plugins tels que Simple Custom CSS et WP Add Custom CSS pour ajouter un media query à votre site web.

Par ailleurs, si vous ne parvenez pas à résoudre l'erreur "media query not working in WordPress", contactez-nous. Nous sommes une agence WordPress qui aide les entreprises à résoudre les erreurs courantes de WordPress sur leur site web sans causer de temps d'arrêt.