Как узнать ширину окна браузера?
Каким инструментом лучше пользоваться, чтобы определить/задать ширину экрана браузера?
Ситуация: нужно посмотреть, как выглядит страница при ширине экрана 1024 px (вместе с прокруткой)
- Установила Window Resizer из магазина Хрома. Задаю значение 1024х768
- Но если зайти на http://myresolutionis.ru , где можно посмотреть онлайн текущее разрешение экрана браузера в пикселях, то там указываются значения 1007×768.
- На http://whatsmy.browsersize.com/ тоже можно посмотреть ширину онлайн, и там в большинстве случаев результаты совпадают с тем, что я выбираю в Window Resizer. Но в ряде случаев не совпадают. Так, заданное 1280 там показывается как 1270
Правильно я понимаю, что использование Window Resizer + контроль на whatsmy.browsersize.com позволит мне точно контролировать ширину браузера?
ИсточникЯндекс браузер — Размер окна
Размер окна браузера в JavaScript
В JavaScript есть глобальные переменные с текущими значениями разрешения экрана, а также шириной и высотой окна браузера. Они доступны для вызова в любом месте кода и могут использоваться для решения задач, связанных с адаптацией сайта под мобильные устройства.
Текущие значения вашего браузера:
| Ширина | |
|---|---|
| document.body.clientWidth; | |
| innerWidth; | |
| outerWidth; | |
| screen.availWidth. | |
| screen.width; | |
| Высота | |
|---|---|
| document.body.clientHeight; | |
| innerHeight; | |
| outerHeight; | |
| screen.availHeight. | |
| screen.height; | |
- document.body.clientWidth — ширина элемента body.
- innerWidth — внутренняя рабочая часть браузера с сайтом.
- outerWidth — размер с учётом полос прокрутки и рамок браузера.
- screen.width — разрешение экрана по горизонтали.
- screen.availWidth — доступная область эркана для окон. Не учитвает служебные панели операционной системы, например, панель задач в Windows.
К последним 3 переменным иногда добавляют «window», это не играет роли и только удлиняет синтаксис. Например, «window.screen.width».
Пример события для отслеживания изменения размеров окна браузера в реальном времени. Результаты выводятся в консоль браузера.
ИсточникОпределяем ширину/высоту экрана или окна браузера с помощью JS и на jQuery
При разработке интерфейсов частенько приходиться пользоваться JavaScript`ом. Раньше считалось, что использовть любые скрипты, которые исполняются на стороне пользователя – плохо и использование JS считалось «дурным тоном».
JavaScript размеры прокрутка и координаты элементов на странице и окна браузера.
Времена изменились и разработка интерфейса зачастую делается фреймворками основанными на JS.
Где может пригодиться?
За всех не скажу, но определение размеров экрана или окна браузера, лично для меня, пригождается при внедрении в CMS всевозможных галерей, слайдеров и т.д.
На JS
Определение ширины или высоты монитора
Это самый простой способ, которые работает во всех браузерах и на всех устройствах. Если у Вас не подключено никаких сторонних библиотек, которые помогли бы сделать тоже самое, то этот вариант единственный.
Все же остается вероятность того, что пользователь собственноручно отключить обработку JS в браузере. В современном мире шансы равны 0,00001%.
В JS, чтобы определить размеры экрана, нужно использовать:
Ниже я привел работающий пример как можно узнать размеры экрана на JS:
Определение ширины и высоты окна браузера
Если нужно позиционировать любые элементы на странице, то более правильным решением будет использовать не размеры экрана, а размеры окна браузера. В JS это делается так:
Соответственно вот пример использования:
Стоит учесть, что в примере ширина и высота окна – это размеры маленького окна справа на сервисе codepen. В «боевых» условиях будет отображаться реальный размер окна.
На jQuery
Если У Вас уже есть подключенная библиотека jQuery, то можно узнать размеры окна с помощью нее. Хоть уже jQuery и старичок, от которого все пытаются избавиться, его нередко можно встретить даже в современных CMS системах.
Определение размеров монитора на jQuery
Определить размер монитора на jQuery у меня не получилось. Если у Вас есть готовое решение, то просьба написать в комментариях.
Для определения ширины или высоты окна браузера
Чтобы задействовать для нашей задачи jQuery, необходимо использовать код:
Комментарии
Другого нельзя? кроме Alert? например с помощью get запроса отправить куда нибудь и использовать эти данных ?
Вообще то alert без смысленно его видит человек. Мне надо использовать эти данных(height:width) чтоб изменит какието элементи: if ($height>=600) < #code… >else
Я вроде и написал, что пример бессмысленный. Главное же возможность
document.body.clientHeight возвращает 0 – почему? Пробовал в разных браузерах.
спасибо автору он дал наводную инфу а дальше можно посмотреть или в стандарте или здесь http://www.w3schools.com/jquery/css_height.asp
Дмитрий: document.body.clientHeight возвращает 0 – почему? Пробовал в разных браузерах.
Я обновил статью и сейчас должно все работать как часы.
Чтобы получать уведомления о всех исторических IT-событиях —
Если Вы используете материал моего блога, то будьте добры поставьте ссылку.
ИсточникКак получить размеры экрана, окна и веб-страницы в JavaScript?
Представляю Вашему вниманию перевод небольшой заметки «How to Get the Screen, Window, and Web Page Sizes in JavaScript» автора Dmitri Pavlutin.
Для определения ориентации окна браузера (ландшафтной или портретной) можно сравнить его ширину и высоту.
Однако во всевозможных доступных размерах легко запутаться: существуют размеры экрана, окна, веб-страницы и т.д.
Что означают эти размеры и, главное, как их получить? Именно об этом я и собираюсь рассказать.
1. Экран
1.1. Размер экрана
Размер экрана — это ширина и высота всего экрана: монитора или мобильного дисплея.
Получить информацию о размере экрана можно с помощью свойства screen объекта window :
1.2. Доступный размер экрана
Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.
Для получения доступного размера экрана снова обращаемся к window.screen :
2. Окно
2.1. Размер внешнего окна (или внешний размер окна)
Размер внешнего окна — это ширина и высота текущего окна браузера, включая адресную строку, панель вкладок и другие панели браузера.
Получить информацию о размере внешнего окна можно с помощью свойств outerWidth и outerHeight объекта window :
2.2. Внутренний размер окна (или размер внутреннего окна)
Внутренний размер окна — это ширина и высота области просмотра (вьюпорта).
Объект window предоставляет свойства innerWidth и innerHeight :
Если мы хотим получить внутренний размер окна без полос прокрутки, то делаем следующее:
3. Размер веб-страницы
Размер веб-страницы — это ширина и высота отображаемого содержимого (отрендеренного контента).
Для получения размера веб-страницы используйте следующее (включает в себя внутренние отступы страницы, но не включает границы, внешние отступы и полосы прокрутки):
Если pageHeight больше, чем внутренняя высота окна, значит, присутствует вертикальная полоса прокрутки.
4. Заключение
Надеюсь, теперь Вы понимаете, как получать различные размеры.
Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.
Внешний размер окна — это размер активного окна браузера (включая поисковую строку, панель вкладок, открытые боковые панели и проч.), а внутренний размер окна — это размер области просмотра.
Источник