Размер окна браузера
Размер сайта должен быть меньше, чем размер экрана, потому что у браузера есть рамка, полосы прокрутки и иногда другие инструменты, уменьшающие видимую область сайта.
Под какое разрешение делать сайт?
Как рассчитать ширину сайта для того, чтоб не появлялся горизонтальный скроллинг?
- Разрешение — это соотношение экранной ширины и высоты в пикселях (например, 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?
Представляю Вашему вниманию перевод небольшой заметки «How to Get the Screen, Window, and Web Page Sizes in JavaScript» автора Dmitri Pavlutin.
Для определения ориентации окна браузера (ландшафтной или портретной) можно сравнить его ширину и высоту.
Однако во всевозможных доступных размерах легко запутаться: существуют размеры экрана, окна, веб-страницы и т.д.
Что означают эти размеры и, главное, как их получить? Именно об этом я и собираюсь рассказать.
1. Экран
1.1. Размер экрана
Размер экрана — это ширина и высота всего экрана: монитора или мобильного дисплея.
Получить информацию о размере экрана можно с помощью свойства screen объекта window :
const screenWidth = window.screen.width const screenHeight = window.screen.height 1.2. Доступный размер экрана
Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.
Для получения доступного размера экрана снова обращаемся к window.screen :
const availableScreenWidth = window.screen.availWidth const availableScreenHeight = window.screen.availHeight 2. Окно
2.1. Размер внешнего окна (или внешний размер окна)
Размер внешнего окна — это ширина и высота текущего окна браузера, включая адресную строку, панель вкладок и другие панели браузера.
Получить информацию о размере внешнего окна можно с помощью свойств outerWidth и outerHeight объекта window :
const windowOuterWidth = window.outerWidth const windowOuterHeight = window.outerHeight 2.2. Внутренний размер окна (или размер внутреннего окна)
Внутренний размер окна — это ширина и высота области просмотра (вьюпорта).
Объект window предоставляет свойства innerWidth и innerHeight :
const windowInnerWidth = window.innerWidth const windowInnerHeight = window.innerHeight Если мы хотим получить внутренний размер окна без полос прокрутки, то делаем следующее:
const windowInnerWidth = document.documentElement.clientWidth const windowInnerHeight = document.documentElement.clientHeight 3. Размер веб-страницы
Размер веб-страницы — это ширина и высота отображаемого содержимого (отрендеренного контента).
Для получения размера веб-страницы используйте следующее (включает в себя внутренние отступы страницы, но не включает границы, внешние отступы и полосы прокрутки):
const pageWidth = document.documentElement.scrollWidth const pageHeight = document.documentElement.scrollHeight Если pageHeight больше, чем внутренняя высота окна, значит, присутствует вертикальная полоса прокрутки.
4. Заключение
Надеюсь, теперь Вы понимаете, как получать различные размеры.
Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.
Внешний размер окна — это размер активного окна браузера (включая поисковую строку, панель вкладок, открытые боковые панели и проч.), а внутренний размер окна — это размер области просмотра.
Наконец, размер веб-страницы — это размер контента.
Благодарю за внимание, друзья!
- Веб-разработка
- JavaScript
- Программирование
Простой и быстрый способ узнать размер окна браузера — «What’s My Browser Size?».
Этот замечательный проект стартовал 19.02.13 на кикстартере. Для запуска устройства в производство команда хотела собрать $30.000. Эту сумму собрали за 2 часа. На данный момент собрано более $2.300.000 — так сильно проект понравился сообществу. В общем-то, не удивительно. Начиная со 2 апреля 3Doodler доступен для предварительного заказа по вполне демократичной цене в $99. Страница проекта: […]
Adaptiff
Коллекция генеративных алгоритмов для создания фонов и паттернов, с дружелюбным интерфейсом.
Определяем ширину и высоту рабочей области браузера
Итак, задача такая — проверить отображение каких-то элементов на разных разрешениях экрана.
Но современная проблема в том, что сейчас большинство использует ноутбуки с высоким разрешением экрана. При масштабе в 100% и разрешением 3456*2160px на экране все будет на столько мелким, что с нормальным зрением работать будет тяжело и неудобно, поэтому рекомендуемые параметры масштаба — 250%, благодаря чему иконки и шрифты имеют привычные размеры, а высокое разрешение позволяет отображать максимально качественную картинку без видимых пикселей. При масштабе 250% реальные параметры экрана будут 1383*864px.
Отсюда следует проблема, когда кто-то проверяет сайт у себя в браузере и думает, что разрешение экрана 1920*1080 на 15 дюймовом ноуте, то на самом деле при рекомендуемом масштабе 125% реальный размер экрана получается 1536*864px.
Бороться с этой проблемой не нужно, но придется ее учитывать при верстке адаптивного сайта, понятно, что сайт должен выглядеть правильно при любой ширине экрана, но какие-то граничные точки (breakpoints) возможно придется изменить, чтобы учесть, что если ширина экрана меньше 1540 или 1400 — то это уже с большой вероятностью ноутбук, а значит и высота экрана будет меньше и можно уменьшить вертикальные отступы и размеры блоков.
В общем, следующий код нужен для того, чтобы задетектить какая рабочая область браузера у проверяющего, можно проверить свое разрешение или скинуть ссылку на статью тому, у кого надо узнать разрешение экрана.
Важно учитывать, что различные панели инструментов браузера (тулбары) и даже панель з недавними загрузками отнимают высоту окна браузера, и это отобразится в вычислениях.
Пример реализации вычисления высоты и ширины окна браузера
Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.