Como você desativa o zoom da viewport no Mobile Safari?

Eu tentei todos os três destes sem sucesso:

<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;” />

cada um tem valores diferentes que achei recomendados pela pesquisa no Google ou SO, mas nenhum dos valores ' user-scalable = X ' parece estar funcionando

Também tentei delimitar os valores por vírgula em vez de ponto e vírgula, sem sorte. Então tentei SOMENTE ter o user-scalablevalor presente, ainda sem sorte.

ATUALIZAR

Comprei isso no site da Apple e funciona:

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

verifica-se que o problema eram as aspas fora do padrão, porque eu copiei a metatag de um site que as estava usando, gritos

Seu código está exibindo aspas duplas de atributo como aspas duplas sofisticadas. Se as citações sofisticadas estiverem presentes no seu código fonte, eu acho que esse é o problema.

Isso funciona para mim no Mobile Safari no iOS 4.2.

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

Para as pessoas que procuram uma solução para iOS 10, o Windows 10 user-scaleable=noestá desativado no Safari para iOS 10. O motivo é que a Apple está tentando melhorar a acessibilidade, permitindo que as pessoas ampliem as páginas da Web.

Das notas de versão :

Para melhorar a acessibilidade em sites no Safari, os usuários agora podem aumentar o zoom, mesmo quando um site define user-scalable = no na janela de exibição.

Tanto quanto eu entendo, estamos sem sorte.

@mattis está correto em relação ao iOS 10 Safari não permitir que você desative o beliscar para ampliar com o atributo escalável pelo usuário. No entanto, consegui desativar o uso preventDefault no evento 'gesturestart'. Eu só verifiquei isso no Safari no iOS 10.0.2.

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

para iphones safari até iOS 10 "viewport" não é uma solução, não gosto dessa maneira, mas usei esse código javascript e me ajudou

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

user-scalable=0

Isso não funciona mais no iOS 10. A Apple removeu o recurso.

Não há como desativar o site de zoom no iOS agora, a menos que você faça um aplicativo de plataforma bruta.

Tente adicionar o seguinte ao seu head-tag:

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

Além disso

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

Por fim, como um atributo de estilo ou em seu arquivo css, adicione o seguinte texto para navegadores baseados em webkit:

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

Consegui trabalhar no iOS 12 com o seguinte código:

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

Com a primeira instrução if, garanto que ela será executada apenas em ambientes iOS (se for executada no Android, o mecanismo de rolagem será quebrado). Além disso, observe a passiveopção definida como false.

Isso funciona bem no IOS 10.3.2

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

obrigado @arthur e @aleclarson

Eu consegui parar esse comportamento adicionando o seguinte ao cabeçalho HTML. Isso funciona em dispositivos móveis, pois os navegadores da área de trabalho oferecem suporte ao zoom ao usar a roda do mouse. Não é grande coisa nos navegadores de desktop, mas é importante levar isso em conta.

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

e a regra a seguir para a folha de estilo CSS

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

Às vezes, essas outras diretivas na contenttag podem atrapalhar o melhor palpite / heurística da Apple sobre como planejar sua página, tudo o que você precisa para desativar o zoom de pitada é.

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

No Safari 9.0 e superior, você pode usar a metatag reduzir a ajustar na viewport, como mostrado abaixo

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

Eu tolamente tinha uma div wrapper que tinha uma largura medida em pixels. Os outros navegadores pareciam ser inteligentes o suficiente para lidar com isso. Depois de converter a largura em um valor percentual, também funcionou bem no Safari mobile. Muito irritante.

.page{width: 960px;}

para

.page{width:93.75%}

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

Usar a touch-actionpropriedade CSS é a solução mais elegante. Testado no iOS 13.5.

Para desativar os gestos de zoom pitada e toque duas vezes para ampliar:

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

Se o seu aplicativo também não precisar de panorâmica , ou seja, rolagem, use este:

body {
  touch-action: none;
}

Para cumprir os requisitos de acessibilidade WAI WCAG 2.0 AA, você nunca deve desativar o zoom de pitada. (WCAG 2.0: SC 1.4.4 Redimensionar texto nível AA). Você pode ler mais sobre isso aqui: Acessibilidade móvel: como as WCAG 2.0 e outras diretrizes do W3C / WAI se aplicam ao celular, 2.2 Zoom / ampliação

Este deve estar trabalhando no iphone etc.

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