Obtenir la largeur de la fenêtre du navigateur, y compris la barre de défilement
J'ai essayé d'obtenir la largeur de la fenêtre du navigateur avec $(window).width();. Sur IE 10, il retourne toute la largeur du navigateur, inclut la barre de défilement. Cependant, sur Firefox et Chrome, les deux renvoient la valeur sans la barre de défilement.
Comment puis-je obtenir la largeur du navigateur avec la barre de défilement? Parce que j'ai besoin que la largeur détectée soit exactement la même que CSS.
Merci.
Cela obtiendra la largeur complète de la fenêtre:
window.outerWidth
NOTE:outerWidth() de jQuery ne fonctionne pas sur $(window)
La première réponse était proche, mais après un examen plus approfondi, elle est un peu plus compliquée. Le body.clientWidth est la largeur sans les barres de défilement. Le window.outerWidth est la largeur incluant les barres de défilement et d'autres éléments de fenêtre comme la bordure de fenêtre. Le window.innerWidth est la largeur réelle de la fenêtre, y compris les barres de défilement, mais pas la bordure de la fenêtre.
window.innerWidth semble être la bonne réponse en cas de besoin pour une conception réactive
window.innerWidth donnera la largeur du HTML et la barre de défilement. Cette valeur est la valeur utilisée pour les points d'arrêt de largeur de périphérique lors de l'utilisation de requêtes multimédias en CSS. Essentiellement, window.innerWidth est égal à l'unité CSS calculée 100vw. Cependant, window.outerWidth vous donnera la largeur de la fenêtre entière.
Par exemple, si les outils de développement de Chrome étaient ouverts à l'intérieur du navigateur, window.outerWidth serait la largeur de la page Web + la barre de défilement + l'inspecteur des outils de développement de Chrome. Tandis que window.innerWidth renverrait la largeur de la page Web + barre de défilement.