Comment puis-je obtenir la largeur réelle de l'appareil en JavaScript ?

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

Introduction

Capturer la largeur réelle de l'appareil, par opposition à la largeur de la fenêtre d'affichage, est une exigence courante dans le développement JavaScript. Les requêtes multimédias CSS offrent cette fonctionnalité via la propriété max-device-width. Cependant, relier cette fonctionnalité à JavaScript reste un défi.

Largeur de l'appareil par rapport à la largeur de la fenêtre

La largeur de la fenêtre concerne la partie visible de la page dans la fenêtre du navigateur. La largeur de l'appareil, en revanche, représente la taille physique totale de l'écran de l'appareil. Cette distinction devient cruciale lors de la création de designs réactifs, en particulier lorsqu'il s'agit de smartphones en orientation paysage.

Solution JavaScript

Pour obtenir la largeur de l'appareil en JavaScript, utilisez l'écran. propriété width :

var deviceWidth = screen.width;

Dans certains cas, notamment avec les navigateurs de bureau, window.innerWidth peut fournir une valeur plus précise mesure :

var windowWidth = window.innerWidth;

Pour les scénarios impliquant à la fois des navigateurs de bureau et des appareils mobiles, une solution complète consiste à combiner les deux mesures :

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

Cette approche garantit la largeur correcte de l'appareil, quel que soit l'appareil. ou type de navigateur.

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!