Get Screen Resolution Using JavaScript

Как получить размеры экрана, окна и веб-страницы в 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, jQuery)

Для чего нужно определять размер окна браузера, для тех случаев когда нам необходимо сделать например резиновый дизайн или чтобы блок целиком закрывал всю область окна браузера
на jQuery это делается так:

doc_w = $(document).width();
doc_h = $(document).height();
//или
win_w = $(window).width();
win_h = $(window).height();

но если же надо знать размеры каждый раз при ресайзе окна то код будет следующим:
$( window ).resize(function() <$( "body" ).prepend( "

» );>);

На JavaScript код, определения разрешения экрана

scr_w=screen.width;
scr_h=screen.height;

На JavaScript определяем размер клиентской части окна браузера

client_w=document.body.clientWidth;
client_h=document.body.clientHeight;

Кроссбраузерное получение размеров окна на JS

function getPageSize() var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
> else if (document.body.scrollHeight > document.body.offsetHeight) < // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
> else if (document.documentElement && document.documentElement.scrollHeight > document.documentElement.offsetHeight) < // Explorer 6 strict mode
xScroll = document.documentElement.scrollWidth;
yScroll = document.documentElement.scrollHeight;
> else < // Explorer Mac. would also work in Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
>

var windowWidth, windowHeight;
if (self.innerHeight) < // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
> else if (document.documentElement && document.documentElement.clientHeight) < // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
> else if (document.body) < // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
>

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight)pageHeight = windowHeight;
> else pageHeight = yScroll;
>

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth)pageWidth = windowWidth;
> else pageWidth = xScroll;
>

Источник

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

Вы можете просто использовать свойства width и height объекта window.screen , чтобы получить разрешение экрана (т.е. ширину и высоту экрана).

В следующем примере будет отображаться разрешение вашего экрана при нажатии кнопки.

       function getResolution() Получить разрешение  

Чтобы определить собственное разрешение дисплея мобильного устройства (например, дисплея Retina), вам необходимо умножить ширину и высоту экрана на соотношение пикселей устройства, например window.screen.width * window.devicePixelRatio и window.screen.height * window.devicePixelRatio .

Соотношение пикселей устройства сообщает браузеру, сколько фактических пикселей экрана устройства следует использовать для рисования одного пикселя CSS. Вы также можете использовать следующий пример, чтобы найти разрешения экрана настольных компьютеров. Экраны настольных компьютеров обычно имеют соотношение пикселей устройства 1:

       function getResolution() Получить разрешение  

Читайте также

Похожие примеры:

Источник

Как определить размер экрана пользователя с помощью 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 для получения размеров всего экрана. Удачи в вашей веб-разработке! 😉

Источник