Как получить размеры экрана, окна и веб-страницы в 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. Заключение

Надеюсь, теперь Вы понимаете, как получать различные размеры.

Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.

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

Наконец, размер веб-страницы — это размер контента.

Обзор единиц измерения CSS, связанных с окном просмотра

Дата публикации: 2018-04-30

От автора: единицы измерения, связанные с окном просмотра, были введены в Спецификации CSS уровня 3: Значения и единицы измерения. Они позволяют задавать размеры элементов и размеры шрифта в процентах от общей ширины или высоты экрана пользователя (окна просмотра). Давайте рассмотрим, что мы можем сделать, используя в нашем CSS единицы измерения, о которых идет речь.

vh и vw

vh обозначает высоту окна просмотра, а vw — ширину окна просмотра. Следовательно, определение для элемента значения ширины в 50vw означает, что элемент будет иметь ширину, которая составляет 50% от размера области просмотра, и это остается неизменным при изменении размера окна просмотра.

Проценты и единицы измерения, связанные с окном просмотра

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

vmin и vmax

vmin и vmax могут показаться немного сложнее для понимания, но в конце концов все очень просто. vmin измеряется, как процент от наименьшего значения или ширины, или высоты области просмотра, а vmax — процент от наибольшего из них.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Например, окно просмотра имеет ширину 1440px и высоту 800px, если мы установим элемент шириной 50vmin, это будет 50% высоты (400px), и если вместо этого мы установим для элемента ширину 50vmax, это будет 50% от ширины (720px). Если бы у окна просмотра была ширина 800px и высота 1440px, мы получили бы противоположный результат. vmin и vmax могут использоваться для установки размера шрифта, как мы покажем ниже.

Единицы измерения, связанные с окном просмотра, для Hero-разделов

Единицы измерения, связанные с окном просмотра, отлично подходят для создания Hero-разделов, которые занимают точную часть от высоты области просмотра.

Давайте рассмотрим практический пример. Предположим, мы хотим создать 2 раздела, которые занимают всю ширину окна просмотра, и вместе занимают всю высоту окна просмотра. Во-первых, некоторая простая разметка для этих разделов:

CSS Box Sizing

Размер окна CSS

Свойство CSS box-sizing позволяет нам включать заполнение и границу в общую ширину и высоту элемента.

Без CSS окно-Изменение размера свойства

По умолчанию ширина и высота элемента вычисляется так:

Ширина + отступ + граница = фактическая ширина элемента
Высота + отступ + граница = фактическая высота элемента

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

На следующем рисунке показаны два элемента

Пример

.div1 <
width: 300px;
height: 100px;
border: 1px solid blue;
>

.div2 <
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
>

Свойство box-sizing решает эту проблему.

С помощью окна CSS-изменение размера свойства

Свойство box-sizing позволяет нам включать заполнение и границу в общую ширину и высоту элемента.

Если установить box-sizing: border-box; на элементе Padding и граница включены в ширину и высоту:

Вот такой же пример, как и выше, с box-sizing: border-box; Добавлено в оба элемента

Пример

.div1 <
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
>

.div2 <
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
>

Так как результат использования box-sizing: border-box; намного лучше, многие разработчики хотят, чтобы все элементы на своих страницах работали таким образом.

Приведенный ниже код гарантирует, что все элементы имеют размер в этом более интуитивно понятным способом. Многие браузеры уже используют box-sizing: border-box; для многих элементов формы (но не все, поэтому входные и текстовые области выглядят по-разному по ширине: 100%;).

Применение этого ко всем элементам является безопасным и мудрым:

Пример

Tip: Try to remove the box-sizing property from the style element and look what happens. Notice that the width of input, textarea, and submit button will go outside of the screen.

Умная адаптация ширины блочных элементов на чистом CSS 2.0

Верстая очередной проект (или ещё только проектируя макетную сетку) многие сталкивались с дилеммой — использовать фиксированную ширину макета или «резиновую» сетку, адаптируемую под размер окна браузера.

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

Фиксированная ширина макетной сетки

Вёрстку загоняют в горизонтальный габарит 960—980 пикселей (чтобы на большинстве устройств в большинстве разрешений всё входило), что при больших горизонтальных размерах окна выглядит как-то зябко — тонкая вертикальная полоса полезного содержимого страницы и огромные бесполезные поля неиспользуемого пространства по бокам.

«Резиновая» макетная сетка по ширине окна

