Posso alterar a metatag da janela de visualização no safari móvel instantaneamente?

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=1e 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

Respostas:

148

Sei que isso é um pouco velho, mas, sim, pode ser feito. Um pouco de javascript para você começar:

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

Basta alterar as peças necessárias e o Mobile Safari respeitará as novas configurações.

Atualizar:

Se você ainda não tem a meta tag viewport na fonte, você pode anexá-la diretamente com algo assim:

var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
document.getElementsByTagName('head')[0].appendChild(metaTag);

Ou se você estiver usando jQuery:

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');

— markquezada
fonte

Agradável! Infelizmente, não consigo fazer funcionar. Minha situação é um pouco diferente: estou trabalhando com um site que tem uma largura de 980 px. O conteúdo vai direto ao limite do design, portanto, em um iPad, parece estranho. Pensei em definir a janela de visualização com uma largura de 1020px para permitir uma margem de 20px em ambos os lados ... mas sem sorte: 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)

— Sam

Isso deve ser fácil o suficiente. Basta escrever diretamente. Se você estiver usando jQuery, seria algo assim:

$('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( ... );

— markquezada

Para os atributos de conteúdo, o inspetor da web do safari móvel apresenta um erro nos pontos-e-vírgulas. Isso parece ser mais válido:viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');

— jfroom

@the_nuts Você está certo, appendChild espera um nó, não uma string. Atualizada. Obrigado.

— markquezada de

@basZero: Você poderia usar o agente de usuário para verificar em qual dispositivo o script está sendo executado antes de executar o código acima, mas, em geral, acho que é uma má ideia. Tente generalizar com base nos recursos do dispositivo (ou tamanho da tela, se necessário), não nos dispositivos reais. Por exemplo, você pode detectar se o dispositivo oferece suporte a eventos de toque, etc. (ou seja, com modernizr ). Depende do que você está tentando fazer.

— markquezada

na tua <head>

<meta id="viewport"
      name="viewport"
      content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />

em algum lugar do seu javascript

document.getElementById("viewport").setAttribute("content",
      "initial-scale=0.5; maximum-scale=1.0; user-scalable=0;");

... mas boa sorte em ajustá-lo para o seu dispositivo, mexendo por horas ... e ainda não estou lá!

fonte

— Sonjz
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.

// enable pinch zoom
var $viewport = $('head meta[name="viewport"]');    
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=4');

// ...later...

// disable pinch zoom
$viewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no');

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.

// after updating viewport tag, force the page to pick up changes           
document.body.style.opacity = .9999;
setTimeout(function(){
    document.body.style.opacity = 1;
}, 1);

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).

// check zoom level during user interaction, or on animation frame
var currentZoom = $document.width() / window.innerWidth;

Espero que isso ajude alguém. Passei várias horas batendo meu mouse antes de encontrar uma solução.

— postular laboratórios
fonte

Isso salvou minha vida, mas tenho um pequeno problema com isso: supondo que você exiba uma imagem em uma div de sobreposição a 100% e amplie-a em um dispositivo móvel, você aplicará o zoom usando a implementação de zoom do navegador nativo, que geralmente simplesmente dimensiona o visível área sem qualquer re-renderização do arquivo original. Por outro lado, se eu remover "largura = largura do dispositivo" para o estado de zoom desabilitado, a imagem fica boa durante o zoom, mas eu perco a posição da última página quando o div de 100% é fechado ...

— Stefan Müller