javascript - Principe d'implémentation de la taille du zoom du navigateur

Question

RT, en raison des habitudes d'utilisation personnelles, lors de l'utilisation de Chrome, le taux de zoom par défaut est ajusté à 90 %. Lors du test de certaines pages aujourd'hui, un trouble de style s'est produit. Cependant, lorsque le taux de zoom est de 100 %, tous les tests du navigateur ont été effectués. normal, et le test sur un ordinateur basse résolution était également normal, j'ai donc eu l'idée de comprendre le principe de mise à l'échelle. Après avoir vérifié quelques informations, j'ai dit que la largeur et la hauteur de la balise html étaient. changé Cependant, ce n'était pas le cas après des tests réels. Oui, je veux donc demander à tous les experts quel est le principe du zoom du navigateur, merci

.

Answer 1

La page affichée que nous voyons normalement est généralement la taille des pixels de l'appareil (zoom 100 %), ou plus précisément, c'est une scène où les pixels de l'appareil et les pixels CSS sont 1:1. Lorsque nous zoomons sur l'écran, les pixels de l'appareil ne changeront pas, mais les pixels CSS le changeront. Pour plus de détails, je vous recommande de lire ce blog : https://www.quirksmode.org/mo...

Answer 2

html {
  zoom: 90%
}

Answer 3

CSS possède l'attribut zoom pour contrôler la mise à l'échelle du contenu. Le zoom du navigateur est probablement implémenté de la même manière. En ce qui concerne le problème de désalignement, la plupart des navigateurs ont une valeur minimale par défaut pour les polices. Lorsqu'elle est inférieure à la valeur minimale, le texte ne sera pas mis à l'échelle, ce qui entraînera un retour à la ligne du contenu, étirant ainsi la mise en page.