Come abilitare lo zoom nella versione mobile di Blogger.

Come rendere possibile lo zoom nella versione mobile di Blogger che di default non è possibile effettuare con il classico pizzico delle due dita.

Per impostazione di default, che ho constatato in tutti i modelli che ho visualizzato, viene impedito all'utente di aumentare le dimensioni della pagina visualizzata tramite dispositivo mobile. Chi usa lo smartphone conosce la semplice operazione di toccare lo schermo del cellulare con due dita unite e quindi di allargarle per visualizzare meglio i dettagli della pagina aperta.

Nella versione mobile dei blog su Blogger tale operazione di solito è impossibile effettuarla. Lo zoom invece è perfettamente funzionante nella versione desktop di Blogger e può essere usato pure con le dita se si ha un touch screen. Vediamo come fare una piccola modifica al codice per renderla invece possibile. Si utilizza la riga di codice del tag viewport di cui ho parlato nel post sulla Media Query.

Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca questo codice

<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>

dove 1100 è la larghezza della viewport che è diversa e superiore alla larghezza del modello. Il tag viewport è presente in due righe, la prima per la versione mobile e la seconda per la versione desktop. Infatti width='1100' è indicato solo nella versione desktop mentre in quella mobile abbiamo una riga di configurazione più lunga che è stata evidenziata di giallo. Vediamo in dettaglio il significato di ciascun tag:

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

I due ultimi tag in sostanza impediscono di utilizzare le due dita per ridimensionare la pagina perché sia il minimo sia il massimo ridimensionamento sono impostati su 1.0 che è il loro valore iniziale. Se lasciamo invariato il tag minimum-scale=1.0 e se invece 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. Ovviamente 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 per esempio in questo modo minimum-scale=0.7 per poter ridurre le dimensioni della pagina fino al 30%.  Per rendere le modifiche effettive dovremo naturalmente salvare il modello.