Comment désactiver le zoom sur une page Web mobile ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-06-27 18:29:46

Question

Comment désactiver le zoom sur une page Web, de telle manière que sur un mobile on ne puisse pas zoomer avec les doigts ?

J'ai essayé via le viewport :

<meta name="viewport" content= "width=device-width, user-scalable=no">

Mais sur un iPhone (Safari) cela ne fonctionne pas.

Réponse

L'tilisation de la balise meta viewport pour contrôler la mise en page sur mobile, et l'argument user-scalable ne fonctionne pas encore avec tous les navigateurs.

Une alternative pour désactiver le zoom sur une page Web mobile consiste à utiliser JavaScript de la manière suivante :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment désactiver le zoom sur une page Web mobile ?</title>
</head>  
<body>
Le zoom avec les doigts ne fonctionne pas sur cette page.
<script>
function noZoom(element, evenementNom, listener) {
  var evenement = evenementNom.split(' ');
  for (var i=0, iLen=evenement.length; i<iLen; i++) {
    element.addEventListener(evenement[i], listener, false);
  }
}

noZoom(document, 'gesturestart gesturechange gestureend', function(e) {
  e.preventDefault();
  document.body.style.zoom = 1;
});
</script>
</body>
</html>