Existe-t-il un moyen qui fonctionne pour tous les navigateurs?
Existe-t-il un moyen qui fonctionne pour tous les navigateurs?
Réponses:
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.devicePixelRatio
etwindow.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
$(window).width()
plutôt jQuery , voir la réponse de
window.devicePixelRatio
. Reportez-vous à mon commentaire sur la réponse d'Alessandros.
var width = screen.width;
var height = screen.height;
window.screen
. Devrait simplement l'ajouter à la réponse existante.
screen.availHeight
donne juste la hauteur disponible dans la fenêtre du navigateur tandis que screen.height
donne la hauteur exacte de l'écran.
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.
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.innerHeight
proprié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.availWidth
reste 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.orientation
renvoie undefined ... (Firefox 49) screen.orientation.angle
renvoie un angle, mais il est déjà à 0 pour le mode paysage.
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:
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}
});