Puis-je changer la balise meta fenêtre dans Safari mobile à la volée?

StackOverflow https://stackoverflow.com/questions/3588628

Question

J'ai une application AJAX construit pour navigateur Safari pour mobile qui a besoin d'afficher différents types de contenu.

Pour un certain contenu, je dois user-scalable=1 et pour d'autres, j'ai besoin user-scalable=0.

Est-il possible de modifier la valeur de l'attribut contenu sans rafraîchir la page? 

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

La solution

Je sais que c'est un peu vieux, mais, oui, il peut être fait. Certains javascript pour vous lancer: 

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 Safari Mobile respectera les nouveaux paramètres.

Mise à jour:

Si vous ne l'avez pas déjà 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">');

Autres conseils

dans votre <head> 

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

quelque part dans votre javascript 

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

... mais bonne chance avec elle peaufinage pour votre appareil, bricoler pendant des heures ... et je ne suis toujours pas là!

sources

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

Étape 1

Mon but était de permettre le 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

La balise de la fenêtre serait mise à jour, mais pincée de zoom était toujours actif !! Je devais trouver un moyen d'obtenir la page pour ramasser les changements ...

Il est une solution de hack, mais l'opacité du basculement corps a fait l'affaire. Je suis sûr qu'il ya d'autres façons d'y parvenir, 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 été résolu la plupart du temps à ce stade, mais pas tout à fait. Je avais besoin de connaître le niveau de zoom de la page pour que je puisse redimensionner certains éléments pour tenir 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 à taper ma souris avant de trouver une solution.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top