disabilitare lo zoom viewport iOS 10+ safari?

Ho aggiornato il mio iPhone 6 plus alla versione beta di iOS 10 e ho appena scoperto che in Safari mobile, puoi ingrandire qualsiasi pagina web toccando due volte o pizzicando IGNORA il user-scalable=nocodice nel meta tag. Non so se si tratta di un bug o di una funzionalità. Se è considerata una funzionalità, come si disabilita lo zoom viewport iOS 10 safari?

aggiornato su iOS 11/12, iOS 11 e iOS 12 Safari NON rispettano ancora il user-scalable=nometa tag.

È possibile impedire il ridimensionamento delle pagine Web in Safari su iOS 10, ma coinvolgerà più lavoro da parte tua. Immagino che l'argomento sia che un certo grado di difficoltà dovrebbe impedire agli sviluppatori di beni di culto di far cadere "user-scalable = no" in ogni tag viewport e rendere le cose inutilmente difficili per gli utenti ipovedenti.

Tuttavia, vorrei vedere Apple modificare la loro implementazione in modo che ci sia un modo semplice (meta-tag) per disabilitare il doppio tocco per ingrandire. La maggior parte delle difficoltà riguarda tale interazione.

Puoi interrompere il pizzico per ingrandire con qualcosa del genere:

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

Si noti che se eventuali target più profondi chiamano stopPropagation sull'evento, l'evento non raggiungerà il documento e il comportamento di ridimensionamento non sarà impedito da questo listener.

La disabilitazione del doppio tocco per ingrandire è simile. Disattivi qualsiasi tocco sul documento che si verifica entro 300 millisecondi dal tocco precedente:

var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
  var now = (new Date()).getTime();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

Se non imposti correttamente gli elementi del modulo, la messa a fuoco su un input eseguirà lo zoom automatico e, dato che hai disabilitato principalmente lo zoom manuale, ora sarà quasi impossibile decomprimere. Assicurati che la dimensione del carattere di input sia> = 16px.

Se stai cercando di risolverlo in un WKWebView in un'app nativa, la soluzione sopra indicata è praticabile, ma questa è una soluzione migliore: https://stackoverflow.com/a/31943976/661418 . E come menzionato in altre risposte, in iOS 10 beta 6, Apple ha ora fornito una bandiera per onorare il meta tag.

Aggiornamento maggio 2017: ho sostituito il vecchio metodo "verifica lunghezza tocchi al tocco" per disabilitare lo zoom con pizzico con un approccio più semplice "verifica evento. Scala al tocco". Dovrebbe essere più affidabile per tutti.

Questa è una nuova funzionalità di iOS 10.

Dalle note di rilascio di iOS 10 beta 1:

• Per migliorare l'accessibilità sui siti Web in Safari, gli utenti possono ora pizzicare per ingrandire anche quando un sito Web viene impostato user-scalable=nonella finestra.

Mi aspetto che vedremo presto un componente aggiuntivo JS per disabilitarlo in qualche modo.

Sono stato in grado di risolvere questo problema utilizzando la touch-actionproprietà CSS sui singoli elementi. Prova a impostare gli touch-action: manipulation;elementi su cui si fa comunemente clic, come collegamenti o pulsanti.

Sembra che questo comportamento sia apparentemente cambiato nell'ultima beta, che al momento della stesura è beta 6.

Dalle note di rilascio per iOS 10 Beta 6:

WKWebViewora il valore predefinito è rispettato user-scalable=noda una finestra. I clienti di WKWebViewpossono migliorare l'accessibilità e consentire agli utenti di pizzicare per ingrandire su tutte le pagine impostando la WKWebViewConfiguration proprietà ignoresViewportScaleLimitssu YES.

Tuttavia, nei miei test (molto limitati), non posso ancora confermare che sia così.

Modifica: verificato, iOS 10 Beta 6 rispetta user-scalable=nodi default per me.

La soluzione che le opere in Safari Mobile in questo momento della scrittura, è quello di avere il terzo argomento in addEventListenerBE { passive: false }, quindi gli sguardi di soluzione completa come questo:

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

Potresti voler controllare se le opzioni sono supportate per rimanere retrocompatibili.

Ho trascorso circa un'ora a cercare un'opzione javascript più solida e non ne ho trovata una. Accade così che nei giorni scorsi ho armeggiato con hammer.js (Hammer.js è una libreria che ti permette di manipolare facilmente tutti i tipi di eventi tattili) e per lo più non riesco a quello che stavo cercando di fare.

Con questo avvertimento e la comprensione che non sono affatto un esperto di javascript, questa è una soluzione che mi è venuta in mente che sfrutta fondamentalmente hammer.js per catturare gli eventi pinch-zoom e doppio tocco e quindi registrarli e scartarli.

Assicurati di includere hammer.js nella tua pagina e quindi prova ad attaccare questo javascript nella testa da qualche parte:

< script type = "text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"> < /script >
< script type = "text/javascript" >

  // SPORK - block pinch-zoom to force use of tooltip zoom
  $(document).ready(function() {

    // the element you want to attach to, probably a wrapper for the page
    var myElement = document.getElementById('yourwrapperelement');
    // create a new hammer object, setting "touchAction" ensures the user can still scroll/pan
    var hammertime = new Hammer(myElement, {
      prevent_default: false,
      touchAction: "pan"
    });

    // pinch is not enabled by default in hammer
    hammertime.get('pinch').set({
      enable: true
    });

    // name the events you want to capture, then call some function if you want and most importantly, add the preventDefault to block the normal pinch action
    hammertime.on('pinch pinchend pinchstart doubletap', function(e) {
      console.log('captured event:', e.type);
      e.preventDefault();
    })
  });
