Pubblicato il 27/08/16e aggiornato il

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:

visibile-smartphone

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


contenuto-solo-desktop

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.

video-smartphone-tablet

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.




4 commenti :

  1. Volevo chedere se io inserisco a pagina di contact un nr di cell come poso rendelo clikabile per lanciare una chemata directamente da celulare smartfon tablet per realizare un link clikabile in scopo di svolgere una chiamata normale non su skipe come in vechi tempi ma directamente gsm.

    RispondiElimina
    Risposte
    1. Non vedo come si possa collegare una attività su un sito a un cellulare del tipo GSM. Ci deve essere per forza una applicazione a fare da intermediario sia se si apre nel computer sia se si apre nello smartphone
      @#

      Elimina
  2. Volevo dire che sono su alcuni siti dove o visto pulsante chiama con nr di cell che se il sito web e visto da smartphone se premi pulsante si va a chiamare quel numero directamente de smartphone. Come si può fare ... grazie mille .

    RispondiElimina
    Risposte
    1. Non lo so. Non sono onnisciente purtroppo :)
      @#

      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.