Как узнать ширину окна браузера

Определяем ширину и высоту рабочей области браузера

Итак, задача такая — проверить отображение каких-то элементов на разных разрешениях экрана.

Но современная проблема в том, что сейчас большинство использует ноутбуки с высоким разрешением экрана. При масштабе в 100% и разрешением 3456*2160px на экране все будет на столько мелким, что с нормальным зрением работать будет тяжело и неудобно, поэтому рекомендуемые параметры масштаба — 250%, благодаря чему иконки и шрифты имеют привычные размеры, а высокое разрешение позволяет отображать максимально качественную картинку без видимых пикселей. При масштабе 250% реальные параметры экрана будут 1383*864px.

Отсюда следует проблема, когда кто-то проверяет сайт у себя в браузере и думает, что разрешение экрана 1920*1080 на 15 дюймовом ноуте, то на самом деле при рекомендуемом масштабе 125% реальный размер экрана получается 1536*864px.

Бороться с этой проблемой не нужно, но придется ее учитывать при верстке адаптивного сайта, понятно, что сайт должен выглядеть правильно при любой ширине экрана, но какие-то граничные точки (breakpoints) возможно придется изменить, чтобы учесть, что если ширина экрана меньше 1540 или 1400 — то это уже с большой вероятностью ноутбук, а значит и высота экрана будет меньше и можно уменьшить вертикальные отступы и размеры блоков.

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

Важно учитывать, что различные панели инструментов браузера (тулбары) и даже панель з недавними загрузками отнимают высоту окна браузера, и это отобразится в вычислениях.

Пример реализации вычисления высоты и ширины окна браузера

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.

Разрешение экрана

Добро пожаловать на сайт, который поможет вам определить разрешение экрана онлайн. Данный сайт определяет разрешение монитора компьютера, разрешение Android смартфона или планшета Также вы можете узнать разрешение экранов планшетов и смартфонов , можно получить информацию о разрешении экранов популярных планшетовили смартфона и других мобильных устройств, разрешение экрана iPad, iPhone.
Кроме того, вы сможете определить онлайн текущие размеры окна браузера.
Разрешение экрана — количество пикселей на единицу площади. Если ваше разрешение экрана 1024 * 768 — это значит, что ширина вашего экрана 1024 пикселя, а высота — 768 пикселей.
Так же вы сможете воспользоваться нашим онлайн калькулятором PPI — рассчитать количество пикселей на дюйм.
Примечание: Указанное разрешение экрана, считываемое с Вашего устройства может отличаться от заявленного производителем более чем на 50 пикселей. P.S. Работаем над увеличением точности.

Предложения или вопросы? Пишите: mail@myresolutionis.ru

Как узнать разрешение экрана? Этот вопрос интересует многих, и это связано с тем, что в настоящее время существах огромное количество производителей, которые выпускают абсолютно разные устройства: планшеты, смартфоны, ноутбуки, просто мониторы, которые обладают различным разрешением экрана. Так как же узнать разрешение экрана монитора ноутбука или станционарного компьютера? Для этого пройдите по этой ссылке. С этим не должно возникнуть проблем. Но как узнать разрешение экрана на планшете или смартфоне? Очень редко можно встретить устройство, производитель которого запросто откроет доступ к данной информации. Конечно, вы можете узнать разрешение экрана устройства просто посмотрев на описание на коробке. А можете узнать на нашем сайте. Вы моментально узнаете разрешение экрана устройства просто зайдя на наш сайт.

Простой и быстрый способ узнать размер окна браузера — «What’s My Browser Size?».

В каталоге: библиотеки графики, программные библиотеки, скрипты, инструменты, блоги, статьи и прочее. Каждая ссылка снабжена коротким описанием, есть удобный рубрикатор.

Ladataviz — бесплатный сервис для создания сложных визуализаций

У него простой интерфейс — загружаете данные, выбираете один из шести типов визуализации, показываете программе, на каких осях разместить данные, и настраиваете параметры отображения

