Gestire l’auto zoom sugli input per browser iOS Webkit

Quando aprite un sito da iPhone/iPod Touch ed interagite con un qualsiasi campo di un form spesso il browser tende ad ingrandire la pagina. Questo può risultare fastidioso per l'utente, vediamo come risolverlo.
Gestire l’auto zoom sugli input per browser iOS Webkit

Zoom automatico, che noia.

La cosa che trovo abbastanza irritante quando navigo da iphone (con browser webkit) è lo zoom sulla pagina quando interagisco con i campi di un form. Si è vero, è stato pensato per far si che si veda il testo che si sta digitando, però la cosa fastidiosa è che quando abbiamo finito con il controllo lo zoom non torna indietro e siamo quindi costretti a farlo con le dita.

Come ridurre lo zoom automatico?

Esistono due modi, il primo (anche se sconsigliato) è quello di impedire l’ingrandimento della pagina sia da parte dell’utente che da parte del browser. Basta aggiungere questo meta tag:

    <meta  name = "viewport"  content = "width = device-width, user-scalable = no" />
    

L’altro metodo è quello di ingrandire la dimensione del testo sul campo del form nel momento del focus. Ecco il semplicissimo codice css:

    @media only screen and (max-device-width:568px) {
        input[type="text"]:focus,
        textarea:focus,
        select:focus {
            font-size:16px;
        }
    }
    

Non ti resta che provare la demo dal tuo iphone 😉 … e se il post ti è piaciuto, non dimenticare di condividerlo.

Fonte: http://www.456bereastreet.com/archive/201212/ios_webkit_browsers_and_auto-zooming_form_controls/

Provalo subito

Prova la demo Consulta il codice
  • Grazie ottimo suggerimento e molto utile!

    • Ciao Andrea, mi fa molto piacere che il post sia stato di tuo gradimento 😉

  • Il primo snipset è migliore in quanto permette di svincolare il sito dal foglio di stile e quindi anche dal dispositivo. In pratica non viene migliorata solo la dimensione del font di un campo input ma di tutto il sito.
    Mettiamo che il browser permetta una risoluzione di 800 o più pixel, senza quella riga vedremmo i font rimpiccioliti per poter stare dentro lo schermo che di fatto non è di quelle dimensioni fisiche ma più piccole, solitamente largo 320 pixel, quindi con un rapporto molto minore (circa 3 volte più piccolo).
    Quell’istruzione dice al browser di riportare le proporzioni al livello reale della dimensione schermo e quindi di aumentare la dimensione del font in proporzione e questo vale per tutto il sito non solo per gli elementi dei form che hanno il focus attivo, inoltre dice pure di non effettuare nessuno zoom evitando di scombinare per caso la dimensione dei font (e il layout dell’intero sito) cosa importante considerando che la stragrande maggioranza degli utenti sono degli e-dioti (non è offensivo, cercatevi il significato del termine su Google) e quindi incapaci di capire se il sito è fatto male o se la colpa è loro.

    M.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github