Come mostrare un contenuto in funzione della risoluzione del dispositivo con cui si apre la pagina.

Come mostrare un elemento di un post solo se la pagina viene aperto con un dispositivo che abbia una risoluzione superiore a una data (per esempio da desktop e tablet ma non da smartphone).

Fino a due o tre anni fa la preoccupazione principale degli webmaster era quella di mostrare correttamente il proprio sito con tutti i browser. Soprattutto Internet Explorer era quello che dava le maggiori preoccupazioni. Tra non molto IE verrà ritirato e queste problematiche sono ormai secondarie rispetto alla gestione del layout dei siti in funzione delle risoluzioni dei dispositivi con cui vengono aperti.

Esistono raccolte di Temi per Wordpress e di Modelli per Blogger definiti Responsive che adattano l'aspetto al dispositivo in modo automatico e, per quanto riguarda la piattaforma Blogger, viene creata di default la versione mobile di tutti i blog che può anche essere personalizzata. Si possono però venire a creare delle situazioni particolari con elementi che non si adattano in modo naturale alle diverse risoluzioni. Se si incorpora un video di Youtube e se si scelgono 560 pixel di larghezza è evidente che se si apre il sito con un cellulare verranno a crearsi delle bande di scorrimento orizzontali perché il video avrà una larghezza superiore.

Un discorso simile può valere anche per una tabella o per altri contenuti che abbiano una larghezza definita. Si può tentare di risolvere con width al 100% ma non sempre tale soluzione è praticabile. Per risolvere si possono utilizzare le regole Media Query per nascondere un dato elemento quando le risoluzioni non consentano una perfetta visualizzazione. Vediamo come nascondere un contenuto quando la risoluzione del dispositivo sia inferiore per esempio ai 600 pixel.

Un tale contenuto dovrà essere pubblicato con questo codice

<style>
@media screen and (min-width: 0px) and (max-width: 599px) {
#videoplayer {display:none;}
}
</style>
<div id="videoplayer">
... Codice del video o del contenuto ...
</div>

Per dispositivi con risoluzione strettamente inferiore ai 600 pixel il video non si visualizzerà. L'ID videoplayer è puramente indicativo e può essere sostituito da un'altra espressione.

Invece di postare tutto il codice precedente possiamo optare per incollare la parte evidenziata di giallo nel modello subito sopra alla riga ]]></b:skin>. Quando vorremo inserire nel post un contenuto visibile solo con determinate risoluzioni basterà incollare solo la seconda parte del codice. I due valori dell'intervallo delle risoluzioni sono personalizzabili a piacere e si possono creare anche più CSS del tipo media query con un diverso comportamento per cellulari e per tablet.

Demo
Clicca qui

Gli screenshot sono stati effettuati con il tool Screenfly e per verificare la correttezza del codice selezionate i diversi dispositivi disponibili nella demo linkata qui sopra. Nel prossimo articolo mi occuperò di come mostrare un widget solo quando il dispositivo superi una data risoluzione.

Leggi anche: Mostrare widget diversi in funzione delle risoluzioni da mobile