Определить ширину и высоту окна браузера / экрана с помощью js

При разработке сайтов часто возникает необходимость определить ширину/высоту пользовательского окна браузера.

Определите эти параметры можно с помощью javascript.

В JS существует несколько способов определить ширину окна

• Ширина окна минус ширина полосы скролинга — window.innerWidth
• Ширина окна вместе с полосой скрола — document.documentElement.clientWidth

window.innerWidth // ширина вместе с скролом
document.documentElement.clientWidth // ширина без учета полосы прокрутки

Используя кнопки ниже, вы можете посмотреть на результаты работы каждого из свойств

Определение высоты экрана js

Аналогичный скрипт, что бы узнать высоту страницы экрана

window.innerHeight // высота вместе с скролом
document.documentElement.clientHeight // ширина без учета полосы прокрутки

Кнопки ниже демонстрируют работу этих скриптов

Как правило ширину и высоту браузера определяют во время создания разнообразных слайдеров галерей и прочих визуальной составляющей страницы. Например чтобы весь первый экран у нас занимало изображение или слайдер, мы определяем параметры окна и подставляю необходимые переменны в размеры объекта.

Метод определения размеров экрана с помощью jQuery

$(window).width(); //Ширина браузера
$(window).height(); //Высота браузера

Ширина и высота данным методом, определяется вместе с полосой прокрутки и будет равносильна clientWidth/Height