Comment JavaScript peut-il déterminer avec précision les dimensions de la fenêtre du navigateur ?

Obtention des dimensions de la fenêtre d'affichage du navigateur avec JavaScript

La détection de la taille de la fenêtre d'affichage du navigateur de l'utilisateur est cruciale pour offrir des expériences de contenu optimales. Comprendre la taille de la fenêtre d'affichage permet aux sites Web d'afficher des images de haute qualité et d'adapter les mises en page en fonction des limitations de l'appareil. JavaScript fournit une gamme de techniques pour déterminer les dimensions de la fenêtre d'affichage.

Valeurs @media et @media multi-navigateurs

Pour la compatibilité entre navigateurs, vous pouvez utiliser CSS @ règles multimédias pour obtenir les dimensions de la fenêtre d'affichage :

let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

window.innerWidth et window.innerHeight

Ces propriétés renvoient la largeur et la hauteur de la fenêtre d'affichage, y compris les barres de défilement :

• Obtient les dimensions de la fenêtre d'affichage CSS.
• Peut fournir des valeurs inexactes sur appareils mobiles en raison de la mise à l'échelle.
• Les ajustements du zoom peuvent introduire 1 px offset.
• Non pris en charge par IE8 ou version antérieure.

document.documentElement.clientWidth et .clientHeight

Ces propriétés fournissent la largeur de la fenêtre d'affichage. et la hauteur moins la largeur de la barre de défilement :

• Correspond aux valeurs @media en l'absence de barre de défilement est présent.
• Équivalent à la valeur de largeur de fenêtre de jQuery.
• Disponible sur plusieurs navigateurs.
• Peut être inexact si la déclaration DOCTYPE est manquante.

Supplémentaire Ressources

• Sorties des dimensions de la fenêtre d'affichage en direct : [Lien]
• Verge.js (techniques de fenêtre d'affichage multi-navigateurs) : [Lien]
• Actual.js (dimensions précises de la fenêtre dans n'importe quelle unité) : [Lien]

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!