Comment puis-je déterminer avec précision la largeur de l'écran de l'appareil en JavaScript ?

Détermination de la largeur de l'écran de l'appareil en JavaScript

La possibilité de récupérer la largeur de l'écran de l'appareil en JavaScript peut être utile pour adapter le contenu aux dimensions spécifiques de l'appareil de l'utilisateur. Alors que les requêtes multimédias CSS constituent un moyen pratique d'effectuer des ajustements de style en fonction de la taille de l'écran, JavaScript offre une méthode directe pour accéder à la largeur réelle de l'appareil.

Contrairement à la largeur de la fenêtre d'affichage, la largeur de l'appareil fournit une mesure sans faille des dimensions physiques de l'écran. . Ceci est particulièrement utile pour cibler des orientations de périphérique spécifiques qui peuvent ne pas correspondre aux contraintes de la fenêtre d'affichage. Par exemple, sur les appareils iOS, une requête multimédia CSS ciblant une largeur maximale de 640 pixels capturera les modes paysage et portrait, même sur un iPhone 4. Les appareils Android nécessitent cependant l'utilisation de la largeur de l'appareil pour gérer efficacement les deux orientations tout en excluant appareils de bureau.

Cependant, lorsque vous tentez d'invoquer des liaisons JavaScript en fonction de la largeur de l'appareil, il est courant d'être limité à la largeur de la fenêtre d'affichage. Cette limitation impose des vérifications conditionnelles supplémentaires, comme en témoigne le code suivant :

if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }

Pour contourner cette approche verbeuse, envisagez d'utiliser la propriété screen.width, qui fournit un accès direct à la largeur physique de l'écran de l'appareil. De plus, pour les navigateurs de bureau où la taille de la fenêtre peut différer de la taille de l'écran, la propriété window.innerWidth peut être utilisée.

Dans les situations impliquant à la fois les navigateurs mobiles et de bureau, une approche hybride est souvent recommandée :

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

Cette combinaison garantit une détection précise de la largeur des appareils sur divers appareils et systèmes d'exploitation.

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!