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

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

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

  • Ширина окна минус ширина полосы скролинга — window.innerWidth
  • Ширина окна вместе с полосой скрола — document.documentElement.clientWidth
Определить  ширину и высоту окна  браузера / экрана  с помощью js
window.innerWidth // ширина вместе с скролом
document.documentElement.clientWidth // ширина без учета полосы прокрутки

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


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

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

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

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

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


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

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

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

Рубрики: js

1 комментарий

Roman K · 22.05.2020 в 13:02

Задавайте ваши вопросы в комментариях ниже

Добавить комментарий

placeholder

Ваш адрес email не будет опубликован. Обязательные поля помечены *