Come risolvere il problema della query multimediale in WordPress?

Uno dei componenti del responsive web design è il CSS Media Query. Gli sviluppatori di WordPress utilizzano la tecnica della media query per garantire che un sito web funzioni in modo ottimale su tutti i dispositivi e le dimensioni dello schermo. Se c'è un problema con il funzionamento di questa tecnica CSS, potrebbe comparire il messaggio di errore "media query not working in WordPress".

Risolvere l'errore "media query not working in WordPress" è essenziale per garantire che il vostro sito web sia accessibile a tutti, indipendentemente dal tipo e dalle dimensioni dello schermo. Di seguito abbiamo fornito alcuni suggerimenti per risolvere l'errore "media query not working in WordPress". Ma prima di questo, ecco una breve spiegazione delle media query CSS.

Cosa sono le query multimediali dei CSS?

Una delle caratteristiche dei CSS (Cascading Style Sheets), le media queries consentono agli sviluppatori di applicare diverse serie di regole CSS in base a condizioni prestabilite. In questo modo è possibile creare layout di design diversi in base al tipo di dispositivo o alle dimensioni del viewport del browser. Le media query vengono utilizzate in un singolo file .CSS, oppure possono essere inserite all'interno dell'HTML di una pagina web.

È uno standard raccomandato dal W3C per la progettazione web reattiva. Inoltre, garantisce che il contenuto reso sia adattabile a diverse condizioni, come la risoluzione dello schermo, la larghezza del browser e il tipo di dispositivo.

Uso delle media queries dei CSS

Garantire all'utente un'esperienza migliore durante la navigazione di un sito web è uno dei fattori che migliorano il posizionamento di un sito web nei risultati di ricerca, ed è qui che CSS Media Query può aiutare.

Le media query aiutano a personalizzare l'aspetto delle pagine web su tutti i dispositivi, le dimensioni e le risoluzioni dello schermo. Fornisce istruzioni specifiche che indicano al browser come rendere le pagine web quando vengono visualizzate su dispositivi mobili, desktop o altri.

Utilizzando la media query CSS, gli sviluppatori possono creare siti web accessibili e leggibili su tutti i dispositivi, senza dover creare un sito mobile separato.

Correlato: Differenza tra un sito mobile e un sito reattivo

Ecco un esempio di query multimediale:

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

{

header { height: 70px; }

article { font-size: 14px; }

img { max-width: 480px; }

}

Le query multimediali sono utilizzate per:

• Applicazione di stili condizionali con le regole CSS @media e @import.

• Spostamento di una barra laterale sotto il contenuto del sito quando una pagina viene visualizzata in modalità verticale su un dispositivo mobile.

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

• Regolazione della larghezza delle colonne in base alle dimensioni dello schermo del dispositivo.

• Modifica del layout sui dispositivi mobili da un layout a due colonne a uno a una colonna.

Sintassi delle query multimediali

Una media query è composta dai seguenti quattro elementi. Comprendendo la sintassi, è possibile utilizzare correttamente le media query.

@media Rule

Questo elemento aiuta a dichiarare (specificare) l'intenzione di impostare una media query nei CSS. Inserire @media senza spazi intermedi.

Tipo di media 

Il tipo di media si riferisce al tipo di dispositivo per il quale viene utilizzata la media query. Include le seguenti regole:

• Tutti: adatto a tutti i dispositivi e, nei casi in cui il tipo di supporto non è specificato, viene utilizzato "tutti". 
• Discorso: Questo tipo di supporto è applicato (o destinato) agli screen reader.
• Stampa: Se un materiale di pagina o un documento è in modalità anteprima di stampa, viene applicato il tipo di supporto 'stampa'. Questo tipo di supporto viene utilizzato per le stampanti.
• Schermo: Questa regola CSS si applica agli schermi: smartphone, desktop, tablet e altro. 

Caratteristiche dei media 

L'elemento media features viene utilizzato per aggiungere dettagli specifici. Tutte le espressioni delle caratteristiche dei media sono inserite tra parentesi, come ad esempio una larghezza massima di 400px (dispositivi mobili). In questo caso, la caratteristica media max-width viene utilizzata per i dispositivi mobili.

Le altre caratteristiche dei media e le loro funzioni sono le seguenti:

• Larghezza: si riferisce alla larghezza della finestra di visualizzazione.
• Max-width: definisce la "larghezza massima" della finestra del browser.
• Altezza: Si riferisce all'altezza della finestra di visualizzazione.
• Altezza massima: Definisce l'altezza massima della finestra del browser.
• Altezza minima: Definisce l'altezza minima della finestra del browser.
• Orientamento: Si riferisce all'orientamento della finestra di visualizzazione. (modalità orizzontale o verticale).

Operatori logici

Gli operatori logici aiutano a comporre media query complesse e includono gli elementi not, and e only. Si possono anche usare le virgole per combinare una o più media query in un'unica regola.

• Not: se si utilizza l'operatore 'not', è necessario specificare un tipo di media. In genere, l'operatore 'not' annulla una query multimediale.

• E: Per combinare due o più caratteristiche multimediali in un'unica query multimediale, utilizzare l'operatore "and". Questo operatore può anche aiutare a unire i tipi di media con le caratteristiche dei media.

