Как получить размеры экрана, окна и веб-страницы в JavaScript?
Представляю Вашему вниманию перевод небольшой заметки «How to Get the Screen, Window, and Web Page Sizes in JavaScript» автора Dmitri Pavlutin.
Для определения ориентации окна браузера (ландшафтной или портретной) можно сравнить его ширину и высоту.
Однако во всевозможных доступных размерах легко запутаться: существуют размеры экрана, окна, веб-страницы и т.д.
Что означают эти размеры и, главное, как их получить? Именно об этом я и собираюсь рассказать.
1. Экран
1.1. Размер экрана
Размер экрана — это ширина и высота всего экрана: монитора или мобильного дисплея.
Получить информацию о размере экрана можно с помощью свойства screen объекта window :
1.2. Доступный размер экрана
Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.
Для получения доступного размера экрана снова обращаемся к window.screen :
2. Окно
2.1. Размер внешнего окна (или внешний размер окна)
Размер внешнего окна — это ширина и высота текущего окна браузера, включая адресную строку, панель вкладок и другие панели браузера.
Получить информацию о размере внешнего окна можно с помощью свойств outerWidth и outerHeight объекта window :
2.2. Внутренний размер окна (или размер внутреннего окна)
Внутренний размер окна — это ширина и высота области просмотра (вьюпорта).
Объект window предоставляет свойства innerWidth и innerHeight :
Если мы хотим получить внутренний размер окна без полос прокрутки, то делаем следующее:
3. Размер веб-страницы
Размер веб-страницы — это ширина и высота отображаемого содержимого (отрендеренного контента).
Для получения размера веб-страницы используйте следующее (включает в себя внутренние отступы страницы, но не включает границы, внешние отступы и полосы прокрутки):
Если pageHeight больше, чем внутренняя высота окна, значит, присутствует вертикальная полоса прокрутки.
4. Заключение
Надеюсь, теперь Вы понимаете, как получать различные размеры.
Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.
Внешний размер окна — это размер активного окна браузера (включая поисковую строку, панель вкладок, открытые боковые панели и проч.), а внутренний размер окна — это размер области просмотра.
Определить размер окна браузера
Разрешение экрана — это количество пикселей, приходящихся на единицу площади. Например, разрешение экрана составляет 1024Х768. В данном случае ширина экрана будет равна 1024 пикселей, высота 768 пикселей. Заметим, что определение «разрешения экрана» следует отличать от определения «размер окна браузера». Так,если размер окна браузера уменьшен вручную, то при просмотре какого-то сайта можно развернуть браузер на весь экран. Зачем нужно знать размер окна браузера. Например, нам нужно, чтобы блок полностью закрывал все окно браузера, либо создать резиновый дизайн.
Определить ширину и высоту окна браузера / экрана с помощью js
При разработке сайтов часто возникает необходимость определить ширину/высоту пользовательского окна браузера.
Определите эти параметры можно с помощью javascript.
В JS существует несколько способов определить ширину окна
- Ширина окна минус ширина полосы скролинга — window.innerWidth
- Ширина окна вместе с полосой скрола — document.documentElement.clientWidth
Используя кнопки ниже, вы можете посмотреть на результаты работы каждого из свойств
Определение высоты экрана js
Аналогичный скрипт, что бы узнать высоту страницы экрана
Кнопки ниже демонстрируют работу этих скриптов
Как правило ширину и высоту браузера определяют во время создания разнообразных слайдеров галерей и прочих визуальной составляющей страницы. Например чтобы весь первый экран у нас занимало изображение или слайдер, мы определяем параметры окна и подставляю необходимые переменны в размеры объекта.
Метод определения размеров экрана с помощью jQuery
Ширина и высота данным методом, определяется вместе с полосой прокрутки и будет равносильна clientWidth/Height