Плагин для отображения размеров окна браузера
С нуля напишем простой, но полезный вспомогательный плагин для отображения корректных размеров окна браузера с учетом и без учета полос прокрутки.
Подключил плагин к этой статье, справа внизу отображается результат работы плагина
Опубликовал репозиторий на 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, добавить ему класс, стили, контент и динамически вставить его в документ.
При желании плагин можно визуально настроить под себя и добавить ему дополнительную функциональность
Немного затронули тему адаптивности - на эту тему будет отдельная статья
Полезные ссылки
Использование метатега viewport