Плагин для отображения размеров окна браузера

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

1

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

Опубликовал репозиторий на GitHub

Если не знакомы с GitHub, можно почитать отдельную статью - Установка GitHub Desktop и его базовое использование

Зачем писать этот плагин?

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

Во-первых, это хорошая практика по JavaScript - писать простые, но полезные для себя инструменты

Во-вторых, в некоторых браузерах, особенно в мобильных, нет возможности устанавливать расширения

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

Этот плагин будет помогать при разработке и тестировании адаптивной верстки

При адаптивной верстке необходимо постоянно следить за размерами окна браузера в зависимости от контрольных точек @media запросов

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

Полоса прокрутки бывает невидимой, как на мобильных устройствах - она никак не влияет на контент. Но в браузерах на компьютере или ноутбуке полоса прокрутки занимает часть окна. Это нужно учитывать при адаптивной вёрстке

@media запросы основаны на полной ширине окна браузера, включая полосы прокрутки.

Простой пример

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px;
}
.content {
  height: auto;
}
@media (max-width: 1199.98px) {
  .container {
    background: #00f;
  }
}

@media запрос @media (max-width: 1199.98px) взят из Bootstrap. В примере выше, если ширина меньше 1200px, то .container меняет цвет фона на синий

@media запрос срабатывает на полную ширину окна, и пока нет полос прокрутки ширина окна и ширина контента совпадают

Но такое на практике встречается редко. Обычно контентная часть намного больше. Для примера просто назначим высоту .content больше, чем высота окна браузера

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px;
}
.content {
  height: 4000px;
}
@media (max-width: 1199.98px) {
  .container {
    background: #00f;
  }
}

Теперь появилась полоса прокрутки. @media запрос сработает как и раньше при полной ширине окна браузера, включая ширину полосы прокрутки, но теперь полоса прокрутки отнимает место у контентной части. При полной ширине окна 1200px, контенту остается около 1183px.

Предположим, в шапке макета много элементов, которые мы хотим при адаптивной верстке плотно уместить в 1200px. Ставим @media (max-width: 1199.98px), настраиваем ширину браузера на 1200px, но элементы не умещаются из-за того, что полоса прокрутки отняла часть ширины, что на первый взгляд не совсем очевидно

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

Подробнее про адаптивную верстку будет отдельная статья



Создаем файл плагина и подключаем

Создадим файл wSizes.js в папке с проектом и сразу подключим его в HTML файле перед закрывающим тегом </body>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title>wSizes</title>
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css"/>
    <link rel="stylesheet" href="css/main.css"/>
  </head>
  <body>
    <script src="js/wSizes.js"></script> <!-- подключаем плагин -->
  </body>
</html>

После разработки и тестирования адаптивной верстки отключаем и удаляем плагин из проекта



Пишем JavaScript код

В результате, созданный файл wSizes.js будет содержать следующий код (ниже рассмотрим код чуть подробнее)

Код с комментариями

