O principal problema é que, se o usuário clicar fora da caixa de zoom, o zoom será bloqueado e ele não poderá aumentar ou diminuir o zoom.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
A viewport é a área visível do usuário de uma página da web. Varia de acordo com o dispositivo e será menor em um telefone celular do que na tela do computador.
A parte width=device-width define a largura da viewport para seguir a largura do dispositivo (que varia dependendo do dispositivo).
A parte initial-scale=1.0 define o nível de zoom inicial quando a página é carregada pela primeira vez pelo navegador.
A parte maximum-scale=1.0 define o quanto o usuário pode ampliar a página. Um valor de 1.0 significa que nenhum zoom é permitido.
A parte user-scalable=no desativa qualquer zoom que possa estar disponível por padrão em alguns dispositivos (como tocar duas vezes para aumentar o zoom).
Como desativar o zoom em uma página da Web móvel
Para desativar o zoom em uma página da web móvel em HTML, use o seguinte código:
Isso fará com que a página caiba na largura do dispositivo em que está sendo visualizada.
Zoom desativado
Para diminuir o zoom em HTML, use a propriedade zoom. Por exemplo:
zoom: 1;
Desative o escalonamento de HTML
O dimensionamento de HTML é um recurso do HTML que permite que os navegadores da Web ampliem ou reduzam o tamanho do texto e das imagens para torná-los mais legíveis em telas menores ou maiores. Esse recurso pode ser desativado na maioria dos navegadores, definindo a propriedade html-scaling como “none”.
