web-dev-qa-db-fra.com

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

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

javascriptscreen-resolution
174
iceorangeblue

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 le multiplier par le nombre 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 Vanilla, 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
269
John Weldon
var width = screen.width;
var height = screen.height;
49
Alessandro

En Vanilla JavaScript, cela vous donnera le DISPONIBLE largeur/hauteur:

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()
33
Ben

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 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é par une ligne horizontale de 10 pixels de large.

Il est impossible 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, mais uniquement le nombre de pixels. 72 dpi est la supposition habituelle ....

Notez qu'il y a beaucoup de confusion à propos de la résolution d'affichage. Souvent, les gens utilisent le terme résolution au lieu de résolution pixel, mais les deux sont très différents. Voir Wikipedia

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
Larry K

En utilisant jQuery, vous pouvez faire:

$(window).width()
$(window).height()
19
chaim.dev

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 les propriétés: window.innerWidth et window.innerHeight. Voir à w3schools .

Dans la plupart des cas, ce sera la meilleure façon, par exemple, d’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 utilisant le navigateur.

16
serfer2

Essayer d'obtenir ceci sur un appareil mobile nécessite quelques étapes supplémentaires. screen.availWidth reste le même quelle que soit l'orientation du périphérique.

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;
};
12
posit labs

Voir Obtenir la résolution de l'écran du moniteur avec Javascript et l'objet window.screen)

7
cletus
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
Anabar

juste pour référence future:

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

Si vous souhaitez détecter la résolution de l'écran, vous pouvez extraire le plugin res . Cela vous permet de faire ce qui suit:

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

Voici quelques excellents 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 l'appareil et les unités CSS.
  • La résolution est calculée en tant que nombre de points pouvant correspondre à une longueur CSS particulière.
  • Conversion de l'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 équivaut à ratio de pixel de périphérique.
  • la définition de devicePixelRatio diffère selon la plate-forme.
  • Les requêtes multimédia peuvent cibler une résolution minimale. Utilisez avec soin pour la vitesse.

Voici le code source de res, à compter 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}
});
2
Abram