Опять же при больших горизонтальных размерах окна есть другая проблема: строки текста становятся очень длинными, и читать их становится совсем не так комфортно, как хотелось бы.
Ещё одна распространённая проблема этого решения — боковые отступы при больших горизонтальных размерах окна уже не так удачно визуально согласуются с горизонтальными размерами элементов, что также не добавляет комфорта при взгляде на свёрстанный макет.

Хочу предложить нехитрый вариант решения — ограничить минимальный горизонтальный размер фиксированным значением в пикселях, а максимальный сделать относительным в процентном соотношении к ширине окна. Это очень банально решается простыми средствами ещё 2 версии спецификации CSS.

Update: Хочу оговориться, что речь не идёт о классическом эффекте резины и об адаптации под абсолютно все разрешения, скорее лишь про некий разумный диапазон разрешений, под который проектируется макет. В примерах ниже — это классический десктопный диапазон разрешений с горизонтальным габаритом разрешения от 1024 пикселей.

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

Создаём контейнер макета:

Оформляем его незатейливым кодом стиля:

Однако этого решения кому-то может показаться мало в силу того что при очень больших горизонтальных размерах окна опять проявляются проблемы с длиной строк. Это решается настолько же простым дополнительным приёмом: создание дополнительного внешнего контейнера внутри уже описанного и ограничение его максимальной ширины фиксированным значением (мне субъективно кажется, что лучше всего подходят значния в диапазоне 1400—1600 пикселей). Опять же используем лишь средства CSS 2.0. Такое решение вместо предложенного в первом комментарии простого добавления ширины в процентах для исходного контейнера будет работать ещё и в IE, который вплоть до 9 версии не понимает одновременного указания значений.

И немного меняем CSS:

Как видите — решение предельно просто и достаточно универсально, может применяться для любых блочных элементов.

Свойства Min и Max width/height в CSS

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

В этой статье мы познакомимся с CSS-свойствами максимума и минимума для ширины и высоты, а также детально рассмотрим каждое из них и сценарии их использования.

Свойства ширины

Начать обсуждение хотелось бы со свойств, связанных с шириной. У нас есть min-width и max-width, и каждое из них крайне важно и полезно в определённых ситуациях.

Минимальная ширина (min-width)

Своство min-width предназначено для предотвращения уменьшения ширины элемента ниже заданного значения. Значением по умолчанию является auto , которое может доходить до 0 .

Чтобы продемонстрировать его, давайте рассмотрим базовый пример:

Есть кнопка с текстом, размер которого может меняться от одного до нескольких слов. Чтобы быть уверенным, что эта кнопка будет иметь минимально допустимую ширину, даже если внутри будет только одно слово, нужно использовать min-width . Минимальную ширину задали равной 100px, поэтому даже если у кнопки будет очень короткое содержимое, как, например, только слово «Done» или только иконка, она всё равно будет достаточно большой, чтобы оставаться заметной. Это особенно важно, когда вы работаете с сайтами, переведёнными на разные языки

Рассмотрим пример с арабским языком в Twitter:

В примере выше кнопка содержит слово “تم”, что на арабском значит «Готово». Из-за короткого содержимого ширина и самой кнопки стала слишком мала, поэтому я обозначил минимум, задав ей свойство min-width , что можно увидеть на изображении справа (в секции «After»).

Минимальная ширина и Padding

Хотя свойство min-width и допускает увеличение ширины кнопки при увеличении размера её содержимого, по бокам всё же следует задавать padding , чтобы гарантировать внутренний отступ от её границ. Разница приведена на рисунке ниже

Максимальная ширина (max-width)

Свойство max-width предназначено для предотвращения увеличения ширины элемента выше заданного значения. Значение по умолчанию – none .

Распространённый и простой пример использования max-width заключается в его применении к изображениям. Рассмотрим пример ниже:

Если к изображению применить свойство max-width: 100% оно останется в границах родительского элемента, даже при том, что его изначальный размер больше. Если же изображение изначально меньше родителя, данное свойство никак на него не повлияет.

Использование min-width и max-width

Если к элементу применяются оба свойства, какое из них переопределит значение другого? Другими словами, у какого свойства приоритет выше?

Если значение min-width больше, чем max-width , оно будет принято за ширину элемента. Рассмотрим следующий пример:

Исходное значение width равно 100px и в дополнение к этому заданы значения свойств min-width и max-width . В результате ширина данного элемента не будет превышать 50% ширины родительского блока

Свойства высоты

В дополнение к свойствам минимальной и максимальной ширины, есть такие же свойства для высоты

