Come posso "disabilitare" lo zoom su una pagina Web mobile?

316

Sto creando una pagina Web mobile che è fondamentalmente un grande modulo con diversi input di testo.

Tuttavia (almeno sul mio cellulare Android), ogni volta che faccio clic su alcuni input l'intera pagina viene ingrandita lì, oscurando il resto della pagina. Esiste un comando HTML o CSS per disabilitare questo tipo di zoom su pagine Web moble?

html css mobile

— Martín Fixman
fonte

3

Come ha detto Greg sopra, se entro in un sito Web mobile che disabilita lo zoom, la prima cosa che faccio di solito è premere il pulsante Indietro (a meno che non sia qualcosa che devo davvero vedere), e sono sicuro di non essere l'unico . Inoltre, parlando della mia esperienza, la maggior parte di quei siti Web che hanno lo zoom disattivato usano anche caratteri piccoli che di conseguenza rendono la lettura del testo difficile e molto scomoda.

— tomasz86,

8

Sono d'accordo che non dovrebbe essere disabilitato per la maggior parte dei siti, ma ci sono alcuni casi d'uso in cui potresti voler disabilitare lo zoom predefinito - come i giochi Web mobili in cui potresti voler scavalcare lo zoom per fare qualcos'altro.

— Luca,

11

Non farlo : se gli utenti desiderano eseguire lo zoom, lasciarlo fare. Inoltre: Chrome ha un'opzione per ignorare la tua richiesta.

— Martin,

2

Per gli utenti di Android Firefox, c'è il componente aggiuntivo Always Zoom per Firefox . Altamente raccomandato.

— Colin D Bennett,

2

Da iOS 10 , user-scalable=noviene ignorato. Vedi questo

— Raptor il

443

Questo dovrebbe essere tutto ciò di cui hai bisogno

<meta 
     name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
/>

— kgutteridge
fonte

23

ciò disabilita anche la capacità dell'utente di eseguire lo zoom in generale, nonché la capacità del browser di regolare automaticamente il modo in cui la pagina si adatta alla finestra: tutto ciò che Martin sta cercando è un modo per disabilitare lo 'zoom-on-input-click' comportamento.

— Matt Lohkamp,

3

In questo momento qualcuno di Posterous ha fatto proprio questo, pur avendo il carattere a 12px quindi è illeggibile e non riesco a trovare un modo per aggirarlo.

— Emil Ivanov,

41

Ogni persona non vedente, incluso me stesso, odia questo più di ogni altra cosa. Devo catturare schermate di pagine che lo fanno e quindi ingrandirle nel visualizzatore di immagini.

— Jack Marchetti,

6

Cosa fa il secondo meta tag? Non è width=device-widthgià presente nel primo meta tag?

— Luca,

1

questo non sembra funzionare su iOS 7. Vedi la risposta

— lukad03

159

Per quelli di voi che sono in ritardo alla festa, la risposta di kgutteridge non funziona per me e la risposta di Benny Neugebauer include target-densitydpi (una funzione che è deprecata ).

Questo tuttavia funziona per me:

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

— Luke Keller
fonte

7

Questa è la risposta corretta ora. Le altre risposte non funzionano più (almeno per iOS 7).

— KyleFarris,

7

Qualcuno ha provato questo su iOS 10.x Non penso che funzioni?

— JMac,

Non funziona per me. Ridimensionava tutto lo schermo con barra di scorrimento e zoom errato.

— Cocorico,

1

Non funziona ancora su Safari / iOS 11 a causa del problema SFB su Apple.

— 15ee8f99-57ff-4f92-890c-b56153

52

Ci sono una serie di approcci qui e sebbene la posizione sia che in genere gli utenti non dovrebbero essere limitati quando si tratta di zoomare a fini di accessibilità, potrebbero esserci incidenti dove è richiesto:

Rendering della pagina con la larghezza del dispositivo, non ridimensionare:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Impedisci ridimensionamento e impedisce all'utente di eseguire lo zoom:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Rimozione di tutto lo zoom, tutto il ridimensionamento

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

— SW4
fonte

