Come mostrare un contenuto di blogger solo su smartphone, solo su tablet o solo su desktop.

Come imporre delle condizioni per mostrare un contenuto di una pagina web (Blogger o Wordpress) solo se aperto da desktop solo se aperto da smartphone o sole se aperto da tablet.

Partiamo dal problema per poi mostrare una possibile soluzione dello stesso. Molto spesso vengono pubblicati elementi in un post che vengono visualizzati correttamente se la pagina viene aperta con un computer ma che invece non lo sono quando sono visualizzati con dispositivi mobili.

Ci potrebbero essere delle immagini particolarmente larghe che debordano dal layout della pagina da mobile oppure dei video postati con larghezza di 560 pixel che sono troppi se il post viene aperto da smartphone. Il trucco che voglio proporre parte dalla possibilità che hanno tutti gli webmaster (anche quelli su piattaforma Wordpress) di inserire delle condizioni per mostrare i contenuti a seconda della risoluzioni del dispositivo con cui viene aperta la pagina.

Creiamo tre classi di stile che chiameremo onlysmartphone, onlydesktop e desktoptablet. La prima classe servirà per mostrare certi contenuti solo se aperti da cellulare, la seconda per mostrarli solo se aperti da desktop e la terza di mostrarli se aperti da desktop o tablet. Fissiamo innanzitutto delle risoluzioni di riferimento che potrebbero essere le seguenti:

1. onlysmartphone con risoluzioni uguali o inferiori a 415 pixel
2. onlydesktop con risoluzioni superiori a 800 pixel
3. desktoptablet con risoluzioni superiori a 530 pixel

Si crea un codice come il seguente:

<style>
@media screen and (min-width: 415px) {
 .onlysmartphone {display:none;}
 }
 @media screen and (max-width: 800px) {
 .onlydesktop{display:none;}
 }
@media screen and (max-width: 530px) {
 .desktoptablet{display:none;}
 }
</style>

e si incolla sopra alla riga </head> in Modello -> Modifica HTML. Si salva il modello.
Adesso apriamo l'Editor di Blogger e pubblichiamo un codice di esempio come questo:

<div class="onlysmartphone">
  QUESTO CONTENUTO SARÀ VISIBILE SOLO DA SMARTPHONE 
</div>

tutto quello contenuto dalle due righe che determinano l'inizio e la fine del contenitore <div> sarà visibile solo da smartphone. Ecco il test effettuato con Screenfly:

Analogamente un codice come questo

<div class="onlydesktop">
  QUESTO CONTENUTO SARÀ VISIBILE SOLO DA DESKTOP
</div>

mostrerà il contenuto solo se la pagina è aperta con un dispositivo con risoluzione superiore a 801px. 




Infine con questo codice

<div class="desktoptablet">
QUESTO CONTENUTO SARÀ VISIBILE DA DESKTOP E TABLET 
</div>

il contenuto sarà visibile solo se la pagina viene aperta con desktop o tablet.

ESEMPIO PRATICO DI UTILIZZO DI QUESTA TECNICA PER I VIDEO DI YOUTUBE

Quando si pubblica un video in un post si devono indicare le dimensioni che debbono essere adeguate alla larghezza del layout della pagina che però varia da dispositivo a dispositivo con cui viene aperta. Se si utilizza una larghezza di 560 pixel questa va bene per la visualizzazione desktop e per la grande maggioranza dei tablet ma non va bene per gli smartphone. Si apre quindi il video di Youtube che si vuole postare. Si va su Condividi -> Codice da incorporare quindi si va su Mostra Altro. Si impostano due diverse larghezze, per esempio 480x360 e 320x240, aiutandoci anche con le dimensioni personalizzate. I due codici evidenziati di giallo e di verde li incolleremo così:

<div align='center'>
<div class="desktoptablet">
<iframe width="480" height="360" src="https://www.youtube.com/embed/N-takCrBam8?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="onlysmartphone">
<iframe width="320" height="240" src="https://www.youtube.com/embed/N-takCrBam8?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> 
</div>
</div>

Il risultato sarà quello di mostrare un video di larghezza 480 pixel nei desktop e nei tablet e lo stesso video ma di larghezza 320 pixel negli smartphone.

Questa tecnica potrebbe essere applicata anche ai banner pubblicitari per inserire la pubblicità all'interno di un articolo per esempio solo nei cellulari e nei tablet dove viene nascosta quella della sidebar. I breakpoint del passaggio tra una visualizzazione e un'altra possono essere modificati.

APPENDICE

Si può creare un codice in modo da mostrare un contenuto solo da dispositivi mobili vale a dire solo da smartphone e tablet. Il codice da incollare sopra </head> è il seguente

<style>
@media screen and (min-width: 801px) {
 .nodesktop {display:none;}
 }
</style>

mentre il codice da aggiungere nel post diventa

<div class="nodesktop">
  QUESTO CONTENUTO SARÀ VISIBILE SOLO DA SMARTPHONE E TABLET 
</div>

Se invece decideste di mostrare un contenuto solo su tablet i codici da incollare nel modello e nel post diventerebbero i seguenti:

<style>
@media screen and (max-width: 500px) {
.onlytablet  {display:none;}
 }
@media screen and (min-width: 801px) {
.onlytablet  {display:none;}
 }
</style>

e

<div class="onlytablet">
QUESTO CONTENUTO SARÀ VISIBILE SOLO DA TABLET 
</div>

L'intervallo di visualizzazione è stato impostato tra i 501 e gli 800 pixel.