2009-08-14 5 views
6

Est-ce que quelqu'un sait comment obtenir la taille en pixels ou la valeur d'échelle de la fenêtre après qu'un utilisateur a pincé ou tapoté deux fois pour faire un zoom avant/arrière sur une page en JavaScript?Comment obtenez-vous l'échelle de la fenêtre après le pincement/zoom sur une application web iPhone?

J'ai essayé d'utiliser window.innerWidth mais j'ai eu des résultats mitigés. Parfois, il semble indiquer avec précision le nombre de pixels affichés par la fenêtre. Toutefois, si j'effectue un zoom avant sur une page, puis que je fais un gros pincement pour effectuer un zoom arrière, window.innerWidth se situe aux alentours de 600-700, même si c'est seulement montrant ~ 200px de la page. La page ne fait que 400 pixels de large et n'affiche pas l'arrière-plan à carreaux «vous êtes allés trop loin» que vous voyez lorsque vous effectuez un zoom arrière au-delà de la taille de la page.

Si je fais de petites pinces pour faire un zoom avant et arrière, window.innerWidth semble fonctionner correctement. Malheureusement, je ne peux pas compter sur un simple utilisateur faisant de petits gestes de pincement :)

J'ai également essayé d'utiliser la propriété scale sur l'objet événement gesture, mais j'ai trouvé cela peu fiable parce que vous ne savez pas toujours l'échelle initiale lorsque vous rechargez la page ou utilisez les boutons Précédent/Suivant pour y accéder même si vous utilisez la balise META pour le spécifier. En fin de compte, j'essaie de faire une application qui est au courant lorsqu'un utilisateur essaie de faire un zoom arrière au-delà du niveau de zoom maximum, donc s'il y a une autre façon de le faire, je suis intéressé d'en parler :)

Voici le code que je utilise pour obtenir le innerWidth:

document.body.addEventListener('gestureend', function (evt) { 
    console.log(window.innerWidth); // inaccurate when doing large pinch gestures 
}, false); 

Merci!

Répondre

2

Si vous essayez seulement de limiter le niveau de zoom maximum, vous pouvez utiliser une balise de contrôle de la fenêtre spécifique à Safari:

<meta name="viewport" content="maximum-scale=2.0"> 

Voir le Safari mobile spécifique viewport meta tag spec pour plus de détails.

Questions connexes