Минимальная высота (min-height)

Свойство min-height предназначено для предотвращения уменьшения высоты элемента ниже заданного значения. Значением по умолчанию является auto , которое может доходить до 0 .

Чтобы продемонстрировать его, давайте рассмотрим простой пример.

У нас есть секция с текстовым содержимым. Необходимо, чтобы она смотрелась красиво как с большим, так и с малым количеством текста

Минимальная высота задана 100px, а содержимое центрировано с помощью flexbox по горизонтали и вертикали. Что произойдёт, если содержимого станет больше? Например, будет целый абзац

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

Максимальная высота (max-height)

Свойство max-height предназначено для предотвращения увеличения высоты элемента больше заданного значения. Значением по умолчанию является none .

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

Примеры использования свойств

Рассмотрим некоторые распространённые и редкие сценарии использования свойств min-width , min-height , max-width , и max-height

Список тегов

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

Обладая такой гибкостью, тег будет хорошо выглядеть независимо от того, насколько коротким является его содержимое. Но что случится, если автор задал очень большое имя тега, а используемая им CMS (content management system) не имеет ограничений по количеству символов в теге? В этой ситуации также можно использовать max-width

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

Кнопки

Существуют разные сценарии использования свойств минимума и максимума для кнопок, поскольку и самих вариантов компонентов кнопок также немало. Рассмотрим следующий макет:

Обратите внимание, что ширина кнопки «Get» слишком мала. Если по какой-то причине у кнопки еще и не будет текста (а только иконка), всё может стать еще хуже. В этом случае установка минимальной ширины очень важна

Обнуление минимальной ширины для Flexbox

Значение по умолчанию у свойства min-width равняется auto, что вычисляется как ноль. Когда элемент является flex-элементом, значение min-width не становится нулём. Минимальный размер flex-элемента равняется размеру его содержимого.

Согласно CSSWG:
По умолчанию, flex-элементы не становятся меньше минимального размера, необходимого их содержимому (длина самого длинного слова или элемента с фиксированным размером). Чтобы изменить это, задайте свойство min-width или min-height .

Рассмотрим следующий пример:

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

Поскольку заголовок является флекс-элементом, решение состоит в том, чтобы сбросить значение min-width и заставить его стать нулём

Вот как это должно выглядеть после исправления:

Из описания в CSSWG следует, что установка свойства overflow в значение, отличное от visible , может привести к тому, что значение min-width будет вычислено как ноль, что также решает нашу проблему без необходимости явно задавать min-width: 0 .

Обнуление минимальной высоты для Flexbox

Хотя это менее распространённая проблема по сравнению с min-width, она всё же может встретиться. Проблема связана с flex-элементами, которые не могут быть короче своего содержимого. В результате значение min-height устанавливается равным размеру контента.

Рассмотрим следующий пример:

Текст, окрашенный в красный цвет, должен быть обрезан границами контейнера. Но поскольку данный элемент является flex-элементом, его min-height равняется высоте содержимого. Чтобы предотвратить это, мы должны сбросить значение минимальной высоты. Давайте посмотрим на HTML и CSS код:

Добавление элементу min-height: 0 сбросит значение свойства и оно начнёт работать так, как ожидается
Демо

Одновременное использование min-width и max-width

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

Поскольку ширина определена в пикселях, нет уверенности, что описанное выше будет работать для мобильных. Чтобы решить эту проблему, мы можем использовать проценты вместо пикселей для свойств минимума и максимума. Рассмотрим пример ниже:

Я добавил следующий CSS-код для изображений:

Контейнер для страницы

Один из наиболее полезных сценариев применения свойства max-width – для обёртки (или контейнера) страницы. Задав странице максимальную ширину, мы можем быть уверены, что пользователям будет удобно просматривать и читать содержимое

Ниже приведён пример центрированной обёртки, имеющей padding слева и справа

Максимальная ширина и единица измерения «ch»

Единица измерения ch равняется ширине символа 0 (ноль), используемого в шрифте текущего элемента. Используя её в свойстве max-width, мы можем регулировать количество символов в строке. Согласно этой статье с сайта Smashing Magazine, рекомендованная длина строки от 45 до 75 символов.

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

Анимирование элемента с неизвестной высотой

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

Рассмотрим следующий пример:

Когда нажимается кнопка меню, само меню должно плавно появляться сверху вниз. Сделать это без JavaScript невозможно, если только у элемента не задана фиксированная высота (а это делать не рекомендуется). Тем не менее, это возможно с помощью max-height. Идея заключается в добавлении элементу очень большой высоты, например, max-height: 20rem , которая, не будет достигнута, после чего мы можем задать шаги анимации от max-height: 0 , до max-height: 20rem

