Как узнать размер окна браузера
Размеры и прокрутка страницы
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/size-and-scroll-window.
Как найти ширину окна браузера? Как узнать всю высоту страницы, с учётом прокрутки? Как прокрутить её из JavaScript?
Ширина/высота видимой части окна
Свойства clientWidth/Height для элемента document.documentElement – это как раз ширина/высота видимой области окна.
Например, кнопка ниже выведет размер такой области для этой страницы:
В чём отличие? Оно небольшое, но чрезвычайно важное.
Если справа часть страницы занимает полоса прокрутки, то эти строки выведут разное:
Ширина/высота страницы с учётом прокрутки
Это верно для обычных элементов.
Надёжно определить размер страницы с учётом прокрутки можно, взяв максимум из нескольких свойств:
Почему так? Лучше и не спрашивайте, это одно из редких мест, где просто ошибки в браузерах. Глубокой логики здесь нет.
Получение текущей прокрутки
Что же со страницей?
Чтобы вообще обойти проблему, можно использовать специальные свойства window.pageXOffset/pageYOffset :
Если IE8- не волнует, то просто используем эти свойства.
Кросс-браузерный вариант с учётом IE8 предусматривает откат на documentElement :
Изменение прокрутки: scrollTo, scrollBy, scrollIntoView
Чтобы прокрутить страницу при помощи JavaScript, её DOM должен быть полностью загружен.
На обычных элементах свойства scrollTop/scrollLeft можно изменять, и при этом элемент будет прокручиваться.
Но есть и другое, простое и универсальное решение – специальные методы прокрутки страницы window.scrollBy(x,y) и window.scrollTo(pageX,pageY).
Метод scrollBy(x,y) прокручивает страницу относительно текущих координат.
Например, кнопка ниже прокрутит страницу на 10px вниз:
Метод scrollTo(pageX,pageY) прокручивает страницу к указанным координатам относительно документа.
scrollIntoView
Для полноты картины рассмотрим также метод elem.scrollIntoView(top).
Кнопка ниже прокрутит страницу так, чтобы кнопка оказалась вверху:
А следующая кнопка прокрутит страницу так, чтобы кнопка оказалась внизу:
Запрет прокрутки
Иногда бывает нужно временно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.
При этом страница замрёт в текущем положении.
При нажатии на верхнюю кнопку страница замрёт на текущем положении прокрутки. После нажатия на нижнюю – прокрутка возобновится.
Вместо document.body может быть любой элемент, прокрутку которого необходимо запретить.
Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.
Итого
Для получения размеров видимой части окна: document.documentElement.clientWidth/Height
Для получения размеров страницы с учётом прокрутки:
Прокрутка окна:
Прокрутку окна можно получить как window.pageYOffset (для горизонтальной – window.pageXOffset ) везде, кроме IE8-.
На всякий случай – вот самый кросс-браузерный способ, учитывающий IE7- в том числе:
Установить прокрутку можно при помощи специальных методов:
Задачи
Полифилл для pageYOffset в IE8
При подключённом полифилле такой код должен работать в IE8:
В стандартном режиме IE8 можно получить текущую прокрутку так:
Самым простым, но неверным было бы такое решение:
Как узнать ширину окна браузера?
Каким инструментом лучше пользоваться, чтобы определить/задать ширину экрана браузера?
Ситуация: нужно посмотреть, как выглядит страница при ширине экрана 1024 px (вместе с прокруткой)
Правильно я понимаю, что использование Window Resizer + контроль на whatsmy.browsersize.com позволит мне точно контролировать ширину браузера?
Или вообще есть какие-то более элементарные пути? Простите, туплю (
PS Да, я искала обсуждение аналогичного вопроса на форуме и не нашла
Просто один из вариантов. Возможно не ваш.
* появится возможность выбора разрешения или устройства
Так в частности «адаптивную верстку» проверяют
facebook (Дети диаграммы Ганта)
Каким инструментом лучше пользоваться, чтобы определить/задать ширину экрана браузера?
Ситуация: нужно посмотреть, как выглядит страница при ширине экрана 1024 px (вместе с прокруткой)
Правильно я понимаю, что использование Window Resizer + контроль на whatsmy.browsersize.com позволит мне точно контролировать ширину браузера?
Или вообще есть какие-то более элементарные пути? Простите, туплю (
PS Да, я искала обсуждение аналогичного вопроса на форуме и не нашла
Посмотрел данные сайты. Очевидно они показывают размеры окна браузера без элементов интерфейса (полосы прокруток, меню). Поэтому если вам нужен размер с полосой прокрутки, то все верно. Тем более, вряд ли несколько пикселей сыграют большую роль.
Определяем ширину/высоту экрана или окна браузера с помощью JS и на jQuery
При разработке интерфейсов частенько приходиться пользоваться JavaScript`ом. Раньше считалось, что использовть любые скрипты, которые исполняются на стороне пользователя – плохо и использование JS считалось «дурным тоном».
Времена изменились и разработка интерфейса зачастую делается фреймворками основанными на JS.
Где может пригодиться?
За всех не скажу, но определение размеров экрана или окна браузера, лично для меня, пригождается при внедрении в CMS всевозможных галерей, слайдеров и т.д.
На JS
Определение ширины или высоты монитора
Это самый простой способ, которые работает во всех браузерах и на всех устройствах. Если у Вас не подключено никаких сторонних библиотек, которые помогли бы сделать тоже самое, то этот вариант единственный.
Все же остается вероятность того, что пользователь собственноручно отключить обработку JS в браузере. В современном мире шансы равны 0,00001%.
В JS, чтобы определить размеры экрана, нужно использовать:
Ниже я привел работающий пример как можно узнать размеры экрана на JS:
Определение ширины и высоты окна браузера
Если нужно позиционировать любые элементы на странице, то более правильным решением будет использовать не размеры экрана, а размеры окна браузера. В JS это делается так:
Соответственно вот пример использования:
Стоит учесть, что в примере ширина и высота окна – это размеры маленького окна справа на сервисе codepen. В «боевых» условиях будет отображаться реальный размер окна.
На jQuery
Если У Вас уже есть подключенная библиотека jQuery, то можно узнать размеры окна с помощью нее. Хоть уже jQuery и старичок, от которого все пытаются избавиться, его нередко можно встретить даже в современных CMS системах.
Определение размеров монитора на jQuery
Определить размер монитора на jQuery у меня не получилось. Если у Вас есть готовое решение, то просьба написать в комментариях.
Для определения ширины или высоты окна браузера
Чтобы задействовать для нашей задачи jQuery, необходимо использовать код:
Комментарии
Вообще то alert без смысленно его видит человек. Мне надо использовать эти данных(height:width) чтоб изменит какието элементи: if ($height>=600) < #code… >else
Я вроде и написал, что пример бессмысленный. Главное же возможность
document.body.clientHeight возвращает 0 – почему? Пробовал в разных браузерах.
То, что здесь написано – не работает, если изначально не указаны размеры. document.body.clientHeight выводит нулевое значение если окно браузера пустое не зависимо от размеров браузера. Например есть self.innerHeight, который выводит высоту окна, но почему то не везде работает.
спасибо автору он дал наводную инфу а дальше можно посмотреть или в стандарте или здесь http://www.w3schools.com/jquery/css_height.asp
Дмитрий: document.body.clientHeight возвращает 0 – почему? Пробовал в разных браузерах.
Я обновил статью и сейчас должно все работать как часы.
А не проще нативно получить через Javascript все эти данные без JQuery. Что за маразм?
Вы невнимательно читаете статью. Есть же и на JS. jQuery приведен для тех проектов, где он используется.
Как в JavaScript получить размеры экрана, окна и веб-страницы
Дата публикации: 2020-07-21
От автора: чтобы определить, находится ли окно браузера в альбомном или портретном режиме, вы можете сравнить ширину и высоту окна браузера. Но из моего опыта в куче размеров легко запутаться: размеры экрана, окна, веб-страницы. Как определяются эти размеры и, что важно, как получить к ним доступ, я расскажу в этом посте.
1. Экран
1.1 Размер экрана
Размер экрана — это ширина и высота экрана: монитор или мобильный экран.
window.screen — это объект, который содержит информацию о размере экрана. Вот как получить доступ к ширине и высоте экрана:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
1.2 Доступный размер экрана
Доступный размер экрана состоит из ширины и высоты активного экрана без панелей инструментов операционной системы.
Для доступа к доступному размеру экрана вы можете снова использовать объект window.screen:
2. Окно
2.1 Внешний размер окна
Внешний размер окна состоит из ширины и высоты всего окна браузера, включая адресную строку, панель вкладок и другие панели браузера.
Чтобы получить доступ к внешнему размеру окна, вы можете использовать свойство outerWidth и outerHeight, которые доступны непосредственно для объекта window:
2.2 Внутренний размер окна
Внутренний размер окна (он же размер области просмотра) состоит из ширины и высоты области просмотра, отображающей веб-страницу.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Объект window предоставляет необходимые свойства innerWidth и innerHeight:
Если вы хотите получить доступ к внутреннему размеру окна без полос прокрутки, вы можете использовать следующее:
3. Размер веб-страницы
Размер веб-страницы состоит из ширины и высоты отображаемого содержимого страницы.
Используйте следующее для доступа к размеру содержимого веб-страницы (включая отступы страницы, но не границы, поля или полосы прокрутки):
Если pageHeight больше, чем внутренняя высота окна, то отображается вертикальная полоса прокрутки.
4. Заключение
Надеюсь, теперь у вас есть лучшее представление о том, как определить различные виды размеров. Размер экрана — это размер всего экрана (или монитора), а доступный размер экрана — это размер монитора, исключая панели задач или панели инструментов ОС.
Внешний размер окна измеряет все окно браузера (включая адресную строку, панель вкладок, боковые панели, если они открыты), а внутренний размер окна — это размер области просмотра, где отображается веб-страница. Наконец, размер веб-страницы — это размер веб-страницы с ее содержимым.
Автор: Dmitri Pavlutin
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Получить размер экрана, текущей веб-страницы и окна браузера
17 ответов
Вы можете получить размер окна или документа с помощью jQuery:
Для размера экрана вы можете использовать screen объект:
Вот как мне удалось получить ширину экрана в React JS Project:
Если ширина равна 1680, вернуть 570, иначе вернуть 200
Для этого используйте: Свойства window.innerWidth и window.innerHeight (см. Документ в w3schools).
В большинстве случаев это будет лучший способ, например, отображать идеально центрированный плавающий модальный диалог. Это позволяет вам рассчитывать позиции на окне, независимо от того, какое разрешение ориентации или размера окна использует браузер.
Если вам нужно по-настоящему пуленепробиваемое решение для ширины и высоты документа ( pageWidth и pageHeight на рисунке), вы можете использовать мой плагин, jQuery.documentSize.
Обновление: теперь и для размеров окна
Начиная с версии 1.1.0, jQuery.documentSize также обрабатывает размеры окна.
Это необходимо, потому что
С введением globalThis в ES2020 вы можете использовать такие свойства, как.
Для размера экрана:
Для размера окна
Для смещения:
Полное руководство по размерам экрана
JavaScript
Для высоты:
Примечание. Когда окно развернуто, оно будет равно screen.availHeight
Для ширины:
Для роста:
Но когда мы говорим об адаптивных экранах и если по какой-то причине мы хотим справиться с этим с помощью jQuery,
Дает правильное измерение. Даже это убирает лишнее пространство полосы прокрутки, и нам не нужно беспокоиться о корректировке этого пространства 🙂
Это представляет фактический размер обертки.
Вот кросс-браузерное решение с чистым JavaScript (Source) :
Вот мое решение!
Не-jQuery способ получить доступное измерение экрана. window.screen.width/height уже выставлен, но для отзывчивости веб-дизайна и полноты я думаю стоит упомянуть следующие атрибуты:
Я разработал библиотеку для знания реального размера окна просмотра для настольных компьютеров и мобильных браузеров, потому что размеры области просмотра несовместимы между устройствами и не могут полагаться на все ответы этого поста (согласно всем исследованиям, которые я сделал по этому поводу): https://github.com/pyrsmk/W
Вы можете использовать объект Screen, чтобы получить это.
Ниже приведен пример того, что он будет возвращать:
Чтобы получить ширину и высоту окна, оно должно быть screen.availWidth или screen.availHeight соответственно.
Я написал небольшой букмарклет javascript, который вы можете использовать для отображения размера. Вы можете легко добавить его в свой браузер и всякий раз, когда вы щелкаете по нему, вы увидите размер в правом углу окна вашего браузера.
Здесь вы найдете информацию, как использовать букмарклет https://en.wikipedia.org/wiki/Bookmarklet
Bookmarklet
Исходный код
Оригинальный код в кофе:
В основном, код предшествует небольшому div, который обновляется при изменении размера вашего окна.