• Solo: L'operatore "solo" è essenziale per i browser più vecchi. Aiuta i browser più vecchi a interpretare correttamente la media query, evitando così problemi come l'errore "media query not working in WordPress". Inoltre, specificate il tipo di media quando usate l'operatore "not".

• , (virgola): Questo operatore viene usato per combinare più query multimediali in un'unica regola. Quando si usa una virgola per separare più query, ogni query viene gestita separatamente. Inoltre, se l'elenco di query è vero, l'intero elenco di query multimediali rimane vero.

Suggerimenti per risolvere il problema della query multimediale in WordPress

Una media query CSS può dare luogo a un errore per diversi motivi. A volte la media query può funzionare su un dispositivo mobile ma non su un desktop. A volte potrebbe non funzionare su tutti i dispositivi. Per verificare la media query del sito, utilizzare gli strumenti di sviluppo del browser e ispezionare il CSS del sito. Fare clic sulla scheda "Stili" per vedere quale stile è applicato all'elemento (sintassi) in questione.

La maggior parte delle volte, il motivo per cui la "media query non funziona in WordPress" è abbastanza comune. Ecco quindi alcuni modi per risolvere questo errore.

Verificare la presenza di dichiarazioni CSS in linea

Se il CSS è stato dichiarato all'interno del documento HTML, potrebbe causare l'errore "media query not working in WordPress". È possibile risolvere il problema rimuovendo il "CSS dichiarato in linea" dal documento HTML.

Un altro modo è quello di sovrascrivere questa dichiarazione con ;important. Per esempio, per cambiare il colore del testo dei paragrafi in 'grigio' sui dispositivi mobili, utilizzare le seguenti righe di CSS.

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

  p{        

        color: gray;

    }

}

Tuttavia, a volte questo potrebbe non funzionare a causa dello stile in linea applicato allo stesso elemento. In questi casi, utilizzare la regola !important per sovrascrivere lo stile in linea e risolvere il problema.

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

  p{        

        color: gray !important;

    }

}

Posizionare correttamente le query multimediali

Un'altra causa dell'errore "media query not working in WordPress" è il posizionamento errato delle media query. Per risolvere questo problema, aggiungete la media query alla fine del foglio di stile.

Poiché i browser leggono il foglio di stile dall'alto verso il basso, i codici citati alla fine del foglio di stile possono sovrascrivere le dichiarazioni fatte all'inizio (tranne quando si usa !important). Inoltre, per le query di piccole dimensioni, posizionare le media query prima di quelle di grandi dimensioni.

Guardate questo esempio

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;

}

}

• Nella prima regola, il colore di sfondo è 'nero' se lo schermo è inferiore a 480px.
• Nella seconda media query, il colore di sfondo è 'blu' se lo schermo è compreso tra 480 e 849px.
• Infine, se lo schermo è di 580px o più, il colore di sfondo sarà 'azzurro' con allineamento al centro.

Desktop vs Mobile

Una volta impostata una media query, questa dovrebbe funzionare in modo ottimale sia su desktop che su mobile. Tuttavia, se si verifica un errore su uno dei due, utilizzare i seguenti suggerimenti per risolvere il problema.

La query multimediale non funziona sul desktop

Se si è utilizzata la funzione media "max-device-width" invece di "max-width", è possibile che la query media non funzioni sull'errore del desktop. In questo caso, "max-width" si riferisce alla dimensione dell'area di visualizzazione del dispositivo, mentre "max-device-width" si riferisce alla dimensione dello schermo di un dispositivo (mobile).

Per risolvere l'errore "media query not working on desktop", cambiare la caratteristica media in "max-width". Questa specifica l'area di visualizzazione del browser, non la dimensione effettiva dello schermo del dispositivo.

Le query multimediali non funzionano sui dispositivi mobili

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"/>

In questo caso, 'width' è la dimensione del viewport, impostata su device-width. Indica al browser di rendere il sito web in modo che si adatti naturalmente allo schermo. Mentre 'initial-scale' definisce il livello di zoom.

Leggi: Come evitare CSS @import per migliorare la velocità di caricamento della pagina

Conclusione

È importante garantire che il vostro sito web sia accessibile a tutti, indipendentemente dal tipo di dispositivo utilizzato. Il design di un sito web responsive può aiutarvi a generare traffico da diverse fonti. Con l'indicizzazione mobile-first di Google, potrebbe anche portare a un'indicizzazione più rapida delle pagine web. Inoltre, fornirà un'esperienza migliore agli utenti che navigano sul vostro sito web su dispositivi mobili, migliorando così il posizionamento del vostro sito.

Risolvere l'errore "media query non funzionante in WordPress" è semplice una volta individuato il motivo. È possibile apportare le modifiche necessarie seguendo i suggerimenti di cui sopra.

Per evitare che l'errore "media query not working in WordPress" si ripeta, utilizzate plugin come Simple Custom CSS e WP Add Custom CSS per aggiungere una media query al vostro sito web.

Inoltre, se non riuscite a risolvere l'errore "media query not working in WordPress", contattateci. Siamo un'agenzia WordPress che aiuta le aziende a risolvere gli errori più comuni di WordPress sul loro sito web senza causare alcun downtime.