Téléchargez le navigateur dimensions de la fenêtre d’affichage avec JavaScript

Question

Je veux offrir à mes visiteurs la possibilité de voir des images de haute qualité, est-il un moyen je peux détecter la taille de la fenêtre ?

Ou, mieux encore, la taille de la fenêtre du navigateur avec JavaScript ? Voir zone verte ici :

Answer 1

Croix-navigateur @media (width) et @media (height) valeurs

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)

window.innerWidth et .innerHeight

• obtient CSS viewport @media (width) et @media (height) incluent des barres de défilement
• initial-scale et zoom variations peuvent causer mobile des valeurs de tort à l'échelle de ce qui PPK appelle la fenêtre d'affichage visuel et être plus petite que l' @media valeurs
• zoom peut causer des valeurs de 1px en raison natif de l'arrondissement
• undefined dans IE8-

document.documentElement.clientWidth et .clientHeight

• est égal à CSS fenêtre d'affichage de la largeur de moins de la largeur de la barre de défilement
• les matchs @media (width) et @media (height) quand il n'y a pas de barre de défilement
• même en tant que jQuery(window).width() qui jQuery appelle la fenêtre d'affichage du navigateur
• la disposition de la croix-navigateur

Ressources

• En direct de sorties pour des diverses dimensions
• point utilise de la croix-navigateur de la fenêtre d'affichage techniques
• réel utilise matchMedia pour obtenir les dimensions précises dans n'importe quelle unité

Answer 2

fonctions de dimension de jQuery

et

Answer 3

Vous pouvez utiliser les propriétés window.innerWidth et window.innerHeight .

Answer 4

Si vous n’utilisez pas de jQuery, il est laid. Voici un extrait qui devrait fonctionner sur tous les nouveaux navigateurs. Le comportement est différent en mode Quirks et normes dans Internet Explorer. Il prend soin d’elle.

Answer 5

Je sais que cela a une réponse acceptable, mais je suis tombé sur une situation où clientWidth n’a pas fonctionné, comme iPhone (du moins la mienne) retourné 980, pas 320, alors j’ai utilisé window.screen.width. Je travaillais sur site existant déployé « réactif » et nécessaire pour forcer les grands navigateurs d’utiliser une fenêtre différente de meta.

Espérons que cela aide quelqu'un, il ne peut pas être parfait, mais ça marche dans mon essai sur iOs et Android.