Como posso "desativar" o zoom em uma página da web para celular?

316

Estou criando uma página da web móvel que é basicamente um formulário grande com várias entradas de texto.

No entanto (pelo menos no meu celular Android), toda vez que clico em alguma entrada, a página inteira é ampliada, obscurecendo o restante da página. Existe algum comando HTML ou CSS para desativar esse tipo de zoom nas páginas da web moble?

html css mobile Martín Fixman
fonte
3
Como Greg disse acima, se eu entrar em um site móvel que desabilite o zoom, a primeira coisa que costumo fazer é pressionar o botão Voltar (a menos que seja algo que eu realmente precise ver), e tenho certeza de que não sou o único . Além disso, falando da minha experiência, a maioria dos sites com o zoom desativado também usa fontes pequenas, o que torna a leitura do texto difícil e muito desconfortável.
amigos estão dizendo sobre tomasz86
8
Concordo que ele não deve ser desativado para a maioria dos sites, mas há alguns casos de uso em que você pode desativar o zoom padrão - como jogos na Web para celular nos quais você pode substituir o zoom para fazer outra coisa.
Lucas
11
Você não - se os usuários quiserem ampliar, deixe-os fazer isso. Além disso: o Chrome tem a opção de ignorar sua solicitação.
Martin
2
Para usuários do Android Firefox, existe o complemento Always Zoom for Firefox . Altamente recomendado.
Colin D Bennett
2
No iOS 10 , user-scalable=noé ignorado. Veja isso
Raptor

Respostas:

443

Isso deve ser tudo o que você precisa 

<meta 
     name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
/>
kgutteridge
fonte
23
isso também desabilita a capacidade do usuário de aumentar o zoom em geral, bem como a capacidade do navegador de ajustar automaticamente a maneira como a página se encaixa na janela de visualização - tudo o que Martin está procurando é uma maneira de desativar o 'zoom na entrada do clique' comportamento.
Matt lohkamp
3
No momento, alguém na Posterous fez exatamente isso, apesar de ter a fonte em 12px, portanto é ilegível e não consigo encontrar uma maneira de contornar isso.
Emil Ivanov
41
Toda pessoa com deficiência visual, inclusive eu, odeia isso mais do que qualquer coisa. Eu tenho que pegar as páginas da tela que fazem isso e depois dar um zoom nelas no visualizador de imagens.
21313 Jack Marchetti
6
O que a segunda metatag faz? O width=device-widthjá está na primeira metatag?
Luke
1
isso parece não funcionar no iOS 7. Veja a resposta
lukad03
159

Para aqueles que estão atrasados ​​para a festa, a resposta de kgutteridge não funciona para mim e a resposta de Benny Neugebauer inclui o densidade-alvodpi (um recurso que está sendo preterido ).

No entanto, isso funciona para mim: 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Luke Keller
fonte
7
Esta é a resposta correta agora. As outras respostas não funcionam mais (pelo menos no iOS 7).
KyleFarris
7
Alguém tentou isso no iOS 10.x Eu não acho que está funcionando?
JMac #
Não funciona para mim. Redimensionou toda a tela com barra de rolagem e zoom ruim.
Cocorico
1
Ainda não está funcionando no Safari / iOS 11 devido ao problema do SFB na Apple.
precisa saber é o seguinte
52

Existem várias abordagens aqui - e embora a posição seja a de que normalmente os usuários não devem ser restringidos que diz respeito ao zoom para fins de acessibilidade, pode haver incidências onde é necessário:

Renderize a página na largura do dispositivo, não dimensione:

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

Impedir o dimensionamento - e impedir que o usuário possa ampliar:

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

Removendo todo o zoom, todos os dimensionamentos

<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
"normalmente, os usuários não devem ser restritos", mas ao desenvolver aplicativos da web para celular, você geralmente precisa lidar com o "foco no input de entrada". Acho útil desativar o zoom nesse caso.
Le 'nton 18/09/2015
@ Le'nton desativar o zoom em toda a página não é uma boa maneira de lidar com o zoom no foco de entrada. Pelo menos no iOS, o zoom do foco de entrada pode ser desativado aumentando o tamanho da fonte da entrada.
pfg 7/02
39

Você pode usar:

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

Mas observe que no Android 4.4 a propriedade target-densitydpi não é mais suportada . Portanto, para o Android 4.4 e posterior, é sugerido o seguinte como prática recomendada:

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

Como ainda não há solução para o problema inicial, aqui estão os meus dois centavos de CSS puros.

Os navegadores móveis (a maioria deles) exigem que o tamanho da fonte nas entradas seja 16px. assim

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

resolve o problema. Portanto, você não precisa desativar o zoom e perder recursos de acessibilidade do seu site.

Se o tamanho da fonte base não for 16 px ou 16 px em celulares, você poderá usar consultas de mídia.

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

Azamat Rasulov
fonte
2
Por que esta solução tem tão poucos votos? É de longe a melhor maneira de evitar o zoom com o clique do formulário.
KlausCPH 27/04
1
Sim; isso resolveu meu problema também! Eu não queria desativar o zoom completamente e era exatamente isso que eu precisava.
18718 Brendan
1
Você também pode definir font-size: 1rema página inteira, para que a fonte seja dimensionada corretamente, evitando simultaneamente o problema de "foco no zoom".
itachi
12

tente adicionar essa metatag e estilo 

<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
não deve touch-actionser definido para none- developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Values
rahulroy9202
@ rahulroy9202 para mim touch-action: manipulation;funcionou bem. touch-action: none;não fiz nada #
Umair
7

Parece que apenas adicionar metatags ao index.html não impede o zoom da página. Adicionar estilo abaixo fará a mágica.

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

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

Api
fonte
2
Esta correção deve ser aceita, também trabalhando no safari móvel ios13 atm
Magico
Está funcionando como esperado no celular, obrigado! confira aqui proyecto26.com/animatable-component
jdnichollsc
6

Solução possível para aplicativos da Web: Embora o zoom não possa mais ser desativado no iOS Safari, ele será desativado ao abrir o site a partir de um atalho na tela inicial.

Adicione essas metatags para declarar seu aplicativo como "compatível com aplicativos da Web":

    <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' />

No entanto única usar esse recurso se o seu aplicativo é auto-sustentável, como os botões de frente / trás e aswell barra de URL, como as opções de compartilhamento estão desativados. (No entanto, você ainda pode deslizar para a esquerda e para a direita). Essa abordagem, no entanto, permite aplicativos como o ux. O navegador de tela cheia só inicia quando o site é carregado na tela inicial. Também o fiz funcionar depois de incluir um apple-touch-icon-180x180.png na minha pasta raiz.

Como bônus, você provavelmente também deseja incluir uma variante disso:

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

Você pode realizar a tarefa simplesmente adicionando o seguinte elemento 'meta' em sua 'cabeça':

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

Adicionar todos os atributos como 'largura', 'escala inicial', 'largura máxima', 'escala máxima' pode não funcionar. Portanto, basta adicionar o elemento acima.

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

Por favor, adicione o script para desativar pitada, toque, foco Zoom

Prem
fonte