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

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

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

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

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

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.

En utilisant jQuery, vous pouvez faire:

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

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.

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;
};

Voir Obtenir la résolution d'écran du moniteur avec Javascript et l' window.screenobjet

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;
}

juste pour référence future:

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

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}
});