Comment puis-je obtenir avec précision la largeur du navigateur en JavaScript, en gérant les cas extrêmes ?

Obtenir la largeur du navigateur avec JavaScript, y compris les cas Edge

Obtenir la largeur actuelle du navigateur avec JavaScript peut être simple, mais il est crucial de prendre en compte Edge cas pour garantir des mesures précises. Explorons une solution :

Le code que vous avez mentionné pour obtenir la largeur du navigateur à l'aide de document.body.offsetWidth peut échouer si l'élément body a une largeur définie sur 100 %. En effet, l'élément du corps se dilatera pour remplir l'espace horizontal disponible, ce qui entraînera une mesure inexacte.

Pour résoudre ce problème, considérez la fonction suivante :

function getBrowserWidth() {
  return Math.max(
    document.documentElement.clientWidth,
    window.innerWidth || 0
  );
}

Explication :

• document.documentElement.clientWidth : Cette propriété renvoie le largeur de la fenêtre en pixels, y compris la largeur de la barre de défilement verticale si elle est présente. Cependant, elle n'inclut pas les barres de défilement horizontales.
• window.innerWidth : Cette propriété renvoie la largeur intérieure de la fenêtre en pixels, y compris les barres de défilement horizontales.

Comment ça marche :

La fonction essaie d'abord d'utiliser document.documentElement.clientWidth comme méthode préférée. Si cette valeur n'est pas disponible ou renvoie 0, elle revient à window.innerWidth pour tenir compte des barres de défilement horizontales.

Avantages :

• Adresse le bord cas d'un corps avec une largeur de 100 %.
• Fournit une mesure précise de la largeur du navigateur, même avec une largeur horizontale. barres de défilement.

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!