Как проверить ширину окна браузера

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

Как узнать ширину окна браузера?

Каким инструментом лучше пользоваться, чтобы определить/задать ширину экрана браузера?

Ситуация: нужно посмотреть, как выглядит страница при ширине экрана 1024 px (вместе с прокруткой)

1. Установила Window Resizer из магазина Хрома. Задаю значение 1024х768
2. Но если зайти на http://myresolutionis.ru, где можно посмотреть онлайн текущее разрешение экрана браузера в пикселях, то там указываются значения 1007×768.
3. На http://whatsmy.browsersize.com/ тоже можно посмотреть ширину онлайн, и там в большинстве случаев результаты совпадают с тем, что я выбираю в Window Resizer. Но в ряде случаев не совпадают. Так, заданное 1280 там показывается как 1270

Правильно я понимаю, что использование Window Resizer + контроль на whatsmy.browsersize.com позволит мне точно контролировать ширину браузера?

Определяем ширину /высоту экрана или окна браузера с помощью JS и на jQuery. При разработке интерфейсов частенько приходиться пользоваться JavaScript`ом. Раньше считалось, что использовть любые скрипты, которые исполняются на стороне пользователя – плохо и использование JS считалось «дурным тоном». Времена изменились и разработка интерфейса зачастую делается фреймворками основанными на JS. За всех не скажу, но определение размеров экрана или окна браузера, лично для меня, пригождается при внедрении в CMS всевозможных галерей, слайдеров и т.д. На JS. Определение ширины или высоты монитора. Это самый простой способ, которые работает во всех браузерах и на всех устройствах.

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

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

Как определить размеры элементов сайта в браузере

Времена изменились и разработка интерфейса зачастую делается фреймворками основанными на 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-событиях —

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

// Size of browser viewport. $(window).height(); $(window).width(); // Size of HTML document (same as pageHeight/pageWidth in screenshot). $(document).height(); $(document).width(); For screen size you can use the screen object: window.screen.height; window.screen.width; center of coordinate system (0,0) is in the viewport (browser window without bars and main borders) top left corner and axes are directed to right and down (what was marked on OP picture) so the values of pageX, pageY, screenX, screenY must be negative (or zero if page is small or not scrolled).

Размер окна браузера в 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».

Пример события для отслеживания изменения размеров окна браузера в реальном времени. Результаты выводятся в консоль браузера.

Под размерами окна браузера подразумеваются как размер всего окна целиком (вместе с хромом и панелями), так и размер видимой части документа (вьюпорт), или другими словами, размер окна браузера без панелей и хрома. К сожалению, с получением этих значений больше проблем, чем может показаться на первый взгляд. Для получения размеров окна браузера целиком во всех браузерах, кроме Internet Explorer, вы можете использовать свойства window.outerWidth и window.outerHeight. И, насколько я понимаю, аналогов для Internet Explorer не существует. Изменить ширину окна на значение dwidth и высоту — на dheight: // (относительно текущего размера ) window.resizeBy(<dwidth>, <dheight>)