Blogger: attivare lo zoom quando il blog è aperto da cellulare e tablet

Come permettere di zoomare sulle pagine dei blog su Blogger da smartphone per ingrandire testo e immagini con una modifica di un tag del Tema

I problemi di presbiopia iniziano dopo i quaranta anni e rendono più difficoltosa la visualizzazione degli oggetti vicini. Nonostante questo handicap, pare che gli over 55 italiani siano i più attivi di Europa nell'utilizzo dello smartphone, superando quindi le ovvie difficoltà di visualizzazione e soprattutto di lettura del testo.

In quasi tutti i modelli di cellulare più avanzati esiste l'opzione di ingrandire una pagina web toccando lo schermo dello smartphone con due dita unite per poi allargarle. In questo modo viene attivata la funzione di zoom che ingrandisce il contenuto, sia esso testo, immagine o qualsiasi altro oggetto HTML.

In alcuni Temi della piattaforma Blogger, se aperti con determinate marche di cellulari o tablet, le impostazioni non ci permettono di zoomare nella pagina utilizzando le due dita e il touchscreen. Personalmente mi ero accorto di questo limite qualche anno fa anche se adesso, utilizzando il browser Chrome su Android con un OnePlus, non ho più riscontrato siti su Blogger che impedissero lo zoom.

Da un commento ricevuto sulla Pagina di Facebook ho constatato però che l'impossibilità di effettuare lo zoom persiste in certe circostanza. Sarà compito di questo post mostrare come rimuovere il blocco dello zoom.

ABILITARE LO ZOOM SUI TEMI CON VERSIONE MOBILE

Iniziamo a considerare i vecchi modelli di Blogger che, per essere ben visualizzati anche nei cellulari, dovevano abilitare la versione mobile. Si va su Bacheca -> Tema -> Backup/Ripristino per poi andare su Scarica Tema. Verrà scaricato un file in formato .XML che potrà servire per il ripristino del Tema da effettuare con lo stesso strumento, ma andando su Scegli File -> Carica. Dopo questa operazione dettata dalla prudenza, si va ancora su Tema -> Modifica HTML e si clicca nell'area del codice.

Digitate Ctrl+F e incollate la stringa viewport nella casella di ricerca che appare in alto a destra. Andate su Invio. Verrà evidenziata la stringa cercata in un blocco di codice nelle prime righe del Tema.

Il blocco di codice con il tag viewport sarà molto simile al seguente:

<b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
     <b:else/>
      <meta content='width=1100' name='viewport'/>
     </b:if>

Ho già parlato del tag viewport nel post in cui ho illustrato il funzionamento dei tag Media Query o Media Screen. Con tale tag si definisce la larghezza dell'area di visualizzazione per fare in modo che il browser del device la rilevi e che la adatti automaticamente alla larghezza del dispositivo.

Nei modelli vecchio tipo come vedete sono impostati due viewport in funzione del tipo di device con cui viene aperto il sito su Blogger. Ciascuno di essi si attiverà, con il rispettivo tag condizionale, se la pagina viene aperta rispettivamente con dispositivo desktop o con dispositivo mobile.

Il viewport per il desktop è fissato in 1100 pixel ed è configurato nella riga evidenziata di verde. Il viewport per il mobile non ha invece una larghezza fissata a priori. Il tag width=device-width imposta il viewport con una larghezza uguale a quella del dispositivo. Analizziamo i tag della riga evidenziata di giallo per il mobile:

1. width=device-width    imposta la larghezza del viewport uguale a quella del dispositivo mobile
2. initial-scale=1.0 imposta la visualizzazione iniziale senza alcuno zoom con scala 1.0
3. minimum-scale=1.0  imposta il minimo ridimensionamento a 1.0
4. maximum-scale=1.0  imposta il massimo ridimensionamento a 1.0

In sostanza i due ultimi tag impostano minimo e massimo ridimensionamento entrambi a 1.0 e questo significa rendere impossibile lo zoom sia, per ingrandire sia per rimpicciolire il contenuto della pagina web.

Se lasciamo invariato il tag minimum-scale=1.0 e se sostituiamo l'altro tag con maximum-scale=1.5, potremo con lo zoom aumentare le dimensioni della pagina fino al 50% mentre non le potremo diminuire. Al posto di 1.5 possiamo mettere anche un altro valore come 1.8 o 2.0, come del resto potremo anche modificare il primo tag, p.e. in questo modo minimum-scale=0.7, per poter ridurre le dimensioni della pagina fino al 30%, pizzicando lo schermo con le dita invece di allargarle.

Le modifiche risulteranno effettive solo dopo aver salvato il Tema. 

ABILITARE LO ZOOM NEI NUOVI TEMI RESPONSIVE

Dal Marzo del 2017 sono disponibili su Blogger dei Temi Responsive che si adattano automaticamente alla risoluzione del dispositivo con cui vengono aperti. Anche con questi temi si può avere il problema della mancanza dello zoom quando aperti da dispositivo mobile. Vediamo come procedere.

Si salva il Tema come in precedenza e si va su Tema -> Modifica HTML per poi cercare viewport nel codice. Stavolta il blocco di codice nel quale è presente tale tag sarà simile al seguente:

<meta content='width=device-width, initial-scale=1' name='viewport'/>

senza tag condizionali perché esiste solo una versione e non c'è quella mobile. In un blog con la riga precedente dovrebbe funzionare anche lo zoom. Se però fosse presente un blocco di codice come questo

<meta content='width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0' name='viewport'/>

con le due condizioni che impongono un massimo e un minimo di zoom uguali a quello iniziale, potrebbe essere impossibile lo zoom da certi dispositivi mobili. Per risolvere si utilizza lo stesso accorgimento di prima e si sostituisce maximum-scale=1.0 p.e. con maximum-scale=1.4, per abilitare uno zoom che ingrandisce del 40% tutte le dimensioni lineari. Ovviamente va poi salvato il Tema per poi testare se il problema è stato risolto.