Screen width and screen height javascript

Объект Screen в JavaScript – информация об экране

Объект screen предназначен для получения информации об экране, на котором отображается текущее окно браузера.

Обратиться к нему можно как к свойству объекта window :

const screenObj = window.screen;

Также к объекту screen можно получить доступ без указания window , т.е. так:

С помощью объекта screen мы можем получить следующую информацию об экране:

• width – ширина экрана в пикселях;
• height – высота экрана в пикселях;
• availWidth – доступная ширина экрана;
• availHeight – доступная высота экрана (например, в Windows, эта высота равна общей высоте из которой нужно вычесть высоту панели задач);
• availLeft – x-координата первого доступного пикселя;
• availTop – y-координата первого доступного пикселя;
• colorDepth – глубину цвета в битах;
• pixelDepth – глубину цвета на пиксель экрана в битах;
• orientation – ориентация экрана.

• type – тип ориентации (одно из следующих значений: « portrait-primary », « portrait-secondary », « landscape-primary » или « landscape-secondary »);
• angle — угол ориентации документа.

При изменении ориентации экрана возникает событие change .

Назначить обработчик для этого события можно следующим образом:

// посредством метода addEventListener screen.orientation.addEventListener('change', function(e) { . }) // через свойство onchange screen.orientation.onchange = function(e) { . }

Пример, в котором выведем в документ информацию об экране

Начнём разработку примера с создания разметки.

Выполним её в виде маркированного списка:

• Ширина экрана:
• Высота экрана:
• Доступная ширина экрана:
• Доступная высота экрана:
• x-координата первого доступного пикселя:
• y-координата первого доступного пикселя:
• Качество цветопередачи:
• Глубина цвета на пиксель экрана:
• Тип ориентации экрана:
• Угол ориентации документа:

Напишем код на JavaScript для получения данных об экране и вывода их в соответствующие элементы span .

// получим значения const screenWidth = screen.width; const screenHeight = screen.height; const screenAvailWidth = screen.availWidth; const screenAvailHeight = screen.availHeight; const screenAvailLeft = screen.availLeft; const screenAvailTop = screen.availTop; const screenColorDepth = screen.colorDepth; const screenPixelDepth = screen.pixelDepth; const screenOrientationType = screen.orientation.type; const screenOrientationAngle = screen.orientation.angle; // найдем элементы и установим им в качестве контента полученные значения document.querySelector('#screen-width').textContent = screenWidth; document.querySelector('#screen-height').textContent = screenHeight; document.querySelector('#screen-avail-width').textContent = screenAvailWidth; document.querySelector('#screen-avail-height').textContent = screenAvailHeight; document.querySelector('#screen-avail-left').textContent = screenAvailLeft; document.querySelector('#screen-avail-top').textContent = screenAvailTop; document.querySelector('#screen-color-depth').textContent = screenColorDepth; document.querySelector('#screen-pixel-depth').textContent = screenPixelDepth; document.querySelector('#screen-orientation-type').textContent = screenOrientationType; document.querySelector('#screen-orientation-angle').textContent = screenOrientationAngle;

В этом скрипте получение элемента по id осуществляем с помощью метода querySelector , а установку ему текстового содержимого посредством свойства textContent .

Пример, в котором цвет фона body будет зависеть от ориентации экрана

Создадим пример, в котором назначим обработчик событию change для объекта screen.orientation . Данное событие будет отслеживать изменение ориентации, и запускать обработчик каждый раз когда оно будет происходить. В качестве обработчика будет выступать функция onChange . Эта функция в зависимости от типа ориентации экрана будет менять цвет фона элемента body и устанавливать в качестве его содержимого значение свойства screen.orientation.type :

// функция onchange function onChange() { switch (screen.orientation.type) { case ('portrait-primary'): case ('portrait-secondary'): // установим цвет фона body равным #f44336, если тип ориентации экрана portrait-primary или portrait-secondary document.body.style.backgroundColor = '#f44336'; break; case ('landscape-primary'): case ('landscape-secondary'): // установим цвет фона body равным #4caf50, если тип ориентации экрана landscape-primary или landscape-secondary document.body.style.backgroundColor = '#4caf50'; break; } // установим в качестве контента body значение свойства screen.orientation.type document.body.textContent = screen.orientation.type; } // вызовем функцию onChange onChange(); // назначим обработчик onChange событию change для screen.orientation screen.orientation.addEventListener('change', onChange);

Отображение страницы на экране смартфона, который имеет ориентацию landscape:

Отображение информации об screen.orientation.type на экране смартфона с ориентацией portrait:

Источник

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

Представляю Вашему вниманию перевод небольшой заметки «How to Get the Screen, Window, and Web Page Sizes in JavaScript» автора Dmitri Pavlutin.

Для определения ориентации окна браузера (ландшафтной или портретной) можно сравнить его ширину и высоту.

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

Что означают эти размеры и, главное, как их получить? Именно об этом я и собираюсь рассказать.

1. Экран

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

Размер экрана — это ширина и высота всего экрана: монитора или мобильного дисплея.

