Html определить размер экрана

Window: innerWidth property

The read-only Window property innerWidth returns the interior width of the window in pixels. This includes the width of the vertical scroll bar, if one is present.

More precisely, innerWidth returns the width of the window’s layout viewport. The interior height of the window—the height of the layout viewport—can be obtained from the innerHeight property.

Value

An integer value indicating the width of the window’s layout viewport in pixels. This property is read-only, and has no default value.

To change the window’s width, use one of the Window methods for resizing windows, such as resizeBy() or resizeTo() .

Usage notes

If you need to obtain the width of the window minus the scrollbar and borders, use the root element’s clientWidth property instead.

The innerWidth property is available on any window or object that behaves like a window, such as a frame or tab.

Examples

// This will log the width of the viewport console.log(window.innerWidth); // This will log the width of the frame viewport within a frameset console.log(self.innerWidth); // This will log the width of the viewport of the closest frameset console.log(parent.innerWidth); // This will log the width of the viewport of the outermost frameset console.log(top.innerWidth); 

Demo

HTML

p>Resize the browser window to fire the code>resizecode> event.p> p>Window height: span id="height">span>p> p>Window width: span id="width">span>p> 

JavaScript

const heightOutput = document.querySelector("#height"); const widthOutput = document.querySelector("#width"); function updateSize()  heightOutput.textContent = window.innerHeight; widthOutput.textContent = window.innerWidth; > updateSize(); window.addEventListener("resize", updateSize); 

Result

Specifications

Источник

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

Источник

Определяем ширину/высоту экрана или окна браузера с помощью JS и на jQuery

При разработке интерфейсов частенько приходиться пользоваться JavaScript`ом. Раньше считалось, что использовть любые скрипты, которые исполняются на стороне пользователя – плохо и использование JS считалось «дурным тоном».

Времена изменились и разработка интерфейса зачастую делается фреймворками основанными на JS.

Где может пригодиться?

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

На JS

Определение ширины или высоты монитора

Это самый простой способ, которые работает во всех браузерах и на всех устройствах. Если у Вас не подключено никаких сторонних библиотек, которые помогли бы сделать тоже самое, то этот вариант единственный.

Все же остается вероятность того, что пользователь собственноручно отключить обработку JS в браузере. В современном мире шансы равны 0,00001%.

В JS, чтобы определить размеры экрана, нужно использовать:

screen.width // Ширина экрана screen.height // Высота экрана

Ниже я привел работающий пример как можно узнать размеры экрана на JS:

Определение ширины и высоты окна браузера

Если нужно позиционировать любые элементы на странице, то более правильным решением будет использовать не размеры экрана, а размеры окна браузера. В JS это делается так:

window.innerWidth // Ширина браузера window.innerHeight // Высота браузера

Соответственно вот пример использования:

Стоит учесть, что в примере ширина и высота окна – это размеры маленького окна справа на сервисе codepen. В «боевых» условиях будет отображаться реальный размер окна.

На jQuery

Если У Вас уже есть подключенная библиотека jQuery, то можно узнать размеры окна с помощью нее. Хоть уже jQuery и старичок, от которого все пытаются избавиться, его нередко можно встретить даже в современных CMS системах.

Определение размеров монитора на jQuery

Определить размер монитора на jQuery у меня не получилось. Если у Вас есть готовое решение, то просьба написать в комментариях.

Для определения ширины или высоты окна браузера

Чтобы задействовать для нашей задачи jQuery, необходимо использовать код:

$(window).width(); // Ширина браузера $(window).height(); // Высота браузера

Комментарии

Другого нельзя? кроме Alert? например с помощью get запроса отправить куда нибудь и использовать эти данных ?

Вообще то alert без смысленно его видит человек. Мне надо использовать эти данных(height:width) чтоб изменит какието элементи: if ($height>=600) < #code… >else

Я вроде и написал, что пример бессмысленный. Главное же возможность

document.body.clientHeight возвращает 0 – почему? Пробовал в разных браузерах.

То, что здесь написано – не работает, если изначально не указаны размеры. document.body.clientHeight выводит нулевое значение если окно браузера пустое не зависимо от размеров браузера. Например есть self.innerHeight, который выводит высоту окна, но почему то не везде работает.

спасибо автору он дал наводную инфу а дальше можно посмотреть или в стандарте или здесь http://www.w3schools.com/jquery/css_height.asp

Дмитрий: document.body.clientHeight возвращает 0 – почему? Пробовал в разных браузерах.

Я обновил статью и сейчас должно все работать как часы.

Чтобы получать уведомления о всех исторических IT-событиях —

Если Вы используете материал моего блога, то будьте добры поставьте ссылку.

Источник