Come si disabilita lo zoom delle finestre su Mobile Safari?

Ho provato tutti e tre questi inutilmente:

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

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

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

ognuno di essi ha valori diversi che ho trovato raccomandati dalla ricerca google o dalla ricerca SO, ma nessuno dei valori " user-scalable = X " sembra funzionare

Ho anche provato la virgola che delimita i valori anziché il punto e virgola, senza fortuna. Poi ho provato SOLO a presentare il user-scalablevalore, ancora senza fortuna.

AGGIORNARE

Capito dal sito di Apple e funziona:

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

si scopre che il problema erano le virgolette non standard perché avevo copiato il meta tag da un sito Web che le stava usando, whoops

Il tuo codice mostra le virgolette doppie degli attributi come doppie virgolette fantasiose. Se nel tuo vero codice sorgente sono presenti le virgolette, immagino che questo sia il problema.

Questo funziona per me su Mobile Safari in iOS 4.2.

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

Per le persone in cerca di una soluzione iOS 10, user-scaleable=noè disabilitato in Safari per iOS 10. Il motivo è che Apple sta cercando di migliorare l'accessibilità consentendo alle persone di ingrandire le pagine Web.

Dalle note di rilascio :

Per migliorare l'accessibilità sui siti Web in Safari, gli utenti possono ora pizzicare con lo zoom anche quando un sito Web imposta scalabile dall'utente = no nella finestra.

Per quanto ho capito, siamo sfortunati.

@mattis ha ragione sul fatto che iOS 10 Safari non ti consentirà di disabilitare il pizzico per eseguire lo zoom con l'attributo scalabile dall'utente. Tuttavia, l'ho trovato per disabilitare l'utilizzo di preventDefault sull'evento 'gesturestart'. L'ho verificato solo su Safari in iOS 10.0.2.

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

per iPhone Safari fino a iOS 10 "viewport" non è una soluzione, non mi piace in questo modo, ma ho usato questo codice javascript e mi ha aiutato

 document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
      event.preventDefault();
    }
  }, false);

user-scalable=0

Questo non funziona più su iOS 10. Apple ha rimosso la funzione.

Non è possibile disabilitare ora il sito Web di zoom su iOS, a meno che non si realizzi un'app di piattaforma lorda.

Prova ad aggiungere quanto segue al tuo head-tag:

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

Inoltre

<meta name="HandheldFriendly" content="true">

Infine, come attributo di stile o nel tuo file css, aggiungi il seguente testo per i browser basati su webkit:

html {
    -webkit-text-size-adjust: none
}

L'ho fatto funzionare in iOS 12 con il seguente codice:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

Con la prima dichiarazione if mi assicuro che verrà eseguito solo in ambienti iOS (se viene eseguito in Android, il comportamento di scorrimento verrà interrotto). Inoltre, notare l' passiveopzione impostata su false.

Funziona bene in IOS 10.3.2

    document.addEventListener('touchmove', function(event) {
        event = event.originalEvent || event;
        if (event.scale !== 1) {
           event.preventDefault();
        }
    }, false);

grazie @arthur e @aleclarson

Sono riuscito a interrompere questo comportamento aggiungendo quanto segue all'intestazione HTML. Funziona su dispositivi mobili, poiché i browser desktop supportano lo zoom quando si utilizza la rotellina del mouse. Non è un grosso problema sui browser desktop, ma è importante tenerne conto.

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

e la seguente regola per il foglio di stile CSS

html {
	-webkit-text-size-adjust: none;
	touch-action: manipulation;
}

a volte quelle altre direttive nel contenttag possono confondere la migliore ipotesi / euristica di Apple su come impaginare la tua pagina, tutto ciò che serve per disabilitare lo zoom con pizzico è.

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

In Safari 9.0 e versioni successive puoi utilizzare il ridimensionamento per adattarlo al metatag della finestra come mostrato di seguito

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Ho stupidamente avuto un div wrapper che aveva una larghezza misurata in pixel. Gli altri browser sembravano abbastanza intelligenti da occuparsene. Dopo aver convertito la larghezza in un valore percentuale, ha funzionato bene anche su Safari mobile. Molto noioso.

.page{width: 960px;}

per

.page{width:93.75%}

<div id="divPage" class="page">
</div>

L'uso della touch-actionproprietà CSS è la soluzione più elegante. Testato su iOS 13.5.

Per disabilitare i gesti di zoom con pizzico e toccare due volte per ingrandire:

body {
  touch-action: pan-x pan-y;
}

Se anche la tua app non ha bisogno di panning , ad esempio scorrimento, usa questo:

body {
  touch-action: none;
}

Per soddisfare i requisiti di accessibilità WAI WCAG 2.0 AA non è mai necessario disabilitare lo zoom con pizzico. (WCAG 2.0: SC 1.4.4 Ridimensiona livello testo AA). Puoi leggere ulteriori informazioni qui: Accessibilità mobile: come WCAG 2.0 e altre linee guida W3C / WAI si applicano al cellulare, 2.2 Zoom / Ingrandimento

Questo dovrebbe funzionare su iPhone ecc.

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