Размеры экрана, окна и веб-страницы в JavaScript

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

Содержание

1. Разница между размерами экрана, окна и веб-страницы
2. Получение размеров экрана, окна и веб-страницы с помощью JavaScript

Разница между размерами экрана, окна и веб-страницы

Прежде чем переходить к коду, давайте определим понятия:

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

Получение размеров экрана, окна и веб-страницы с помощью JavaScript

Вот как получить эти размеры с помощью JavaScript:

1. Размер экрана

const screenWidth = window.screen.width;
const screenHeight = window.screen.height;

console.log(`Ширина экрана: ${screenWidth} пикселей`);
console.log(`Высота экрана: ${screenHeight} пикселей`);

2. Размер окна

const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

console.log(`Ширина окна: ${windowWidth} пикселей`);
console.log(`Высота окна: ${windowHeight} пикселей`);

3. Размер веб-страницы (документа)

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

function getDocumentSize() {
  const body = document.body;
  const html = document.documentElement;

  const docWidth = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);
  const docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);

  return { width: docWidth, height: docHeight };
}

const documentSize = getDocumentSize();
console.log(`Ширина документа: ${documentSize.width} пикселей`);
console.log(`Высота документа: ${documentSize.height} пикселей`);

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

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