Определяем размер окна браузера на JavaScript

Javascript

За содержание информации об экране устройства отвечает объект DOM Screen. Он является свойством объекта Window. Однако обращение к Screen осуществляется без написания Window: Window.Screen (можно так), Screen (лучше так). Данный объект чаще всего используется для программирования адаптивности вэб-приложений.

Свойства Screen

У объекта есть несколько свойств для определения длины и высоты экрана:

  • width (int) — содержит полную ширину экрана вместе с панелью задач.
  • height (int) — содержит полную высоту экрана вместе с панелью задач.
  • pixelDepth (int) — указывает сколько битов содержится в одном пикселе крана.
  • colorDepth (int) — указывает сколько бит содержится в одном цвете на один пиксель.
  • availWidth (int) — указывает ширину экрана без панели задач.
  • availHeight (int) — указывает высоту экрана без панели задач.

Это все свойства, которые содержатся в объекте Screen. Методами данный объект не обладает.

Пример:

// У пользователя мобильное устройство с разрешением 400х200 пикселей
alert(Screen.width+» px»); // 400 px
alert(Screen.height+» px»); // 200 px

//У пользователя монитор с разрешением 1360х720 пикселей
alert(Screen.availWidth); //1360 (Панель задач внизу)
alert(Screen.availHeight); // 680 (отнимем 40 пикселей, которые занимает панель задач внизу экрана)

Особенности объекта

Все современные и старые браузеры поддерживают данный объект. Для того, чтобы определить расположение уменьшенного окна браузера относительно экрана, следует воспользоваться свойствами объекта Window: screenX, screenY. Это позволяет не прописывать математические выражения для расчета нахождения окна от начальной точки отсчета пикселей экрана.

Оцените статью
Образовательный портал WELCOME4U.RU
Добавить комментарий

Adblock
detector