Comment puis-je obtenir avec précision la largeur de l'écran de l'appareil à l'aide de JavaScript ?

Obtenez des mesures précises de la largeur de l'appareil avec JavaScript

Lors de l'adaptation d'applications Web à différentes tailles d'appareil, il est crucial d'obtenir la largeur réelle de l'écran de l'appareil. Alors que CSS propose des requêtes multimédias avec la propriété max-device-width, JavaScript ne dispose pas d'un équivalent direct pour récupérer ces informations.

Limites de largeur de fenêtre

Les liaisons JavaScript s'appuient souvent sur tester la largeur de la fenêtre d'affichage, ce qui peut entraîner des résultats inexacts pour les appareils en orientation paysage, car ils affichent une zone disponible plus large. Cette limitation nécessite des vérifications supplémentaires, compromettant l'élégance du code.

Solution : propriété de largeur d'écran

Pour déterminer avec précision la largeur de l'écran de l'appareil, JavaScript fournit la propriété screen.width. Cette valeur représente l'espace visible de l'écran, à l'exclusion des barres de défilement et d'autres éléments du navigateur.

Considérations multiplateformes

Dans certains cas, window.innerWidth peut être plus approprié, en particulier pour les navigateurs de bureau où la taille de la fenêtre diffère de la taille de l'écran de l'appareil. Pour répondre à toutes les plates-formes, il est recommandé d'utiliser le conditionnel suivant :

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

Cette approche attribue la largeur réelle de l'appareil à la variable width si window.innerWidth est défini, sinon elle utilise screen.width comme paramètre. solution de repli.

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!