Получить информацию о размере экрана можно с помощью свойства screen объекта window :

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

1.2. Доступный размер экрана

Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.

Для получения доступного размера экрана снова обращаемся к window.screen :

const availableScreenWidth = window.screen.availWidth const availableScreenHeight = window.screen.availHeight 

2. Окно

2.1. Размер внешнего окна (или внешний размер окна)

Размер внешнего окна — это ширина и высота текущего окна браузера, включая адресную строку, панель вкладок и другие панели браузера.

Получить информацию о размере внешнего окна можно с помощью свойств outerWidth и outerHeight объекта window :

const windowOuterWidth = window.outerWidth const windowOuterHeight = window.outerHeight 

2.2. Внутренний размер окна (или размер внутреннего окна)

Внутренний размер окна — это ширина и высота области просмотра (вьюпорта).

Объект window предоставляет свойства innerWidth и innerHeight :

const windowInnerWidth = window.innerWidth const windowInnerHeight = window.innerHeight 

Если мы хотим получить внутренний размер окна без полос прокрутки, то делаем следующее:

const windowInnerWidth = document.documentElement.clientWidth const windowInnerHeight = document.documentElement.clientHeight 

3. Размер веб-страницы

Размер веб-страницы — это ширина и высота отображаемого содержимого (отрендеренного контента).

Для получения размера веб-страницы используйте следующее (включает в себя внутренние отступы страницы, но не включает границы, внешние отступы и полосы прокрутки):

const pageWidth = document.documentElement.scrollWidth const pageHeight = document.documentElement.scrollHeight 

Если pageHeight больше, чем внутренняя высота окна, значит, присутствует вертикальная полоса прокрутки.

4. Заключение

Надеюсь, теперь Вы понимаете, как получать различные размеры.

Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.

Внешний размер окна — это размер активного окна браузера (включая поисковую строку, панель вкладок, открытые боковые панели и проч.), а внутренний размер окна — это размер области просмотра.

Наконец, размер веб-страницы — это размер контента.

Благодарю за внимание, друзья!

Источник

JavaScript Window Screen

The window.screen object contains information about the user’s screen.

Window Screen

The window.screen object can be written without the window prefix.

• screen.width
• screen.height
• screen.availWidth
• screen.availHeight
• screen.colorDepth
• screen.pixelDepth

Window Screen Width

The screen.width property returns the width of the visitor’s screen in pixels.

Example

Display the width of the screen in pixels:

Window Screen Height

The screen.height property returns the height of the visitor’s screen in pixels.

Example

Display the height of the screen in pixels:

Window Screen Available Width

The screen.availWidth property returns the width of the visitor’s screen, in pixels, minus interface features like the Windows Taskbar.

Example

Display the available width of the screen in pixels:

Window Screen Available Height

The screen.availHeight property returns the height of the visitor’s screen, in pixels, minus interface features like the Windows Taskbar.

Example

Display the available height of the screen in pixels:

Window Screen Color Depth

The screen.colorDepth property returns the number of bits used to display one color.

All modern computers use 24 bit or 32 bit hardware for color resolution:

Older computers used 16 bits: 65,536 different «High Colors» resolution.

Very old computers, and old cell phones used 8 bits: 256 different «VGA colors».

Example

Display the color depth of the screen in bits:

The #rrggbb (rgb) values used in HTML represents «True Colors» (16,777,216 different colors)

Window Screen Pixel Depth

The screen.pixelDepth property returns the pixel depth of the screen.

Example

Display the pixel depth of the screen in bits:

For modern computers, Color Depth and Pixel Depth are equal.

Источник

Как определить размер экрана пользователя с помощью JavaScript

Узнайте, как определить размеры экрана пользователя с помощью JavaScript для адаптивного дизайна и улучшения пользовательского опыта.

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

Получение размеров экрана с помощью window.innerWidth и window.innerHeight

Для того, чтобы определить размеры экрана пользователя, можно воспользоваться свойствами window.innerWidth и window.innerHeight . Они представляют собой ширину и высоту окна браузера соответственно (в пикселях), включая полосу прокрутки (если она есть).

const width = window.innerWidth; const height = window.innerHeight; console.log("Ширина экрана: " + width + "px"); console.log("Высота экрана: " + height + "px");

🚀 Этот способ является наиболее простым и универсальным, так как он работает во всех современных браузерах.

Получение размеров экрана с помощью screen.width и screen.height

Также можно использовать свойства screen.width и screen.height для определения размеров экрана. Они представляют собой ширину и высоту экрана пользователя (в пикселях), но не учитывают полосу прокрутки.

const screenWidth = screen.width; const screenHeight = screen.height; console.log("Ширина экрана: " + screenWidth + "px"); console.log("Высота экрана: " + screenHeight + "px");

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

Заключение

Теперь вы знаете, как определить размеры экрана пользователя с помощью JavaScript. В зависимости от конкретной задачи можно использовать разные методы: window.innerWidth и window.innerHeight для определения размеров окна браузера или screen.width и screen.height для получения размеров всего экрана. Удачи в вашей веб-разработке! 😉

Источник