Parlons des méthodes et principes d'interdiction du zoom en HTML5

Avec la popularité des appareils mobiles et la mise en page réactive de la conception Web, HTML5, en tant que nouveau langage standard, a progressivement remplacé le premier langage de balisage HTML. En HTML5, il existe une exigence très courante : désactiver la mise à l’échelle des pages. Cet article présentera la méthode et le principe d'interdiction de la mise à l'échelle en HTML5.

Tout d’abord, pourquoi est-il nécessaire d’interdire le zoom ? Habituellement, la taille de l'écran des appareils mobiles est plus petite. Afin de s'adapter à l'expérience de navigation de l'utilisateur, certains sites Web adoptent un design réactif, c'est-à-dire que la mise en page sera ajustée de manière adaptative en fonction de la taille de l'écran. Dans de nombreux cas, le zoom de la page par les utilisateurs peut affecter l'effet de conception réactive, provoquant une dislocation de la page et affectant l'apparence et l'expérience.

Alors, comment désactiver le zoom sur les pages en HTML5 ? Tout d’abord, nous devons comprendre la fenêtre d’affichage.

Qu'est-ce que Viewport ?

Viewport fait référence à la zone du navigateur utilisée pour afficher les pages Web, comprenant généralement la fenêtre du navigateur et l'élément iframe de la page. Sur les appareils mobiles, la zone d'affichage est plus petite en raison de la taille limitée de l'écran.

Principe de la fenêtre d'affichage

Côté PC traditionnel, la taille de la fenêtre d'affichage est fixe, généralement la taille de la fenêtre du navigateur. Sur les appareils mobiles, la taille de la fenêtre d'affichage peut être définie pour être plus grande ou plus petite que l'écran de l'appareil, qui doit être défini via la balise méta.

Parmi eux, l'attribut content comprend deux paramètres : la largeur et l'échelle initiale.

• width : Spécifiez la largeur de la fenêtre d'affichage, généralement définie sur la largeur de l'appareil (device-width).
• initial-scale : Spécifie le rapport de mise à l'échelle de la fenêtre, généralement défini sur 1, ce qui signifie qu'elle est affichée en fonction de la taille réelle.

L'échelle initiale ici est ce que nous devons utiliser pour obtenir la mise à l'échelle de la page en ajustant le rapport de mise à l'échelle.

Méthodes pour désactiver le zoom

Pour désactiver le zoom de la page, il suffit de définir les valeurs d'échelle maximale et d'échelle minimale sur 1 dans la balise méta, comme indiqué ci-dessous :

De cette façon, peu importe la façon dont l'utilisateur essaie de zoomer sur la page, il sera interdit.

De plus, nous pouvons également utiliser JavaScript pour désactiver le zoom des pages, comme suit :

document.addEventListener('touchstart',function (event){
if(event.touches.length>1){

event.preventDefault();

}
} );

document.addEventListener('gesturestart', function (event) {
event.preventDefault();
});

La fonction du code ci-dessus est d'empêcher le zoom par défaut lorsque l'utilisateur utilise deux doigts pour événement zoom.

Résumé

La méthode de désactivation du zoom de page en HTML5 consiste principalement à définir la valeur de l'échelle maximale et de l'échelle minimale dans la balise méta sur 1, ou à empêcher l'événement de zoom par défaut via JavaScript. Ces méthodes peuvent efficacement éviter les problèmes causés par la mise à l'échelle des pages et améliorer l'expérience de navigation de l'utilisateur.

Notez que bien que ces méthodes puissent atteindre l'objectif d'interdire le zoom sur les pages, certains appareils mobiles présentent encore certains défauts et des problèmes tels qu'un désalignement des pages ou un désalignement incomplet peuvent survenir. Par conséquent, il est recommandé d’optimiser pleinement la conception et le développement de pages Web dans des applications pratiques en combinant des technologies telles que la mise en page réactive.

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!