Fontoscope — инструмент для «примерки» шрифтов Паратайпа до покупки

Официальный сервис шрифтовой компании Паратайп позволяет создавать и редактировать контент с использованием шрифтов из их коллекции. Это дает возможность обсудить выбор шрифтов с клиентом или коллегами перед его приобретением

Размеры и прокрутка окна

Как узнать ширину и высоту окна браузера? Как получить полную ширину и высоту документа, включая прокрученную часть? Как прокрутить страницу с помощью JavaScript?

Для большинства таких запросов мы можем использовать корневой элемент документа document.documentElement , который соответствует тегу . Однако есть дополнительные методы и особенности, которые необходимо учитывать.

Ширина/высота окна

Чтобы получить ширину/высоту окна, можно взять свойства clientWidth/clientHeight из document.documentElement :

Например, эта кнопка показывает высоту вашего окна:

Не window.innerWidth/Height

Браузеры также поддерживают свойства window.innerWidth/innerHeight . Вроде бы, похоже на то, что нам нужно. Почему же не использовать их?

Если есть полоса прокрутки, и она занимает какое-то место, то свойства clientWidth/clientHeight указывают на ширину/высоту документа без неё (за её вычетом). Иными словами, они возвращают высоту/ширину видимой части документа, доступной для содержимого.

А window.innerWidth/innerHeight включают в себя полосу прокрутки.

Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения:

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

В большинстве случаев нам нужна доступная ширина окна: для рисования или позиционирования. Полоса прокрутки «отъедает» её часть. Поэтому следует использовать documentElement.clientHeight/Width .

Читать:

Как восстановить забытую сеть wifi

DOCTYPE – это важно

Обратите внимание, что геометрические свойства верхнего уровня могут работать немного иначе, если в HTML нет . Возможны странности.

В современном HTML мы всегда должны указывать DOCTYPE .

Ширина/высота документа

Теоретически, т.к. корневым элементом документа является documentElement , и он включает в себя всё содержимое, мы можем получить полный размер документа как documentElement.scrollWidth/scrollHeight .

Но именно на этом элементе, для страницы в целом, эти свойства работают не так, как предполагается. В Chrome/Safari/Opera, если нет прокрутки, то documentElement.scrollHeight может быть даже меньше, чем documentElement.clientHeight ! С точки зрения элемента это невозможная ситуация.

Чтобы надёжно получить полную высоту документа, нам следует взять максимальное из этих свойств:

let scrollHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight ); alert('Полная высота документа с прокручиваемой частью: ' + scrollHeight);

Почему? Лучше не спрашивайте. Эти несоответствия идут с древних времён. Глубокой логики здесь нет.

Получение текущей прокрутки

Обычные элементы хранят текущее состояние прокрутки в elem.scrollLeft/scrollTop .

Что же со страницей? В большинстве браузеров мы можем обратиться к documentElement.scrollLeft/Top , за исключением основанных на старом WebKit (Safari), где есть ошибка (5991), и там нужно использовать document.body вместо document.documentElement .

К счастью, нам совсем не обязательно запоминать эти особенности, потому что текущую прокрутку можно прочитать из свойств window.pageXOffset/pageYOffset :

alert('Текущая прокрутка сверху: ' + window.pageYOffset); alert('Текущая прокрутка слева: ' + window.pageXOffset);

Эти свойства доступны только для чтения.

В качестве свойств объекта window также доступны scrollX и scrollY

По историческим причинам существует два аналога window.pageXOffset и window.pageYOffset :

window.pageXOffset – то же самое, что и window.scrollX .
window.pageYOffset – то же самое, что и window.scrollY .

Прокрутка: scrollTo, scrollBy, scrollIntoView

Для прокрутки страницы из JavaScript её DOM должен быть полностью построен.

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

Обычные элементы можно прокручивать, изменяя scrollTop/scrollLeft .

