Comment détecter la résolution de l'écran avec JavaScript ?

Question

Existe-t-il une méthode qui fonctionne pour tous les navigateurs ?

Answer 1

première réponse

Oui.

window.screen.availHeight
window.screen.availWidth

mise à jour 2017-11-10

De Tsunamis dans les commentaires :

Pour obtenir la résolution native d'un appareil mobile, par exemple, il faut la multiplier par le ratio de pixels de l'appareil : window.screen.width * window.devicePixelRatio et window.screen.height * window.devicePixelRatio . Cela fonctionnera également sur les ordinateurs de bureau, qui auront un ratio de 1.

Et de Ben dans une autre réponse :

En JavaScript classique, cela vous donnera la largeur/hauteur DISPONIBLE :

window.screen.availHeight
window.screen.availWidth

Pour la largeur/hauteur absolue, utilisez :

window.screen.height
window.screen.width

Answer 2

var width = screen.width;
var height = screen.height;

Answer 3

En JavaScript classique, vous obtiendrez le résultat suivant DISPONIBLE largeur/hauteur :

window.screen.availHeight
window.screen.availWidth

Pour la largeur/hauteur absolue, utilisez :

window.screen.height
window.screen.width

Les deux exemples ci-dessus peuvent être écrits sans le préfixe "fenêtre".

Vous aimez jQuery ? Cela fonctionne dans tous les navigateurs, mais chaque navigateur donne des valeurs différentes.

$(window).width()
$(window).height()

Answer 4

Vous pouvez également obtenir la largeur et la hauteur de la FENÊTRE, en évitant les barres d'outils du navigateur et... (pas seulement la taille de l'écran).

Pour ce faire, utilisez : window.innerWidth et window.innerHeight propriétés. Voir le site w3schools .

Dans la plupart des cas, ce sera le meilleur moyen, par exemple pour afficher un dialogue modal flottant parfaitement centré. Il vous permet de calculer les positions sur la fenêtre, quelle que soit l'orientation de la résolution ou la taille de la fenêtre utilisée par le navigateur.

Answer 5

Voulez-vous dire la résolution d'affichage (par exemple 72 points par pouce) ou les dimensions en pixels (la fenêtre du navigateur est actuellement de 1000 x 800 pixels) ?

La résolution de l'écran vous permet de savoir quelle sera l'épaisseur d'une ligne de 10 pixels en pouces. Les dimensions en pixels vous indiquent quel pourcentage de la hauteur d'écran disponible sera occupé par une ligne horizontale de 10 pixels de large.

Il n'y a aucun moyen de connaître la résolution d'affichage à partir de Javascript, car l'ordinateur lui-même ne connaît généralement pas les dimensions réelles de l'écran, mais seulement le nombre de pixels. 72 dpi est l'estimation habituelle. ....

Notez qu'il y a beaucoup de confusion au sujet de la résolution d'affichage, les gens utilisent souvent ce terme au lieu de résolution en pixels, mais les deux sont très différents. Voir Wikipedia

Bien entendu, vous pouvez également mesurer la résolution en points par cm. Il y a aussi le sujet obscur des points non carrés. Mais je m'égare.