Pubblicato il 17/02/17 - aggiornato il  | 9 commenti :

Come mostrare un contenuto di Blogger solo su mobile, solo su desktop o solo per certe risoluzioni.

Come creare un vincolo utilizzando un CSS per mostrare un contenuto solo per determinate risoluzioni o mostrarlo solo su desktop o solo su mobile con i tag condizionali.
Mentre qualche anno fa il problema maggiore degli webmaster era quello di mostrare lo stesso layout in funzione dei diversi browser ora la maggiore preoccupazione riguarda come viene visto il blog quando si apre con i diversi dispositivi da mobile o da desktop.

In un futuro neppure troppo lontano l'apertura di pagine web con il computer risulterà minoritaria rispetto all'utilizzo di smartphone o addirittura di Smart TV. Se i contenuti testuali sono visibili in modo ottimale con tutti i dispositivi ma non è così per tutti gli oggetti HTML.

Mentre per le immagini lo stesso Blogger ha risolto la questione ridimensionandole automaticamente quando sia stata attivata la versione mobile del sito non è così per i video, per le tabelle, ecc

Ho mostrato in altri post come rendere Responsive i video di Youtube e le tabelle personalizzate. In questo articolo vedremo invece come selezionare i contenuti da mostrare in un sito. Ci potrebbero essere degli oggetti HTML che non è possibile rendere Responsive e quindi da mostrare solo nella versione desktop e magari sostituirli con altri oggetti HTML nella versione mobile.






Un'altra discriminante è quella della risoluzione. Si può avere l'esigenza di mostrare un dato oggetto solo quando la risoluzione del dispositivo sia maggiore di un certo valore, quando sia inferiore a un certo valore o quando sia compresa in un certo intervallo di valori.






COME MOSTRARE UN OGGETTO HTML SOLO SU MOBILE O SOLO SU DESKTOP


Per questa personalizzazione bisogna creare delle classi di stile apposite che potremo chiamare rispettivamente .solodesktop e .solomobile. Nella piattaforma Blogger esistono i tag condizionali che permettono di selezionare la versione in cui mostrare un contenuto. 

Si va su Modello -> Modifica HTML, si cerca la riga </head> quindi subito sopra si incolla il codice

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

Si salva il modello. Quando si vogliono pubblicare dei contenuti visibili solo nella versione desktop o nella versione mobile dobbiamo incollare nell'Editor del post questo codice

<div class="solodesktop">
... Il codice inserito in questo punto creerà un contenuto visibile solo nella versione desktop del blog ...
</div>

oppure quest'altro

<div class="solomobile">
... Il codice inserito in questo punto creerà un contenuto visibile solo nella versione mobile del blog ...
</div>

Con questa personalizzazione i rispettivi contenuti saranno mostrati solo nei dispositivi mobili e solo in quelli desktop indipendentemente dalla loro risoluzione. Per esempio un netbook visualizzerà i contenuti della classe "solodesktop" anche se ha una risoluzione più bassa di un tablet in cui invece non si vedranno. La differenza tra versione mobile e desktop su Blogger è data dagli URL che per la versione mobile vengono addizionati della stringa ?m=1.






COME MOSTRARE UN OGGETTO HTML IN FUNZIONE DELLA RISOLUZIONE


Vediamo adesso come creare dei vincoli per mostrare alcuni contenuti solo quando la risoluzione del dispositivo con cui viene aperta la pagina sia inferiore a un certo valore, sia superiore a un dato valore o sia compresa in un intervallo di valori.

Per questa personalizzazione si utilizzano gli attributi di Media Query. Si va su Modello -> Modifica HTML e, subito sopra alla riga </head>, e si incolla un codice come il seguente

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

Se adesso nell'Editor di Blogger incolliamo un codice come questo

<div class="onlysmartphone">
  ...Il codice inserito in questo punto sarà visibile solo nei dispositivi con risoluzione inferiore agli 800 pixel ...
</div>

l'oggetto HTML inserito tra apertura e chiusura del tag div sarà visibile solo con dispositivi con risoluzione inferiore a 800 pixel. Se utilizziamo la classe onlydesktop il contenuto sarà invece visibile solo con dispositivi aventi risoluzione superiore ai 1280 pixel. Infine con la classe desktoptablet sarà visibile solo per dispositivi con risoluzione superiore a 1000 pixel.

I valori dei breakpoint delle risoluzioni (800, 1000 e 1280) sono assolutamente arbitrari.
 
contenuti-in-funzione-risoluzione

Si può testare il funzionamento di questi codici con il tool Screenfly.

CONTENUTI IN FUNZIONE DI RISOLUZIONE E DISPOSITIVO


È possibile unificare i due codici e imporre due vincoli, uno per il dispositivo e uno per la risoluzione. Per esempio se si incolla subito sopra a </head> questo codice

<b:if cond='!data:blog.isMobile'>
<style>
.onlysmartphone {display:none;}
</style>
</b:if>
<style>
@media screen and (min-width: 800px) {
.onlysmartphone {display:none;}
}
</style>

si creeranno due vincoli. Il contenuto compreso all'interno di un div di questo genere

<div class="onlysmartphone">
... Il contenuto incollato qui si visualizzerà solo da dispositivi mobili e solo se hanno una risoluzione inferiore a 800 pixel ...
</div>

inserito in Modalità HTML in un post di Blogger sarà visualizzato solo se aperto con un dispositivo mobile che abbia una risoluzione inferiore agli 800 pixel. Utilizzando queste personalizzazioni si possono per esempio mostrare dei banner pubblicitari solo su mobile o solo su desktop incollandone il codice direttamente all'interno di un post.




9 commenti :

  1. Grazie per l'articolo, ma è possibile avere l'immagine di sfondo visibile solo su desktop e non su mobile?

    RispondiElimina
    Risposte
    1. Si può fare certamente se si conosce il blocco di codice in cui è posizionato il CSS dello sfondo. Dovrebbe essere in un blocco del genere

      body {
      font: $(body.font);
      color: $(body.text.color);
      background: $(body.background);
      }

      Si toglie la riga

      background: $(body.background);

      e sopra </head> si incolla questo codice

      <b:if cond='!data:blog.isMobile'>
      <style>
      body {background: $(body.background);}
      </style>
      </b:if>

      @#

      Elimina
    2. No scherzavo... :(
      Vorrei che l'immagine che ho usato come sfondo (Non dietro l'header ma proprio su tutto lo sfondo) fosse visibile solo su desktop, mentre su mobile mi andrebbe bene anche uno sfondo bianco semplice.

      Elimina
  2. Il concetto è lo stesso. Se devono usare i tag condizionali per mostrare lo sfondo solo su desktop
    @#

    RispondiElimina
    Risposte
    1. Ho seguito il tuo commento e anche se l'immagine non mi spuntava nel "body" mi spunta nell'header, sia da desktop che da mobile...

      Elimina
    2. Quindi non c'è una soluzione? :(

      Elimina
    3. Dipende dal modo in cui è stato messo lo sfondo. Se è stato messo con Personalizza del Design Modelli o se è stato aggiunto in altro modo, se è uno sfondo colorato o se è una immagine, ecc
      Quello che si può fare è di creare dei tag condizionali per visualizzare lo sfondo solo da desktop. Se lo sfondo si vede nell'header è probabile che ci siano più blocchi di codice che lo contengono
      @#

      Elimina
    4. Ho risolto inserendo in un widget un'immagine tramite il codice img con div fixed e con index -1 così da apparire dietro tutti gli elementi.
      Spero possa essere utile anche agli altri.

      Elimina

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.