web-dev-qa-db-fra.com

Comment désactiver le zoom / mise à l'échelle des pages Web sur Android?

J'ai écrit une petite application web pour collecter des données et les stocker dans une base de données centrale. Je me promène, lisant des valeurs et les tapant dans un site Web sur mon Android. C'est juste pour moi, donc aucun problème d'utilisation publique ne s'applique cette fois-ci.

Maintenant, je veux ajouter un bouton pour incrémenter une lecture d'une unité, et je dois pouvoir appuyer plusieurs fois sur ce bouton. Mais si je le fais trop vite, le navigateur reconnaît un double-onglet et fait un zoom/zoom sur la page.

J'ai déjà ajouté un en-tête de fenêtre et j'ai joué avec toutes les combinaisons de valeurs que je pouvais trouver sur le Web. Mais la page reste évolutive. Comment puis-je arrêter ça?

Voici une page de test minimale qui échoue pour moi:

<!doctype html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<style type="text/css">
body
{
    font: 16pt sans-serif;
}
</style>
</head>
<body>
This is a test page. It should not be scalable by the user at all. Not with the two-pinger pinch gesture and even less with a double-tap on the text.
</body>
</html>

L'ajout de l'échelle initiale = 1, de l'échelle maximale = 1 et de toutes sortes de cibles, quel que soit le dpi, ne change rien. J'ai redémarré le navigateur (Dolphin HD et le navigateur d'origine) et j'ai déjà vidé le cache. Je suis sur Android 2.2, le téléphone est un HTC Desire.

androidhtmlscalingviewport
25
ygoe

C'est un bogue connu dans les navigateurs Android: http://code.google.com/p/Android/issues/detail?id=11912

12
Hades

Cela a fonctionné pour moi dans tous les navigateurs Android:

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

Une erreur courante est que les gens utilisent 2 balises meta viewport comme ceci:

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

La deuxième balise meta viewport remplace la première dans certains navigateurs (par exemple - chrome pour Android). Il n'y a aucune raison d'avoir deux balises meta viewport, car la seconde est contenue dans le premier un.

Voir Cette réponse pour plus de détails

46
Rubinsh

Je les ai tous essayés mais je ne travaille pas pour moi. Et j'ai trouvé que celui-ci fonctionnait vraiment.

     <!-- set viewport to native resolution (Android) - disable zoom !-->
   <meta 
       name="viewport" 
       content="target-densitydpi=device-dpi; width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" 
    />

de http://andidittrich.de/index.php/2012/02/disable-zoom-function-of-Android-browser-force-native-resolution/

4
babyromeo
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width">

La balise Meta Viewport résout le problème dans la plupart des cas. Mais Android a un problème étrange où lors du changement d'orientation, la balise META est réinitialisée et vous pouvez à nouveau redimensionner ou zoomer la page.

Pour résoudre ce problème dans Android surveillez orientaionchange et définissez la balise meta viewport sur chaque événement orientationchange.

Voici le lien avec l'extrait de code http://moduscreate.com/orientation-change-zoom-scale-Android-bug/

1
Ankit Garg