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


196

Existe-t-il un moyen qui fonctionne pour tous les navigateurs?

Réponses:


296

réponse originale

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, vous devez multiplier par le ratio de pixels de l'appareil: window.screen.width * window.devicePixelRatioet 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 vanille, 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

16
Ce n'est pas tout à fait correct maintenant. Il n'envisage pas de modification possible du zoom de page.
sergzach

7
@sergzach - Dans ce cas, j'utiliserais $(window).width()plutôt jQuery , voir la réponse de
chaim.dev

3
Utilisez window.screen.height et window.screen.width pour obtenir la taille d'écran exacte (comme suggéré dans la réponse suivante). La raison pour laquelle vous n'obtenez pas la taille exacte est qu'elle vérifie la largeur et la hauteur disponibles, cela signifie qu'elle soustraira la hauteur de la barre d'outils (qui est exactement de 40 pixels sur Windows 7/8)
Jaruba

4
Ce ne serait pas mieux, pour que la résolution d'écran aille avec window.screen.height et width? pourquoi dispoHeight? mon availWidth par exemple, retourne 1050, alors qu'il est en fait 1080.
Malavos

5
@eckes vous devez multiplier avec window.devicePixelRatio. Reportez-vous à mon commentaire sur la réponse d'Alessandros.
Tsunamis

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

1
C'est l'équivalent de window.screen. Devrait simplement l'ajouter à la réponse existante.
Gajus

3
En fait, c'est la bonne réponse. screen.availHeightdonne juste la hauteur disponible dans la fenêtre du navigateur tandis que screen.heightdonne la hauteur exacte de l'écran.
2015

Cela renvoie la résolution à l'échelle dpi, pas la résolution d'écran native.
Dominic Cerisano

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

Les ordinateurs de bureau n'auront pas nécessairement un ratio de 1.
12Me21

34

En JavaScript vanille, 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

Les deux éléments ci-dessus peuvent être écrits sans le préfixe de fenêtre.

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

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

19

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

La résolution d'écran vous permet de connaître 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ée par une ligne horizontale de 10 pixels de large.

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

Notez qu'il y a beaucoup de confusion sur la résolution d'affichage, souvent les gens utilisent le terme au lieu de la résolution en pixels, mais les deux sont assez différents. Voir Wikipédia

Bien sûr, 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.


19

En utilisant jQuery, vous pouvez faire:

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

C'est la solution cross / everything la plus simple que j'ai utilisée. Pour la largeur du navigateur au moins ...
Zarne Dravitzki

34
Cela renvoie la taille de la fenêtre, pas la résolution d'écran.
Jonas

19

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

Pour ce faire, utilisez: window.innerWidth et les window.innerHeightpropriétés. Voir à w3schools .

Dans la plupart des cas, ce sera la meilleure façon, par exemple, d'afficher une boîte de dialogue modale flottante parfaitement centrée. 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 à l'aide du navigateur.


1
C'est la solution la plus utile. La propriété window.screen.availWidth donne l'ÉCRAN, pas la fenêtre d'affichage, qui peut être différente. Il est plus utile pour moi de savoir combien de biens immobiliers je peux réellement utiliser, pas ce que le navigateur pourrait être / devenir.
Mike Mannakee

13

Essayer d'obtenir ceci sur un appareil mobile nécessite quelques étapes supplémentaires. screen.availWidthreste le même quelle que soit l'orientation de l'appareil.

Voici ma solution pour mobile:

function getOrientation(){
    return Math.abs(window.orientation) - 90 == 0 ? "landscape" : "portrait";
};
function getMobileWidth(){
    return getOrientation() == "landscape" ? screen.availHeight : screen.availWidth;
};
function getMobileHeight(){
    return getOrientation() == "landscape" ? screen.availWidth : screen.availHeight;
};

window.orientationrenvoie undefined ... (Firefox 49) screen.orientation.anglerenvoie un angle, mais il est déjà à 0 pour le mode paysage.
Lambart


4
function getScreenWidth()
{
   var de = document.body.parentNode;
   var db = document.body;
   if(window.opera)return db.clientWidth;
   if (document.compatMode=='CSS1Compat') return de.clientWidth;
   else return db.clientWidth;
}

4

juste pour référence future:

function getscreenresolution()
{
    window.alert("Your screen resolution is: " + screen.height + 'x' + screen.width);
}

3

Si vous souhaitez détecter la résolution de l'écran, vous souhaiterez peut-être extraire la résolution du plug-in . Il vous permet d'effectuer les opérations suivantes:

var res = require('res')
res.dppx() // 1
res.dpi() // 96
res.dpcm() // 37.79527559055118

Voici quelques grandes résolutions à retenir de Ryan Van Etten, l'auteur du plugin:

  • 2 ensembles d'unités existent et diffèrent à une échelle fixe: les unités de périphériques et les unités CSS.
  • La résolution est calculée comme le nombre de points pouvant tenir sur une longueur CSS particulière.
  • Conversion d'unité: 1⁢in = 2,54⁢cm = 96⁢px = 72⁢pt
  • CSS a des longueurs relatives et absolues. En zoom normal: 1⁢em = 16⁢px
  • dppx est équivalent au rapport pixel-appareil.
  • La définition de devicePixelRatio diffère selon la plate-forme.
  • Les requêtes multimédias peuvent cibler une résolution minimale. Utilisez avec soin pour la vitesse.

Voici le code source de res, à partir d'aujourd'hui:

!function(root, name, make) {
  if (typeof module != 'undefined' && module.exports) module.exports = make()
  else root[name] = make()
}(this, 'res', function() {

  var one = {dpi: 96, dpcm: 96 / 2.54}

  function ie() {
    return Math.sqrt(screen.deviceXDPI * screen.deviceYDPI) / one.dpi
  }

  function dppx() {
    // devicePixelRatio: Webkit (Chrome/Android/Safari), Opera (Presto 2.8+), FF 18+
    return typeof window == 'undefined' ? 0 : +window.devicePixelRatio || ie() || 0
  }

  function dpcm() {
    return dppx() * one.dpcm
  }

  function dpi() {
    return dppx() * one.dpi
  }

  return {'dppx': dppx, 'dpi': dpi, 'dpcm': dpcm}
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.