Puis-je modifier la balise meta de viewport dans un safari mobile à la volée?

J'ai une application ajax construit pour le navigateur Safari mobile qui a besoin d'afficher les différents types de contenu. Certains contenus, et j'ai besoin d'user-scalable=1 contenu d'autres j'ai besoin d'user-scalable=0. Est-il un moyen de mettre à jour ce à la volée sans rafraichissement de la page?

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

source d'informationauteur Pepper | 2010-08-27

  1. 134

    Je réalise que c'est un peu vieux, mais, oui, il peut être fait. Un peu de javascript pour vous aider à démarrer:

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

    Il suffit de changer les pièces dont vous avez besoin et Mobile Safari de respecter les nouveaux paramètres.

    Mise à jour:

    Si vous ne disposez pas déjà de la balise meta "viewport" dans la source, vous pouvez l'ajouter directement avec quelque chose comme ceci:

    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 si vous utilisez jQuery:

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

    dans votre <head>

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

    quelque part dans votre code javascript

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

    ... mais bonne chance avec le tordre pour votre appareil, jouant du violon pendant des heures... et je ne suis pas encore là!

    source

  3. 4

    Ce qui a été répondu, pour la plupart, mais je vais développer...

    Étape 1

    Mon objectif était de permettre à zoom, à certains moments, et le désactiver à d'autres.

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

    Étape 2

    De la fenêtre d'affichage de la balise permettrait de mettre à jour, mais pincée de zoom est toujours actif!! J'ai dû trouver une façon d'obtenir la page pour chercher les modifications...

    C'est un hack de la solution, mais le basculement de l'opacité du corps a fait le tour. Je suis sûr qu'il ya d'autres façons de le faire, mais voici ce qui a fonctionné pour moi.

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

    Étape 3

    Mon problème a surtout été résolu à ce point, mais pas tout à fait. J'ai besoin de savoir le niveau de zoom actuel de la page afin que je puisse redimensionner des éléments d'ajustement sur la page (pensez à des marqueurs de carte). 

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

    J'espère que cela aide quelqu'un. J'ai passé plusieurs heures à se taper la souris avant de trouver une solution.