window.onload = () => { // Страница загружена включая изображение, стили и тд
  const wSizes = () => { // Объявляем основную функцию wSizes

    const meta = document.createElement('meta') // создаем элемент meta
    meta.setAttribute('name', 'viewport') // добавляем элементу meta атрибут name="viewport"
    meta.setAttribute('content', 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"') // добавляем элементу meta атрибут для корректной работы плагина на мобильных устройствах
    document.getElementsByTagName('head')[0].append(meta); // добавляем созданный элемент meta перед закрывающим тегом </head>

    const wSize = document.createElement('div') // создаем элемент wSize
    wSize.className = 'w-size' // добавляем класс w-size
    wSize.style.cssText = `
      padding: 5px;
      background: #000;
      opacity: .5;
      position: fixed;
      right: 0;
      bottom: 0;
      z-index: 999999;
      color: #fff;
      font-size: 12px;
      border-radius: 3px;
    ` // добавляем инлайн стили
    document.body.append(wSize) // добавляем созданный элемент meta перед закрывающим тегом </body>

    const wResize = () => { // объявляем функцию wResize
      windowWidth = window.innerWidth // узнаем ширину окна c полосой прокрутки
      windowHeight = window.innerHeight // узнаем высоту окна c полосой прокрутки
      contentWidth = document.documentElement.clientWidth // узнаем ширину контентной части без полосы прокрутки
      contentHeight = document.documentElement.clientHeight // узнаем высоту контентной части без полосы прокрутки
      wSize.innerHTML = `Window Width: ${windowWidth}px<br>
        Window Height: ${windowHeight}px<br>
        Content Width: ${contentWidth}px<br>
        Content Height: ${contentHeight}px` // вставляем значения в элемент wSize
    }
    wResize() // вызываем функцию wResize
    window.addEventListener('resize', wResize) // вызывем функцию wResize при изменении размеров окна браузера
  }

  wSizes() // Вызываем основную функцию wSizes
}


Рассмотрим код пошагово

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

window.onload = () => { // Страница загружена включая изображение, стили и тд

}

Объявляем основную функцию wSizes и вызываем ее, чтобы сразу видеть результат

window.onload = () => {

  const wSizes = () => { // Объявляем основную функцию wSizes

  }

  wSizes() // Вызываем основную функцию wSizes
}

Создаем элемент meta, который будет предотвращать масштабирование на мобильных устройствах для корректной работы плагина. Устанавливаем ему необходимые атрибуты. Вставляем его перед закрывающим тегом </head>

window.onload = () => {

  const wSizes = () => {
    const meta = document.createElement('meta') // создаем элемент meta
    meta.setAttribute('name', 'viewport') // добавляем элементу meta атрибут name="viewport"
    meta.setAttribute('content', 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"') // добавляем элементу meta атрибут для корректной работы плагина на мобильных устройствах
    document.getElementsByTagName('head')[0].append(meta); // добавляем созданный элемент meta перед закрывающим тегом </head>
  }

  wSizes()
}

Создаем элемент wSize, который будет отвечать за отображение размеров. Добавляем ему класс w-size. Назначаем инлайн стили и вставляем элемент перед закрывающим тегом </body>

window.onload = () => {

  const wSizes = () => {
    const meta = document.createElement('meta')
    meta.setAttribute('name', 'viewport')
    meta.setAttribute('content', 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"')
    document.getElementsByTagName('head')[0].append(meta);

    const wSize = document.createElement('div') // создаем элемент wSize
    wSize.className = 'w-size' // добавляем класс w-size
    wSize.style.cssText = `
      padding: 5px;
      background: #000;
      opacity: .5;
      position: fixed;
      right: 0;
      bottom: 0;
      z-index: 999999;
      color: #fff;
      font-size: 12px;
      border-radius: 3px;
    ` // добавляем инлайн стили
    document.body.append(wSize) // добавляем созданный элемент meta перед закрывающим тегом </body>
  }

  wSizes()
}

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

Window Width - полная ширина окна, включая ширину полосы прокрутки

Window Height - полная высота окна, включая высоту полосы прокрутки

Content Width - ширина отображаемого контента, не включая ширину полосы прокрутки

Content Height - высота отображаемого контента, не включая высоту полосы прокрутки

window.onload = () => {

  const wSizes = () => {
    const meta = document.createElement('meta')
    meta.setAttribute('name', 'viewport')
    meta.setAttribute('content', 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no"')
    document.getElementsByTagName('head')[0].append(meta);

    const wSize = document.createElement('div')
    wSize.className = 'w-size'
    wSize.style.cssText = `
      padding: 5px;
      background: #000;
      opacity: .5;
      position: fixed;
      right: 0;
      bottom: 0;
      z-index: 999999;
      color: #fff;
      font-size: 12px;
      border-radius: 3px;
    `
    document.body.append(wSize)

    const wResize = () => { // объявляем функцию wResize
      windowWidth = window.innerWidth // узнаем ширину окна c полосой прокрутки
      windowHeight = window.innerHeight // узнаем высоту окна c полосой прокрутки
      contentWidth = document.documentElement.clientWidth // узнаем ширину контентной части без полосы прокрутки
      contentHeight = document.documentElement.clientHeight // узнаем высоту контентной части без полосы прокрутки
      wSize.innerHTML = `Window Width: ${windowWidth}px<br>
        Window Height: ${windowHeight}px<br>
        Content Width: ${contentWidth}px<br>
        Content Height: ${contentHeight}px` // вставляем значения в элемент wSize
    }
    wResize() // вызываем функцию wResize
    window.addEventListener('resize', wResize) // вызывем функцию wResize при изменении размеров окна браузера
  }

  wSizes()
}

Плагин готов



Итоги

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

Посмотрели как создать элемент через JavaScript, добавить ему класс, стили, контент и динамически вставить его в документ.

При желании плагин можно визуально настроить под себя и добавить ему дополнительную функциональность

Немного затронули тему адаптивности - на эту тему будет отдельная статья



Полезные ссылки

Стрелочные функции

.setAttribute()

Использование метатега viewport

style.cssText

Создание, добавление, удаление элементов

innerHTML

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