Desabilitando o Zoom Automático no Safari do iPhone
Resposta Rápida
Para evitar o zoom automático no navegador Safari do iPhone, você precisará usar a meta tag de viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Essa configuração trava o nível de zoom em 1 e desativa o zoom iniciado pelo usuário, prevenindo o escalonamento automático dos campos de entrada. No entanto, configurar user-scalable=no pode complicar a interação do usuário com a página, então é importante encontrar um equilíbrio entre estabilidade e usabilidade.
Visualização
O zoom automático pode ser percebido como uma tentativa do Safari de aumentar texto pequeno. Se precisarmos de uma interface estável, esse recurso pode ser desativado.
📱 Usuário toca em um campo de entrada
|
| (Safari faz zoom automaticamente) 🔍--➔📝
|
🚫 Nosso objetivo é evitar esse zoom automático!input[type="text"] {
font-size: 16px; /* Domando o Safari! */
}Definindo o tamanho da fonte para 16px, o zoom automático do Safari é interrompido.
Agora a interface permanece estável quando o usuário toca em um campo de texto.
Revisão Detalhada dos Métodos de Prevenção e Melhoria
A Magia do Tamanho Mínimo da Fonte
Para evitar o zoom automático no Safari, definimos um tamanho mínimo de fonte de 16px para elementos input, select e textarea.
input, select, textarea {
font-size: 16px; /* Preparando o Safari para o Halloween: Homem Invisível */
}Usando Media Queries
Use as @media queries em conjunto com o recurso -webkit-min-device-pixel-ratio para implementar estilos específicos do Safari:
@media screen and (-webkit-min-device-pixel-ratio:0) {
input, select, textarea {
font-size: 16px; /* A Promessa do Safari: Sem Zoom! */
}
}Tamanho de Fonte Uniforme Controlado de um Ponto Único
Aplicar font-size: inherit a elementos de formulário permite uma gerência centralizada de um único local, geralmente o body:
body {
font-size: 16px;
}
input, select, textarea {
font-size: inherit; /* Reconhecendo seu recibo do UIManager... herdando o tamanho da fonte */
}Benefícios do Design Mobile-First
Adote uma abordagem mobile-first. Isso significa projetar de tal forma que o zoom seja desnecessário e os elementos sejam facilmente acessíveis.
O Princípio da Consistência para o Sucesso
Garanta que as regras de CSS sejam aplicadas de forma consistente tanto em estados focados quanto não focados para proporcionar uma consistência visual ideal.
input:active, input:focus {
font-size: inherit; /* Todos estão esperando pelo meu controle! */
}Opções de Acessibilidade sem Zoom
Manter a acessibilidade da página é muito importante. Permita que os usuários façam zoom usando maximum-scale=1.0 em vez de user-scalable=no.
Alternativas para as Peculiaridades do Safari
Utilize soluções conhecidas para abordar questões relacionadas às peculiaridades do mobile Safari:
select:focus {
background: #eee; /* Tenho 99 problemas, mas rastrear o foco não é um deles */
}Mantenha formularios em janelas modais e evite saltos na interface quando um campo de entrada é ativado.
Recursos Úteis
- Meta tag viewport - HTML: HyperText Markup Language | MDN — Uma visão geral sobre como gerenciar as capacidades de zoom em dispositivos móveis usando a meta tag viewport.
- Meta Tags Suportadas — Uma explicação das meta tags do Safari.
- ios10 - desabilitar o zoom na viewport no iOS 10+ safari? - Stack Overflow — Discussões ativas e soluções sugeridas pela comunidade.
- Projetando Sites para iPhone X | WebKit — Princípios de design para iOS.
- touch-action - CSS: Cascading Style Sheets | MDN — Interações com telas sensíveis ao toque em páginas da web.
- Eventos de Pointer — Entendendo as capacidades e eventos de telas sensíveis ao toque.
- Padrão HTML — Padrões de acessibilidade para aplicações web.