Нажмите на гамбургера, чтобы увидеть анимацию в действии

Минимальная высота для верхней секции (hero)

Как видите, я не люблю задавать элементам фиксированную высоту. Я чувствую, что поступая так, иду против концепции, согласно которой компоненты в вебе должны быть гибкими. Добавление минимальной высоты для первой секции сайта (секция «hero») полезно в ситуациях, когда добавляется очень большое содержимое (такое бывает).

Рассмотрим следующий пример, где у нас есть секция «hero» с фиксировано заданной высотой. Вроде смотрится хорошо.

Однако, когда содержимое увеличивается, оно переполняет контейнер и выходит за рамки обёртки секции. Это плохо.

Чтобы заранее избежать этой проблемы, мы можем вместо height добавить min-height . Мы поступаем именно так, по крайней мере, для того, чтобы очистить нашу совесть. Даже при том, что это может быть причиной весьма странного отображения страницы, я считаю, что подобные ситуации должны быть предотвращены в первую очередь, в системе управления контентом (CMS). После этого проблема исправлена и страница выглядит хорошо:

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

Если задавать не фиксированную высоту, а лишь ограничивать минимальную с помощью min-height , описанная выше проблема не произойдёт вовсе.

Модальное окно

Для компонента модального окна необходимо задавать и минимальную и максимальную ширину, следовательно, это будет работать на экранах любых размеров (от мобильных до десктопных). Это напоминает об интересной статье на CSS-Tricks, в которой рассказывается, что делать в этом случае.

Что касается меня, я предпочитаю второй способ, так как мне нужно только определить max-width: 600px . Модальное окно – это элемент div , поэтому у него уже ширина задана = 100% от родителя, правильно?

Рассмотрим приведённый ниже пример с модальным окном. Обратите внимание, как ширина становится равной 100% от ширины родителя, если в области просмотра недостаточно свободного места

Минимальная высота и липкий footer

Когда содержимое страницы недостаточно большое, футер ожидаемо не прилипнет к нижней части. Давайте рассмотрим пример, который лучше продемонстрирует это:

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

Сначала я сделал элемент body flex-контейнером, после чего установил ему минимальную высоту 100% от области просмотра.

Рекомендую ознакомиться с этой статьёй о липких футерах.
Демо

Пропорциональные размеры элемента и max-width/height

Чтобы сделать пропорциональный контейнер, который масштабируется в зависимости от размера области просмотра, однажды был представлен хак с использованием padding. Сейчас мы можем имитировать похожее поведение, комбинируя единицы измерения области просмотра и максимальную ширину/высоту.

На основе материалов статьи Miriam Suzanne, я хочу объяснить, как это работает.

У нас есть изображение с размерами 644 x 1000 пикселей. Нам нужно сделать следующее:

• Соотношение сторон: height / width (высоту поделить на ширину)
• Ширина контейнера: может быть фиксированной или динамической (100%)
• Задайте height , равный 100% ширины области просмотра, умноженной на соотношение сторон
• Задайте max-height , равный ширине контейнера, умноженной на соотношение сторон
• Задайте max-width , равное ширине контейнера

CSS

HTML/Body с высотой 100%

Что делать, если нам нужно, чтобы элемент body занимал 100% высоты области просмотра? Это распространённый вопрос как в веб-сообществе в целом, так и на сайте StackOverflow в частности.

Сначала нужно задать height: 100% элементу html . Это будет гарантировать, что корневой элемент имеет высоту 100%. Затем добавляем min-height для элемента body . Причина, по которой используется именно min-height в том, что это свойство позволяет высоте элемента body быть динамичной, и подстраиваться, каким бы большим не было содержимое

Примечания

Минимальная ширина и блочные элементы

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

CSS функции сравнения

Реально ли сделать что-то подобное? max-width: calc(max(500px, 100% — 80px)) или может вот такое max-width: max(500px, calc(100% — 80px)))

Желаемое поведение заключается в том, чтобы удерживать ширину элемента не более 500px. Если ширина области видимости недостаточна, чтобы вместить элемент, то ширина должна быть 100% – 80px .

Что касается решения, опубликованного в ответ на вопрос, я попробовал применить его и он работает в Chrome 79 и Safari 13.0.3. Хоть это и выходит за рамки статьи, я всё же приведу здесь решение: