Размер окна браузера
Размер сайта должен быть меньше, чем размер экрана, потому что у браузера есть рамка, полосы прокрутки и иногда другие инструменты, уменьшающие видимую область сайта.
Под какое разрешение делать сайт?
Как рассчитать ширину сайта для того, чтоб не появлялся горизонтальный скроллинг?
- Разрешение — это соотношение экранной ширины и высоты в пикселях (например, 1920 x 1080 пикселей).
- Физический размер экрана — это его диагональ в дюймах (например, 24 дюйма).
- Размер окна браузера — это ширина и высота области просмотра в пикселях. Это разрешение за вычетом рамок, полос прокрутки и других элементов, уменьшающих видимую область сайта. Размер окна браузера пользователь может менять, поэтому дизайнеры обычно задают контентную область и боковые отступы.
Пользователь может просматривать сайты на различных устройствах. Ниже приведена статистика устройств просмотра сайтов Яндекс.Метрика на январь 2021 год.
Типы устройств просмотра сайтов
Статистика Яндекс.Метрика
| Разрешение экрана: |
| Разрешение окна клиента: |
Размеры окон экрана монитора и браузера указаны в пикселях (px).
Распространенные мониторы
Различные размеры окон браузера
Что означают размеры окон монитора и браузера?
1.1. Размер экрана
Размер экрана — это ширина и высота всего экрана: монитора (дисплея) или мобильного дисплея.1.2. Доступный размер экрана
Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.
| Размер экрана |
| Доступный размер экрана |
| Внешнее окно браузера |
| Окно прсмотра |
2.1. Размер внешнего окна — это ширина и высота текущего (активного) окна браузера, включая адресную строку, поисковую строку, панель вкладок, открытые боковые панели и прочие панели браузера.
2.2. Размер внутреннего окна — это ширина и высота области просмотра .
3. Размер веб-страницы
Размер веб-страницы — это ширина и высота отображаемого содержимого (размер загруженной веб-страницы).
Размеры экранов для адаптивной верстки
- 320px (20em),
- 640px (40em),
- 960px (60em),
- 1024px (64em)
- 1280px (80em),
- 1920px (120em).
Размеры и прокрутка окна
Как узнать ширину и высоту окна браузера? Как получить полную ширину и высоту документа, включая прокрученную часть? Как прокрутить страницу с помощью 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 .
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 видимым (выровнять относительно верхней/нижней части окна).
Определяем ширину и высоту рабочей области браузера
Итак, задача такая — проверить отображение каких-то элементов на разных разрешениях экрана.
Но современная проблема в том, что сейчас большинство использует ноутбуки с высоким разрешением экрана. При масштабе в 100% и разрешением 3456*2160px на экране все будет на столько мелким, что с нормальным зрением работать будет тяжело и неудобно, поэтому рекомендуемые параметры масштаба — 250%, благодаря чему иконки и шрифты имеют привычные размеры, а высокое разрешение позволяет отображать максимально качественную картинку без видимых пикселей. При масштабе 250% реальные параметры экрана будут 1383*864px.
Отсюда следует проблема, когда кто-то проверяет сайт у себя в браузере и думает, что разрешение экрана 1920*1080 на 15 дюймовом ноуте, то на самом деле при рекомендуемом масштабе 125% реальный размер экрана получается 1536*864px.
Бороться с этой проблемой не нужно, но придется ее учитывать при верстке адаптивного сайта, понятно, что сайт должен выглядеть правильно при любой ширине экрана, но какие-то граничные точки (breakpoints) возможно придется изменить, чтобы учесть, что если ширина экрана меньше 1540 или 1400 — то это уже с большой вероятностью ноутбук, а значит и высота экрана будет меньше и можно уменьшить вертикальные отступы и размеры блоков.
В общем, следующий код нужен для того, чтобы задетектить какая рабочая область браузера у проверяющего, можно проверить свое разрешение или скинуть ссылку на статью тому, у кого надо узнать разрешение экрана.
Важно учитывать, что различные панели инструментов браузера (тулбары) и даже панель з недавними загрузками отнимают высоту окна браузера, и это отобразится в вычислениях.
Пример реализации вычисления высоты и ширины окна браузера
Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.
Как узнать ширину экрана js
Чтобы узнать ширину экрана, можно воспользоваться встроенным свойством window.innerWidth — оно возвращает ширину окна в пикселях включая ширину вертикальной полосы прокрутки.
console.log(window.innerWidth); // => 1920