"in genere gli utenti non dovrebbero essere limitati" ma quando si sviluppano app Web per dispositivi mobili spesso si ha a che fare con lo "zom-in sull'input focus". Trovo utile disabilitare lo zoom in quel caso.

— Le 'nton,

@ Le'nton disabilitando lo zoom su tutta la pagina non è un buon modo per gestire lo zoom in focus sull'input. Almeno su iOS, lo zoom di messa a fuoco in ingresso può essere disabilitato aumentando la dimensione del carattere dell'input.

— pag

39

Puoi usare:

<head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

Ma tieni presente che con Android 4.4 la proprietà target-densitydpi non è più supportata . Quindi per Android 4.4 e versioni successive si consiglia quanto segue:

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

— Benny Neugebauer
fonte

35

Dal momento che non esiste ancora una soluzione per il problema iniziale, ecco il mio puro CSS due centesimi.

I browser per dispositivi mobili (molti dei quali) richiedono che la dimensione del carattere negli input sia 16px. Così

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px;
}

Espandi frammento

risolve il problema. Quindi non è necessario disabilitare le funzioni di zoom e perdita di accessibilità del tuo sito.

Se la dimensione del carattere di base non è 16px o 16px su dispositivi mobili, è possibile utilizzare le query multimediali.

@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    font-size: 16px;
  }
}

Espandi frammento

— Azamat Rasulov
fonte

2

Perché questa soluzione ha così pochi voti? È di gran lunga il modo migliore per evitare lo zoom con clic del modulo.

— KlausCPH,

1

Sì; questo ha risolto anche il mio problema! Non volevo disabilitare completamente lo zoom e questo era proprio quello di cui avevo bisogno.

— brendan,

1

Puoi anche impostare font-size: 1reml'intera pagina, quindi il carattere si ridimensiona bene, evitando contemporaneamente il problema di "focus-on-zoom".

— Itachi,

12

prova ad aggiungere questo meta-tag e questo stile

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


<style>
body{
        touch-action: manipulation;
    }
</style>

— Sarath Ak
fonte

1

non dovrebbe touch-actionessere impostato su none- developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Values

— rahulroy9202

@ rahulroy9202 per me ha touch-action: manipulation;funzionato bene. touch-action: none;non ha fatto nulla

— Umair,

7

Sembra semplicemente aggiungere metatag a index.html non impedisce lo zoom della pagina. L'aggiunta di uno stile sotto farà la magia.

:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

EDIT: Demo: https://no-mobile-zoom.stackblitz.io

— Api
fonte

2

Questo dovrebbe essere accettato risolto, anche lavorando su Safari mobile iOS 13 Atm

— Magico

Funziona come previsto dal cellulare, grazie! controlla qui proyecto26.com/animatable-component

— jdnichollsc il

6

Possibile soluzione per le app Web: sebbene lo zoom non possa più essere disabilitato in iOS Safari, verrà disabilitato quando si apre il sito da un collegamento alla schermata principale.

Aggiungi questi meta tag per dichiarare la tua app come "App Web compatibile":

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name='apple-mobile-web-app-capable' content='yes' />

Tuttavia solo utilizzare questa funzione se la vostra applicazione si autosostiene, come i pulsanti avanti / indietro e barra degli URL proprio come le opzioni di condivisione sono disabilitate. (Puoi comunque scorrere a destra e sinistra) Questo approccio abilita comunque l'app come ux. Il browser a schermo intero si avvia solo quando il sito viene caricato dalla schermata principale. ~~Ho anche funzionato solo dopo aver incluso un apple-touch-icon-180x180.png nella mia cartella principale.~~

Come bonus, probabilmente vuoi anche includere una variante di questo:

<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>

— denkquer
fonte

1

Puoi eseguire l'attività semplicemente aggiungendo il seguente elemento "meta" nella tua "testa":

<meta name="viewport" content="user-scalable=no">

L'aggiunta di tutti gli attributi come 'larghezza', 'scala iniziale', 'larghezza massima', 'scala massima' potrebbe non funzionare. Pertanto, basta aggiungere l'elemento sopra.

— Kasumi Gunasekara
fonte

-1

<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

Aggiungi lo script per disabilitare il pizzico, tocca, metti a fuoco Zoom

— Prem
fonte