Мы можем сделать то же самое для страницы в целом, используя document.documentElement.scrollTop/Left (кроме основанных на старом WebKit (Safari), где, как сказано выше, document.body.scrollTop/Left ).

Есть и другие способы, в которых подобных несовместимостей нет: специальные методы window.scrollBy(x,y) и window.scrollTo(pageX,pageY).

Метод scrollBy(x,y) прокручивает страницу относительно её текущего положения. Например, scrollBy(0,10) прокручивает страницу на 10px вниз. Кнопка ниже демонстрирует это: window.scrollBy(0,10)
Метод scrollTo(pageX,pageY) прокручивает страницу на абсолютные координаты (pageX,pageY) . То есть, чтобы левый-верхний угол видимой части страницы имел данные координаты относительно левого верхнего угла документа. Это всё равно, что поставить scrollLeft/scrollTop . Для прокрутки в самое начало мы можем использовать scrollTo(0,0) . window.scrollTo(0,0)

В обоих методах вместо координат также может использоваться объект options , как аргумент:

window.scrollTo(options); window.scrollBy(options);

options поддерживает три свойства:

window.scrollTo(< top: 100, left: 0, behavior: "smooth" >);

top – то же самое, что y / pageY
left – то же самое, что x / pageX
behavior – определяет, каким образом будет прокручиваться страница:
- «smooth» – плавно (не поддерживается в IE и в старых версиях Safari)
- «instant» – мгновенно
- «auto» – определяется браузером (зависит от CSS-свойства scroll-behavior)
Демонстрация плавной прокрутки страницы:

scrollIntoView

Для полноты картины давайте рассмотрим ещё один метод: elem.scrollIntoView(top).

Вызов elem.scrollIntoView(top) прокручивает страницу, чтобы elem оказался вверху. У него есть один аргумент:
- если top=true (по умолчанию), то страница будет прокручена, чтобы elem появился в верхней части окна. Верхний край элемента совмещён с верхней частью окна.
- если top=false , то страница будет прокручена, чтобы elem появился внизу. Нижний край элемента будет совмещён с нижним краем окна.
Кнопка ниже прокрутит страницу так, что она сама окажется вверху:

А следующая кнопка прокрутит страницу так, что она сама окажется внизу

Как и scrollTo / scrollBy , scrollIntoView также принимает объект options как аргумент (он немного отличается):
```
this.scrollIntoView(options).
```
options поддерживает три свойства:
```
this.scrollIntoView(< behavior: "smooth", block: "end", inline: "nearest" >);
```
- behavior – анимация прокрутки ( smooth , instant , auto )
- block – вертикальное выравнивание ( start , center , end , nearest ). Значение по умолчанию: start
- inline – горизонтальное выравнивание ( start , center , end , nearest ). Значение по умолчанию: nearest
Запретить прокрутку

Иногда нам нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.

Чтобы запретить прокрутку страницы, достаточно установить document.body.style.overflow = «hidden» .

Первая кнопка останавливает прокрутку, вторая возобновляет её.

Аналогичным образом мы можем «заморозить» прокрутку для других элементов, а не только для document.body .

Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.

Это выглядит немного странно, но это можно обойти, если сравнить clientWidth до и после остановки, и если clientWidth увеличится (значит полоса прокрутки исчезла), то добавить padding в document.body вместо полосы прокрутки, чтобы оставить ширину содержимого прежней.

Итого
- Ширина/высота видимой части документа (ширина/высота области содержимого): document.documentElement.clientWidth/Height
- Ширина/высота всего документа со всей прокручиваемой областью страницы:
```
let scrollHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight );
```
- Прокрутку окна можно получить так: window.pageYOffset/pageXOffset .
- Изменить текущую прокрутку:
  - window.scrollTo(pageX,pageY) – абсолютные координаты,
  - window.scrollBy(x,y) – прокрутка относительно текущего места,
  - elem.scrollIntoView(top) – прокрутить страницу так, чтобы сделать elem видимым (выровнять относительно верхней/нижней части окна).