Mostrare su Blogger contenuti diversi in funzione della risoluzione e del dispositivo mobile o desktop.

Come mostrare o meno in Blogger un contenuto o un widget in funzione della risoluzione del dispositivo e se sia desktop o mobile.

La piattaforma Blogger ha rilasciato Temi Responsive che adattano il loro layout al tipo e alla risoluzione del dispositivo con cui vengono aperte le pagine di un sito.

Questi modelli però non stanno ottenendo un successo straordinario tra gli utenti perché sono di difficile personalizzazione e i codici dei Temi sono piuttosto diversi tr di loro rendendo difficile che una personalizzazione per un dato tema funzioni anche con un altro.

Chi ha un blog con un Tema tradizionale deve però continuamente pensare a come vengono visualizzati da mobile i contenuti che pubblica. Ricordo che per questi modelli si può attivare il Modello per dispositivi mobili andando su Tema -> Cellulare -> Icona della ruota dentata e selezionando l'opzione Sì. Mostra la versione mobile del tema sui dispositivi mobili. Più in basso in Scegli tema per dispositivi mobili conviene mettere la spunta su Personalizza in modo da poter modificare il codice del modello per personalizzarne l'aspetto da mobile.

Quando una pagina di un sito su Blogger viene visualizzata da mobile, all'URL canonico viene aggiunta la stringa ?m=1 e questo accade per la Home, per le Pagine e per i Post.

Quando un elemento HTML ha una larghezza definita subentrano delle difficoltà oggettive. Per le immagini la questione è stata risolta dallo stesso Blogger che in automatico le ridimensiona quando la pagina viene aperta da mobile. In verità le ridimensiona anche troppo visto che da mobile spesso sono troppo corte per il layout.

È possibile utilizzare una semplice procedura per fare in modo che le immagini prendano tutta la larghezza della pagina. In sostanza si sostituisce il valore assoluto della larghezza con una percentuale.

Ho anche mostrato come far diventare Responsive le Tabelle in modo che non vengano tagliate nella visualizzazione da mobile con dispositivi a bassa risoluzione. È stato pure brillantemente risolto il problema della visualizzazione dei video di Youtube e degli altri siti di video sharing mostrandoli in modo Responsive.

Ci possono però sempre essere delle situazioni particolari diverse da quelle prese in esame in cui si deve necessariamente variare il contenuto della pagina in relazione al dispositivo con cui viene aperta.

MOSTRARE DUE CONTENUTI DIVERSI DA DESKTOP E DA MOBILE

Come prima casistica non prendiamo in considerazione la risoluzione del dispositivo ma solo se si tratta di un computer desktop o di un dispositivo mobile. I tag condizionali funzionano solo nel codice del modello e non sono rilevati se vengono pubblicati nell'HTML di un post.

Per pubblicare contenuti diversi dobbiamo andare su Tema -> Modifica HTML e cercare la riga </head> quindi subito sopra a questa incollare il seguente codice

<b:if cond='data:blog.isMobile'>
<style>
.perdesktop {display:none;}
</style>
</b:if>
<b:if cond='!data:blog.isMobile!>
<style>
.permobile {display:none;}
</style>
</b:if>

Si salva il Tema. Quando desideriamo pubblicare un contenuto che sarà visibile solo nel desktop, nell'HTML dell'Editor del post dovremo usare un codice come il seguente

<div class='perdesktop'>
... Codice dell'elemento da mostrare solo se aperto da desktop ...
</div>

Viceversa per mostrare un elemento solo se la pagina è aperta da mobile il codice da usare sarà questo

<div class='permobile'>
... Codice dell'elemento da mostrare solo se aperto da mobile ...
</div>

Per esempio nel caso in cui fosse difficile visualizzare un elemento da mobile lo si mostra solo su desktop e subito sotto si incolla un testo visibile solo da mobile che invita il lettore a aprire la versione desktop per vederlo. I nomi delle due classi colorate di viola sono puramente indicativi e possono essere modificati.

MOSTRARE UN CONTENUTO IN FUNZIONE DELLA RISOLUZIONE

Adesso prendiamo in considerazione solo la risoluzione del dispositivo a prescindere dal tipo. Si va sempre su Tema -> Modifica HTML, si cerca la riga ]]></b:skin> e, subito sopra, si incolla questo codice

/* MEDIA QUERY INIZIO */
@media screen and (min-width: 529px) {
  .onlysmartphone {display:none;}
  }
  @media screen and (max-width: 800px) {
  .onlydesktop{display:none;}
  }
@media screen and (max-width: 530px) {
  .desktoptablet{display:none;}
  }
/* MEDIA QUERY FINE */

Si salva il Tema. Quando si vuole pubblicare un contenuto che sia visibile solo con un computer lo si pubblicherà in Modalità HTML dell'Editor di Blogger usando un codice con questa struttura di base

<div class='onlydesktop'>
... Codice dell'elemento da mostrare solo con un dispositivo con risoluzione maggiore di 800 pixel ...
</div>

Analogamente con un codice come il seguente

<div class='onlysmartphone'>
... Codice dell'elemento da mostrare solo se aperto con un dispositivo con risoluzione inferiore a 530 pixel ...
</div>

il contenuto verrà mostrato solo nei dispositivi con una risoluzione massima di 530 pixel. I valori inseriti cioè 530 e 800 pixel sono puramente indicativi e possono essere modificati a piacere.

Queste regole CSS possono essere usate anche per mostrare o nascondere un widget di Bloger in funzione della risoluzione del dispositivo. I CSS del tipo Media Query non sono tipici di Blogger e possono essere usati anche all'interno di un post. Per esempio possiamo incollare questo codice nell'Editor in HTML

<style>
@media screen and (min-width: 0px) and (max-width: 599px) {
#nosmartphone {display:none;}
}
</style>
<div id="nosmartphone">
... Codice del contenuto che sarà visibile solo con risoluzioni di almeno 600 pixel ...
</div>

in tutti i post che ci servirà senza bisogno di modificare il modello. Da notare che stavolta ho usato un ID e non un classe e quindi il cancelletto # invece del puntino.



Gli screenshot sono stati presi con il tool Screenfly che può essere usato per testare queste personalizzazioni.