Comment désactiver le zoom de la page à l'aide de JavaScript

Avec la popularité des appareils mobiles, l'adaptation des pages Web est devenue de plus en plus importante. L’un de ces problèmes est la mise à l’échelle des pages, qui peut causer des désagréments et de la confusion aux utilisateurs. Bien que la plupart des navigateurs proposent une fonction de zoom, dans certains scénarios, il est nécessaire d'interdire aux utilisateurs de zoomer sur la page. Alors, comment désactiver le zoom des pages à l'aide de JavaScript ?

La première méthode consiste à utiliser des balises méta pour contrôler la mise à l'échelle. Ajoutez le code suivant à la balise head pour désactiver le zoom sur la page.

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

Dans le code ci-dessus, viewport signifie la fenêtre d'affichage, width=device-width signifie que la largeur de l'appareil est la largeur de la fenêtre d'affichage, initial-scale=1.0 signifie que le taux de zoom initial de la page est de 1, échelle maximale =1,0 signifie le zoom maximum de la page. L'échelle est également de 1, user-scalable=no signifie que l'utilisateur ne peut pas redimensionner la page.

Les avantages de cette méthode sont qu'elle est simple et facile à utiliser, nécessite moins de code et offre une bonne compatibilité avec les navigateurs. Mais cette méthode présente un défaut : les utilisateurs peuvent toujours zoomer et dézoomer sur la page en pinçant avec deux doigts. Bien que la plage de ratio soit limitée à 1~1, cela peut toujours affecter l'expérience utilisateur.

La deuxième méthode consiste à utiliser JavaScript pour surveiller les événements de zoom et restaurer immédiatement le taux de zoom de la page à 1 une fois que l'utilisateur effectue une opération de zoom. Vous trouverez ci-dessous un exemple de code implémenté à l'aide de jQuery.

$(document).ready(function() {
   $(document).on('touchmove', function(e) {
     if (e.originalEvent.scale !== 1) {
        e.preventDefault();
     }
   });
});

Dans le code ci-dessus, nous utilisons jQuery pour lier un événement touchmove Lorsque l'utilisateur effectue le geste de zoom par pincement pour zoomer, il est jugé si le taux de zoom est égal à 1. S'il n'est pas égal à 1, la méthode PreventDefault() interdit le comportement par défaut. Cela empêche efficacement les utilisateurs de zoomer sur la page.

Il convient de noter que cette méthode ne peut désactiver que le zoom gestuel. Si l'utilisateur utilise les touches de raccourci ou l'option de zoom dans la barre de menu du navigateur pour zoomer et dézoomer sur la page, cette méthode ne fonctionnera pas.

La troisième méthode consiste à utiliser à la fois des balises méta et JavaScript pour surveiller les événements de zoom. Cette méthode combine les avantages des deux premières méthodes et est plus complexe à mettre en œuvre, mais elle permet également d’obtenir de meilleurs résultats. Voici l'exemple de code :

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

var prevScale = 1;
$(document).ready(function() {
    $(document).on('touchmove', function(e) {
        if (e.originalEvent.scale !== prevScale) {
            $('meta[name=viewport]').attr('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
        }
        prevScale = e.originalEvent.scale;
    });
});

Expliquez la fonction du code ci-dessus :

Dans la première étape, nous utilisons la balise méta pour interdire aux utilisateurs de zoomer sur la page.

La deuxième étape consiste à utiliser JavaScript pour écouter l'événement touchmove.

La troisième étape consiste à vérifier si la valeur e.originalEvent.scale est égale à prevScale. Sinon, réinitialisez le contenu de la balise méta et désactivez la mise à l'échelle de la page.

Il convient de noter que cette méthode présente également des défauts. Le zoom ne peut pas être complètement désactivé et certaines situations inattendues peuvent encore survenir.

En bref, dans certains scénarios, il est courant d'interdire aux utilisateurs de zoomer sur les pages Web. Nous pouvons choisir une méthode appropriée pour atteindre cet objectif et améliorer l’expérience des pages Web sur les appareils mobiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!