Eu tenho um aplicativo AJAX desenvolvido para o navegador Safari móvel que precisa exibir diferentes tipos de conteúdo.
Para alguns conteúdos eu preciso user-scalable=1
e para outros eu preciso user-scalable=0
.
Existe uma maneira de modificar o valor do atributo content sem atualizar a página?
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
javascript
mobile-safari
viewport
Pimenta
fonte
fonte
viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=1020');
(Apenas para algum contexto: estou colocando isso em uma instância do Drupal um tanto bloqueada ... então não tenho acesso direto à área da cabeça e preciso usar Javascript)$('head').append('<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">');
ou, sem jQuery:document.getElementsByTagName('head')[0].appendChild( ... );
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
na tua
<head>
em algum lugar do seu javascript
... mas boa sorte em ajustá-lo para o seu dispositivo, mexendo por horas ... e ainda não estou lá!
fonte
fonte
Isso foi respondido na maior parte, mas vou expandir ...
Passo 1
Meu objetivo era ativar o zoom em determinados momentos e desativá-lo em outros.
Passo 2
A tag da janela de visualização seria atualizada, mas o zoom ainda estava ativo !! Eu tive que encontrar uma maneira de fazer a página pegar as mudanças ...
É uma solução de hack, mas alternar a opacidade do corpo resolveu o problema. Tenho certeza de que existem outras maneiras de fazer isso, mas aqui está o que funcionou para mim.
etapa 3
Meu problema foi praticamente resolvido neste ponto, mas não completamente. Eu precisava saber o nível de zoom atual da página para que pudesse redimensionar alguns elementos para caber na página (pense nos marcadores de mapa).
Espero que isso ajude alguém. Passei várias horas batendo meu mouse antes de encontrar uma solução.
fonte