</script>

Ho provato la risposta precedente sul pinch-to-zoom

document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, false);

tuttavia a volte lo schermo continua a zoomare quando event.touches.length> 1 ho scoperto che il modo migliore è utilizzare l'evento touchmove, per evitare che un dito si muova sullo schermo. Il codice sarà qualcosa del genere:

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();      
}, false);

Spero che possa essere d'aiuto.

Verificare il fattore di scala nell'evento touchove quindi prevenire l'evento touch.

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

Possiamo ottenere tutto ciò che vogliamo iniettando una regola di stile e intercettando gli eventi di zoom:

$(function () {
  if (!(/iPad|iPhone|iPod/.test(navigator.userAgent))) return
  $(document.head).append(
    '<style>*{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}</style>'
  )
  $(window).on('gesturestart touchmove', function (evt) {
    if (evt.originalEvent.scale !== 1) {
      evt.originalEvent.preventDefault()
      document.body.style.transform = 'scale(1)'
    }
  })
})

✔ Disabilita lo zoom con pizzico.

✔ Disabilita lo zoom con doppio tocco.

✔ Lo scorrimento non è interessato.

✔ Disabilita l'evidenziazione del tocco (che viene attivato, su iOS, dalla regola di stile).

AVVISO: modificare il rilevamento di iOS a proprio piacimento. Maggiori informazioni qui .

Ci scusiamo con lukejackson e Piotr Kowalski , le cui risposte compaiono in forma modificata nel codice sopra.

Ho trovato una soluzione abbastanza ingenua, ma sembra funzionare. Il mio obiettivo era impedire che i doppi tocchi accidentali venissero interpretati come zoom in, mantenendo il pizzico per lo zoom funzionante per l'accessibilità.

L'idea è di misurare il tempo tra il primo touchstarte il secondo touchendcon un doppio tocco e quindi di interpretare l'ultimo touchendcome clic se il ritardo è troppo piccolo. Pur impedendo lo zoom accidentale, questo metodo sembra mantenere invariato lo scorrimento dell'elenco, il che è carino. Non sono sicuro di non aver perso nulla però.

let preLastTouchStartAt = 0;
let lastTouchStartAt = 0;
const delay = 500;

document.addEventListener('touchstart', () => {
  preLastTouchStartAt = lastTouchStartAt;
  lastTouchStartAt = +new Date();
});
document.addEventListener('touchend', (event) => {
  const touchEndAt = +new Date();
  if (touchEndAt - preLastTouchStartAt < delay) {
    event.preventDefault();
    event.target.click();
  }
});

Ispirato da una sintesi di mutewinter e dalla risposta di Joseph .

Nel mio caso particolare, sto usando Babylon.js per creare una scena 3D e tutta la mia pagina è composta da una tela a schermo intero. Il motore 3D ha la sua funzionalità di zoom, ma su iOS il pizzico-zoom interferisce con quello. Ho aggiornato la risposta @Joseph per superare il mio problema. Per disabilitarlo, ho capito che devo passare {passive: false} come opzione al listener di eventi. Il seguente codice funziona per me:

window.addEventListener(
    "touchmove",
    function(event) {
        if (event.scale !== 1) {
            event.preventDefault();
        }
    },
    { passive: false }
);

Per quanto strano possa sembrare, almeno per Safari in iOS 10.2, il doppio tocco per ingrandire è magicamente disabilitato se il tuo elemento o uno dei suoi antenati ha uno dei seguenti:

1. Un ascoltatore onClick - può essere un semplice noop.
2. Un cursor: pointerset in CSS

Lo zoom involontario tende a verificarsi quando:

• Un utente tocca due volte un componente dell'interfaccia
• Un utente interagisce con il viewport utilizzando due o più cifre (pizzico)

Per evitare il comportamento del doppio tocco ho trovato due soluzioni molto semplici:

<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>

Entrambi impediscono a Safari (iOS 10.3.2) di ingrandire il pulsante. Come puoi vedere, uno è solo JavaScript, l'altro è solo CSS. Utilizzare in modo appropriato.

Ecco una demo: https://codepen.io/lukejacksonn/pen/QMELXQ

Non ho ancora tentato di prevenire il comportamento del pizzico, principalmente perché tendo a non creare interfacce multi touch per il web e in secondo luogo mi sono reso conto che forse tutte le interfacce, inclusa l'interfaccia utente dell'app nativa, dovrebbero essere "pizzica per ingrandire" -able in luoghi. Mi piacerebbe ancora di progettazione per evitare che l'utente dover fare questo per rendere l'interfaccia utente accessibile a loro, a tutti i costi.

Ho trovato questa semplice soluzione che sembra impedire il doppio clic per ingrandire:

    // Convert touchend events to click events to work around an IOS 10 feature which prevents
    // developers from using disabling double click touch zoom (which we don't want).
    document.addEventListener('touchend', function (event) {
        event.preventDefault();
        $(event.target).trigger('click');
    }, false);

Come richiesto, ho trasferito il mio commento a una risposta in modo che le persone possano votarlo:

Funziona il 90% delle volte per iOS 13:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />

e

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

Ho verificato tutte le risposte sopra in pratica con la mia pagina su iOS (iPhone 6, iOS 10.0.2), ma senza successo. Questa è la mia soluzione di lavoro:

$(window).bind('gesturestart touchmove', function(event) {
    event = event.originalEvent || event;
    if (event.scale !== 1) {
         event.preventDefault();
         document.body.style.transform = 'scale(1)'
    }
});

questo ha funzionato per me:

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);