Определяем размер окна браузера на 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. Это позволяет не прописывать математические выражения для расчета нахождения окна от начальной точки отсчета пикселей экрана.
