Posso alterar a metatag da viewport no Safari móvel instantaneamente?

Eu tenho um aplicativo ajax criado para o Safari móvel que precisa exibir diferentes tipos de conteúdo. Algum conteúdo que eu preciso escalável pelo usuário = 1 outro conteúdo que eu preciso escalável pelo usuário = 0. Existe uma maneira de atualizar isso em tempo real sem atualizar a página?

 

    Eu percebo que isso é um pouco antigo, mas, sim, isso pode ser feito. Alguns 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 partes que você precisa e o Mobile Safari respeitará as novas configurações.

    Atualizar:

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

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

    na sua

      

    em algum lugar no seu javascript

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

    … mas boa sorte com ajustes para o seu dispositivo, brincando por horas … e eu ainda não estou lá!

    fonte

    Isso foi respondido na maior parte, mas vou expandir …

    Passo 1

    Meu objective era ativar o zoom em determinados momentos e desativá-lo em outras pessoas.

     // 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 de viewport seria atualizada, mas o zoom de pinça ainda estava ativo !! Eu tive que encontrar uma maneira de pegar a página para pegar as alterações …

    É uma solução de hack, mas alternar a opacidade do corpo resolveu o problema. Tenho certeza de que existem outras maneiras de conseguir 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 resolvido na maior parte neste momento, mas não completamente. Eu precisava saber o nível de zoom atual da página para que eu pudesse resize alguns elementos para caber na página (pense em 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.