Funzione wp_is_mobile() – Definizione con Esempi Pratici di Utilizzo

La funzione booleana (quindi ci restituirà o vero o falso)

wp_is_mobile()

si occupa di controllare se il browser corrente funziona su un dispositivo mobile, quindi se l’utente sta visitando una pagina con uno smartphone o tablet.

Funziona attraverso il rilevamento della stringa user agent del browser

$_SERVER['HTTP_USER_AGENT']

wp_is_mobile(): quando e come utilizzarla

Non pensiamo a questa funzione come a un modo per rilevare i telefoni. Il suo scopo non è rilevare la larghezza dello schermo, ma piuttosto adeguarsi alle risorse potenzialmente limitate dei dispositivi mobili.

Un dispositivo mobile potrebbe avere meno potenza della CPU, memoria o larghezza di banda disponibile. Questa funzione ci restituirà true per un tablet, poiché è considerato un dispositivo mobile. Non sostituisce le query multimediali CSS o lo stile per piattaforma.

Un modo in cui questa funzione può essere utilizzata in un tema è produrre una versione molto leggera del sito che non ha il grande carico utile del sito desktop. Teniamo conto che sia la versione desktop che quella mobile della pagina dovranno comunque essere responsive, poiché un vecchio telefono verticale avrà una larghezza significativamente diversa rispetto a un moderno iPad in orizzontale.

wp_is_mobile() restituisce true sia per smartphone sia per iPad. Allo stesso modo, una finestra del browser desktop potrebbe non essere visualizzata a tutta larghezza. Essenzialmente questo approccio può raddoppiare la quantità di lavoro che dovremo investire nella realizzazione del tema. Tuttavia, per un tema strettamente ottimizzato o un’esperienza mobile unica, potrebbe essere essenziale.

In alcuni casi può tornarci utile anche per mostrare/nascondere elementi in pagina, senza utilizzare le media query da CSS. Vediamo alcuni esempi pratici:

if ( wp_is_mobile() ) {
   $testo_cta = "Leggi tutto";
}else{
   $testo_cta ="Leggi tutti i nostri articoli";
}

echo "<button class='btn btn-dark' type='button'>";

<?php echo $testo_cta; ?>

echo "</button>";

Ipotizziamo di voler gestire il testo di un pulsante in modo tale che, su dispositivi mobili sia più breve (dato lo spazio ridotto) e su device desktop, sia più lungo. Con il precedente codice cambiamo il valore della variabile $testo_cta al verificarsi di uno dei due casi.

Oppure nascondere una sezione intera utilizzando wp_is_mobile() combinato con una regola CSS:

if ( wp_is_mobile() ) {
   $display_sezione = "none";
}else{
   $display_sezione ="";
}

<footer class="footer" style="display: <?php echo $display_sezione; ?>">
      <div class="container">
        <span class="text-muted">Place sticky footer content here.</span>
      </div>
    </footer>

In questo esempio andiamo ad gestire dinamicamente la proprietà “display” del CSS, quando il dispositivo è mobile, diventerà:

display:none;