Comment puis-je détecter la résolution d'écran de l'appareil d'un utilisateur à l'aide de JavaScript ?

Détection de la résolution d'écran en JavaScript

Dans le développement Web, il est souvent nécessaire de déterminer la résolution de l'appareil de l'utilisateur. JavaScript fournit un moyen pratique de récupérer ces informations pour la plupart des navigateurs modernes.

Compatibilité des navigateurs

L'objet window.screen est pris en charge dans tous les principaux navigateurs, notamment :

• Chrome
• Firefox
• Safari
• Edge
• Opera

Écran d'accès Résolution

Pour obtenir la résolution de l'écran, utilisez les propriétés suivantes de l'objet window.screen :

• availHeight : La hauteur disponible de l'écran en pixels, hors barres d'outils, menus, etc.
• availWidth : La largeur disponible de l'écran en pixels, hors barres d'outils, menus, etc.
• hauteur : La hauteur absolue de l'écran en pixels, y compris les barres d'outils, les menus, etc.
• largeur : la largeur absolue de l'écran en pixels, y compris les barres d'outils, les menus, etc.

Résolution native pour les appareils mobiles

Pour déterminer la résolution native d'un appareil mobile, multipliez la largeur et la hauteur disponibles par le rapport de pixels de l'appareil :

<code class="javascript">nativeWidth = window.screen.availWidth * window.devicePixelRatio;
nativeHeight = window.screen.availHeight * window.devicePixelRatio;</code>

Obtenir une résolution absolue

Si vous Si vous avez besoin de la résolution absolue de l'écran (y compris les barres d'outils et les menus), utilisez les propriétés height et width au lieu deavaHeight etavaWidth.

Exemple

Le code suivant récupère le résolution d'écran disponible :

<code class="javascript">let availHeight = window.screen.availHeight;
let availWidth = window.screen.availWidth;
console.log("Available screen resolution: " + availWidth + "x" + availHeight);</code>

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!