Pubblicato il 02/11/15e aggiornato il

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.

mostrare-elemento-risoluzione
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.
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.




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.