Comment puis-je obtenir les dimensions de la fenêtre du navigateur à l'aide de JavaScript ?

Détection des dimensions de la fenêtre d'affichage du navigateur

Problème :

Comment puis-je déterminer la taille de la fenêtre d'affichage d'un navigateur à l'aide de JavaScript ? Ces informations sont particulièrement utiles pour optimiser la qualité de l'image en fonction de la zone d'affichage disponible.

Solution :

Il existe plusieurs approches pour obtenir les dimensions de la fenêtre d'affichage du navigateur :

Multi-navigateur : @media (largeur) et @media (hauteur) Valeurs

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

Propriétés :

• Récupère les dimensions de la fenêtre d'affichage CSS, y compris les barres de défilement
• Peut ne pas être fiable sur les appareils mobiles en raison de l'échelle initiale et zoom

document.documentElement.clientWidth et .clientHeight

Propriétés :

• Largeur de la fenêtre CSS moins largeur de la barre de défilement
• Correspond aux dimensions @media sans barre de défilement
• Support multi-navigateurs
• Inexact sans doctype

Ressources :

• [Sorties en direct pour diverses Dimensions](https://jsfiddle.net/ariya/tvn3d/)
• [Verge](https://github.com/ryanseddon/verge)
• [actual.js]( https://github.com/jsdom/actual)

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!