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

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