web-dev-qa-db-fra.com

Existe-t-il un moyen de spécifier le niveau de zoom minimum et maximum pour un navigateur?

Les navigateurs récents permettent de modifier le niveau de zoom avec CTRL + -, la molette de la souris CTRL et également le geste de pincement à deux doigts sur le trackpad. Bien que je trouve moi-même la fonctionnalité très pratique (les polices sur divers sites Web sont souvent trop petites pour que je puisse les lire), nous avons eu des sessions de test où le testeur (sciemment sans le savoir) a appliqué un niveau de zoom très extrême sous lequel aucune page Web ne pouvait jamais être utilisable. Ensuite, ils affirment que la possibilité de le faire est un bug, que l'utilisateur peut appliquer le zoom sans savoir ce qu'il fait et ne peut pas le désactiver. On me demande de désactiver complètement le zoom mais je n'aime pas beaucoup cette idée moi-même.

Au lieu de simplement désactiver le zoom, j'aimerais avoir la possibilité de définir ses limites minimale et maximale en dessous, j'ai vérifié, le site Web a toujours l'air assez bon. Les questions sur la désactivation complète du zoom ne sont pas des doublons de cette question.

Le site Web est construit sur le dessus du framework React.

J'ai essayé de mettre ce qui suit en CSS:

body {
  min-zoom: 0.75;
  max-zoom: 1.5;
}

ou

  min-zoom: 75%;
  max-zoom: 150%;

Cela n'a pas été utile, le zoom peut passer de 25 à 500% que ma conception ne peut tout simplement pas gérer. D'autres propriétés comme

body {
  margin: 200px;
}

sont respectés à cet endroit, ce n'est donc pas pour que la balise ou le fichier CSS entier soit simplement ignoré.

J'ai aussi essayé d'ajouter

<meta name="viewport" content="width=device-width, 
   initial-scale=1.00, maximum-scale=1.5, minimum-scale=0.75">

à ma balise de tête dans index.html mais semble aussi tout simplement ignoré.

J'ai aussi ajouté

@viewport {
  zoom: 1.00;
  min-zoom: 0.75;
  max-zoom: 1.5;
}

à mon CSS, le navigateur ne se soucie pas.

javascriptcssreactjsbrowserzoom
10
Audrius Meskauskas

Pour déterminer les limites de zoom minimum et maximum que l'agent utilisateur (navigateur) est autorisé à gérer, utilisez - viewport meta tag et définissez vos limites, par exemple:

<meta name="viewport" content="width=device-width, initial-scale=1.00, maximum-scale=2.00, minimum-scale=1.00">

Les propriétés reconnues dans la fenêtre <meta> l'élément sont:

  • width: La largeur de la fenêtre virtuelle du périphérique.
  • height: La hauteur de la "fenêtre virtuelle" du périphérique.
  • device-width: La largeur physique de l'écran de l'appareil.
  • device-height: La hauteur physique de l'écran de l'appareil.
  • initial-scale: Le zoom initial lors de la visite de la page. Réglage sur 1.0 ne fait pas de zoom.
  • minimum-scale: Le montant minimum que le visiteur peut zoomer sur la page. Réglage sur 1.0 ne fait pas de zoom.
  • maximum-scale: Le montant maximum que le visiteur peut zoomer sur la page. Réglage sur 1.0 ne fait pas de zoom.
  • user-scalable: Permet à l'appareil d'effectuer un zoom avant ou arrière. Les valeurs sont yes ou no.

Les informations officielles sur le méta-élément de la fenêtre d'affichage peuvent être trouvées dans le brouillon CSS Device Adaptation .

Pour autoriser un zoom minimum de 1.00 et zoom maximum de 2.00 sur la page, définissez minimum-scale=1.00 et maximum-scale=2.00:

<meta name="viewport" content="width=device-width, initial-scale=1.00, minimum-scale=1.00, maximum-scale=2.00">

Pour interdire tout zoom sur la page, réglez les échelles sur 1.00 chacun et user-scalable=no:

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

Bien que cette fonctionnalité soit prise en charge sur une large gamme de plates-formes mobiles, ce n'est pas une garantie à 100%, que vous pouvez limiter les limites minimum et maximum.

Il y a aussi la règle CSS CSS @viewport dans le CSS Device Adaptation , mais son support est actuellement faible selon caniuse.com et MDN . Cependant, lorsque les fournisseurs de navigateur implémenteront la fonctionnalité conformément au brouillon, vous pourrez déterminer les limites du zoom dans votre feuille de style à l'aide de min-zoom et max-zoom propriétés, par exemple:

@viewport {
  zoom: 1.0;
  min-zoom: 1.0;
  max-zoom: 2.0;
}

En remarque, dans le cas où vous souhaitez détecter le niveau de zoom en utilisant JavaScript, consultez cet article pour plus de détails.

6
Rick