Mostrare elementi di un sito solo sul desktop o sul cellulare
Può capitare di aver bisogno a volte, di elementi che vengono visualizzati solo su un particolare dispositivo come sul desktop (come su questo sito, la barra laterale blu che sì vede solo su tablet e desktop), o, per fare un esempio ancora più semplice, quel blocco che compare quando visitiamo un sito con un tablet o smartphone che ci invita a scaricare l’app di quel dato sito.
In questo articolo vedremo come realizzare una cosa del genere attraverso Bootstrap.
Incominciamo col dire che Bootstrap prevede 8 variabili di dimensione schermo, che per comodità riporto integralmente:
Da mia esperienza è più comodo e da meno problemi di compatibilità usare gli .hidden-*, ma è una mia scelta personale.
Come sì capisce anche dall’immagine che è piuttosto semplice, ogni regola esclude una o più risoluzioni dalla visualizzazione del sito. In particolare le 4 regole che identificano le risoluzioni sono (modificato da me):
- XS: Extra Small (SmartPhone)
- SM: Small Device (Smartphone & alcuni Tablet)
- MD: Medium Device (Alcuni desktop e Tablet)
- LG:Large Devices (Desktop)
Come gestire queste regole?
Da alcuni test empirici effettuati su qualche sito su cui ho lavorato, la migliore soluzione è utilizzarli in coppie, ovvero XS e SM contro MD e LG. Questo perché, alcuni tablet, specie quelli delle ultime generazioni, hanno una risoluzione che ha volte è più alta di alcuni desktop.
Quindi se volete mostrare una cosa solo su dispositivi più grandi basterà utilizzare la regola hidden-xs e hidden sm. Molto semplice davvero.
Come sì utilizzano queste regole?
Inserire queste regole a livello di codice è veramente banale, visto che sono delle semplici classi css.
<div id="boh" class="hidden-xs hidden-sm">bla bla bla</div>
Ricorda però che se quello che vai a nascondere è un elemento essenziale del sito potresti comprometterne l’usabilità generale o l’esperienza d’uso di particolari funzioni. In tal caso usa la regola al contrario, e mostra un altro div con il contenuto alternativo, magari in un’altra posizione più comoda.
Perché mostrare cose piuttosto che altre su diverse risoluzioni?
A volte sì ha la necessità di alcuni elementi sul sito che non sempre però sono facilmente scalabili in tutte le risoluzioni. In questi casi basterò usare una di queste regole per mostrare o nascondere elementi da una o più risoluzioni. E magari, usando sempre le stesse regole, mostrarla da un’altra parte.
