как узнать размер окна браузера в пикселях
Как узнать ширину окна браузера?
Каким инструментом лучше пользоваться, чтобы определить/задать ширину экрана браузера?
Ситуация: нужно посмотреть, как выглядит страница при ширине экрана 1024 px (вместе с прокруткой)
Правильно я понимаю, что использование Window Resizer + контроль на whatsmy.browsersize.com позволит мне точно контролировать ширину браузера?
Или вообще есть какие-то более элементарные пути? Простите, туплю (
PS Да, я искала обсуждение аналогичного вопроса на форуме и не нашла
Просто один из вариантов. Возможно не ваш.
* появится возможность выбора разрешения или устройства
Так в частности «адаптивную верстку» проверяют
facebook (Дети диаграммы Ганта)
Каким инструментом лучше пользоваться, чтобы определить/задать ширину экрана браузера?
Ситуация: нужно посмотреть, как выглядит страница при ширине экрана 1024 px (вместе с прокруткой)
Правильно я понимаю, что использование Window Resizer + контроль на whatsmy.browsersize.com позволит мне точно контролировать ширину браузера?
Или вообще есть какие-то более элементарные пути? Простите, туплю (
PS Да, я искала обсуждение аналогичного вопроса на форуме и не нашла
Посмотрел данные сайты. Очевидно они показывают размеры окна браузера без элементов интерфейса (полосы прокруток, меню). Поэтому если вам нужен размер с полосой прокрутки, то все верно. Тем более, вряд ли несколько пикселей сыграют большую роль.
Как получить размеры экрана, окна и веб-страницы в 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. Заключение
Надеюсь, теперь Вы понимаете, как получать различные размеры.
Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.
Внешний размер окна — это размер активного окна браузера (включая поисковую строку, панель вкладок, открытые боковые панели и проч.), а внутренний размер окна — это размер области просмотра.
Наконец, размер веб-страницы — это размер контента.
Форум
Справочник
Измерения окна, документа и элементов
В решении многих задач может понадобиться определить положение, размер окна браузера, или каких-нибудь определенных элементов документа. В этой записи будут перечислены все способы определения этих значений.
Разрешение экрана
Положение окна браузера
Мнения разработчиков в вопросе какое же свойство должно хранить положение окна относительно верхней левой точки экрана, видимо, разошлись.
Первые два работают в браузерах Mozilla (например Firefox), вторая пара работает в Internet Explorer и Opera. В браузерах, основанных на движке WebKit (например Safari, Chrome), обе пары работают и их значения равны друг другу соответственно.
Но невозможно абсолютно кросс-браузерно определить положение окна, поскольку в разных браузерах отсчет идет до разных точек. Дело в том, что браузеры Internet Explorer и Opera в значениях screenTop и screenLeft хранят координаты левого верхнего угла документа, а не всего окна, поэтому даже при развертывании на весь экран их значения будут не нулевые.
Напротив, остальные браузеры начинают отсчет от верхней левой точки самого окна, как и ожидается для этих свойств. Стоит отметить, что в Firefox, при развертывании окна на весь экран, значения screenY и screenX могут быть отрицательными.
Положение окна браузера можно изменить двумя методами:
Размеры окна браузера
Под размерами окна браузера подразумеваются как размер всего окна целиком (вместе с хромом и панелями), так и размер видимой части документа (вьюпорт), или другими словами, размер окна браузера без панелей и хрома.
К сожалению, с получением этих значений больше проблем, чем может показаться на первый взгляд.
Но это справедливо только для режима следования стандартам (CSS1Compat mode), поэтому приведенный выше код работает верно в этом документе.
Но если у страницы не будет указан doctype, то в некоторых браузерах свойства clientWidth и clientHeight объекта document.documentElement будут иметь значения ширины и высоты всего документа целиком, а не только видимой его части, в то время как document.body.clientWidth и document.body.clientHeight наоборот будут иметь значения размеров вьюпорта.
Размеры окна браузера можно изменить двумя методами:
Скролл окна браузера
Сколлбар имеет несколько параметров: ширина, высота, значение прокрутки сверху, значение прокрутки слева.
Стоит отметить, что как и в случае с размерами вьюпорта, в режиме «quirks mode» не всегда понятно, свойства какого элемента ( documentElement или body ) будут иметь нужные нам значения скролла.
Для того, чтобы убедится в том, что в разных браузерах эти свойства имеют разные значения, можете попробовать выполнить тесты, представленные по этой ссылке, в разных браузерах: http://www.quirksmode.org/viewport/experiments/body.html
В браузерах на движке Mozilla (Firefox) или WebKit (chrome, safari) вы можете воспользоваться свойствами window.scrollY и window.scrollX для определения этих значений. Они будут равны scrollTop и scrollLeft соответственно.
Из скрипта вы можете управлять прокруткой страницы, пользуясь следующими методами (обратите внимание на очередность параметров):
Размеры документа и элементов
Дело в том, что не всегда достаточно узнать какие значения размеров были установлены через стили элемента и особенно это касается «резиновых» элементов (которые растягиваются в зависимости от размеров их содержания), или элементов с фиксированными размерами, но имеющих внутренние отступы.
Для демонстрации, небольшой пример:
Точно так же можно определить размер всего документа, точнее размеры элемента body :
Положение элемента на странице
Обычно, функция по определению абсолютной позиции выглядит следующим образом:
Таким способом можно считать позицию как статичных элементов ( position: static ), так и элементов с абсолютной позицией ( position: absolute ).
Заключение
Надеюсь, что данная запись поможет вам лучше разобраться в измерениях документа и его элементов. Буду рад услышать замечания или вопросы в комментариях.
Ожидал увидеть еще способ кросс-браузерного получения координат мыши 
Взяв реализацию из jQuery и немного переделав её, получил:
Сам не разбирался еще, что происходит в этом большом выражении, возможно получится упростить
Много полезного, как раз то, что искал. Совсем не то, что ковыряться в Prototype, jQuery или Dojo. Спасибо!
Должен отметить, что функция получения координат элемента относительно верхнего левого угла документа даст неверный результат в IE6, если в цепочке offsetParent попадется элемент с position: relative.
автор пишы исчо это точно:) спс за размеры окна браузера
На основе некоторых идей этой статьи создан основной материал сайта.
Спасибо за статью, Андрей!
Спасибо, всегда путаю, что x (икс) это «left» в переносе на слова.
Классная статья, спасибо!
Но подскажите, как эти полезные свойства применить собственно к элементам страницы: к примеру чтоб таблица, структурирующая GUI, масштабировалась относительно размеров видимой обл-ти? К ее атрибутам не применимы свойства 
:
Как узнать ширину и высоту элемента div до его отображения, это реально? Заранее спасибо
Для элемента div
«Элемент с не фиксированной шириной и высотой.
Кликните для появления сообщения.»:
this.offsetWidth (FF3) = 609
this.offsetWidth (Chrome) = 609
this.offsetWidth (opera10) = 613
this.offsetWidth (IE7) = 613
Высота offsetHeight во всех браузерах посчиталась одинаково.
Для body везде получились различные значения высоты.
В качестве попытки кроссброузерного определения положения и размеры окна, можно попробовать его пробно подвигать и поизменять размеры. В этом случае сразу выяснится что учитывается для возвращаемых значений.
А что вы думаете по поводу такого кроссбраузерного определения размера вьюпорта:
в IE7 не сработал, выдал 0
Я понял. Для IE надо math.max получать. Спасибо
Работает корректно во всех браузерах!
Определяет размер рабочей области окна!
+ размер области документа (с учетом дивов с абсолютным позициониррованием)
+ работает и в ИЕ6 и в Сафари
Снова я, уж простите, доработанная функция:
Норм, хотя когда футер прижат надо под ie8 как минимум перерасчитывать все.
С этой функцией наткнулся на некоторые проблемы, все описать довольно сложно, лучше выложу исправленный код. Буду признателен если кто нибудь найдет баги и отпишет mail@atlas-is.ru. Я тестировал на:
ИЕ6 ИЕ7 опреа9/10 Мазилла 3,6 Safari(win32) Chrome
для всех браузеров было 4 разных ситуации с разными доктайпами и т.д. в моем случае сейчас функция работает безупречно для: определения видимой области окна браузера (с корректным учетом скроллбаров). определения области документа/страницы с учетом всех элементов на странице (даже при абсолютном позиционировании). и смещение скролла.
Надеюсь кому то помог! Потому как сам перерыл огромную кучу информации пока соорудил это.
Спасибо, но для тех, кто не подключал jQuery эту часть кода
Спасибо. Долго искал эту информацию и нашел.
А я уже давно забил на попытки сооружать мегауниверсальные функции. Я следую таким правилам:
— верстаю в xhtml со следующим шаблоном пустого дока:
— если страница верстается php, то конечно же в нем шлется заголовок
(На этой странице такое есть) Ну а слеш в закрывающем теге кто экранировать будет!? Зачем делить слово SCRIPT на две части, если тут же ошибка потяжелее?
проходит валидацию, ессесно работает и ничего не нужно делить. Нужно просто не забыть указать тип скрипта, вставить в нем коменты-ограничители для XML-парсера и экранировать символы / и ‘ в строках.
А когда половина страниц валидируются, другие в квирке рисуются, то конечно начинается каша, геморой, бессонные ночи и т.д.
Ну а когда валидация пройдена, то и гемороя меньше. Конечно если речь не идет о совсем старых браузерах, на которые я могу забить. Кто не может, тому мои искренние сожаления и моральная поддержка в тяжбах.
1. Виевпорт во всех трех записан и в body, и в html корректно и с вычетом скролбара.
2. Во всех браузерах offsetWidth и offsetHeight что у body, что у html равны размеру виевпорта.
Вот так. Придется обходится высотой html или решать, как обойти проблему его удлинения.
Стоит отметить, что в IE8 (может и других версий) screen.width и window.screen.width возвращают не реальное разрешение экрана, а виртуальное (т.е. при изменении масштаба отображения меняется и разрешение, возвращаемое функциями, например, при помощи Ctrl+колесо мыши).
Доходчиво про ClientX/Y и почему Опера их нормально обрабатывает.
Говорю Спасибо за сайт.
Мне очень помог.
Спасибо за статью! Но нигде не могу найти, как можно (и можно ли вообще) определить расстояние нижней границы элемента до нижней границы окна браузера. Может, кто-нибудь подскажет. Заранее спасибо!
Всем привет, Великолепная фраза
Интересно конечно, но есть много вопросов по теме ИМХО. Давайте обсудим (мыло в подписи) или тут, если не затруднит
помог scrollHeight снять с дива высоту динамически
Размер окна браузера
Под какое разрешение делать сайт?
Как рассчитать ширину сайта для того, чтоб не появлялся горизонтальный скроллинг?
Пользователь может просматривать сайты на различных устройствах. Ниже приведена статистика устройств просмотра сайтов Яндекс.Метрика на январь 2021 год.
Типы устройств просмотра сайтов
Размеры окон экрана монитора и браузера указаны в пикселях (px).
Распространенные мониторы
Различные размеры окон браузера
1.1. Размер экрана
Размер экрана — это ширина и высота всего экрана: монитора (дисплея) или мобильного дисплея.
1.2. Доступный размер экрана
Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.
| Размер экрана |
| Доступный размер экрана |
| Внешнее окно браузера |
| Окно прсмотра |
2.1. Размер внешнего окна — это ширина и высота текущего (активного) окна браузера, включая адресную строку, поисковую строку, панель вкладок, открытые боковые панели и прочие панели браузера.
3. Размер веб-страницы
Размер веб-страницы — это ширина и высота отображаемого содержимого (размер загруженной веб-страницы).
Какое разрешение моего экрана? 7 способов узнать
Неважно, что у Вас: ПК, ноутбук или любое другое устройство, которое работает на ОС Windows, оно, скорее всего, имеет экран. Это может быть монитор, дисплей ноутбука или планшета, или, даже, экран телевизора. Задумывались ли Вы о том, какое разрешение у Вашего экрана? Хотите ли Вы научиться находить разрешение, которым обладает Ваш экран? Если да, прочитайте данную статью и узнайте семь способов получения ответа на Ваш вопрос.
Узнайте разрешение Вашего экрана с помощью вкладки «Экран» в приложении «Настройки» (Только для Windows 10)
Если Вы пользуетесь Windows 10, самым простым способом узнать разрешение Вашего экрана на Windows 10 будет просмотр вкладки «Экран» в приложении «Настройки». Кликните по иконке «Настройки» в меню «Пуск».
Меню настройки в Windows 10
В «Настройках» нажмите на вкладку «Система».
Вкладка «Система» в меню «Настройки»
В левой части окна выберите «Экран», после чего прокрутите правое окно, пока не увидите поле с заголовком «Масштаб и разметка». Здесь Вы увидите опцию «Разрешение». Её текущее значение и будет разрешением Вашего экрана. Например, на скриншоте ниже, Вы можете увидеть, что у нашего ноутбука разрешение составляет 1600×1200 пикселей.
Текущее разрешение экрана
Замечание: Родное разрешение Вашего экрана помечено справа надписью «Рекомендуется»
Также Вы должны знать, что есть более быстрый способ открыть вкладку «Экран» в приложении «Настройки». На пустой части Рабочего стола нажмите правой кнопкой мыши или и зажмите, после чего выберите «Свойства экрана» в контекстном меню.
Контекстное меню на рабочем столе Виндовс
Узнайте разрешение Вашего экрана с помощью вкладки «Разрешение экрана» в Панели Управления (Windows 7 и Windows 8.1)
В ОС Windows 7 и Windows 8.1 можно узнать разрешение своего экрана в пикселях, например, на ноуте с помощью опции «Разрешение экрана» в Панели Управления. Для начала откройте Панель Управления – для этого нажмите на его иконку в меню «Пуск» (в Windows 7) или на Начальном экране (в Windows 8.1).
Кнопка «Панель Управления» в меню «Пуск» Windows 7
В Панели Управления выберите «Устройства и звук» и кликните по ссылке «Изменить разрешение экрана» во вкладке «Экран».
Меню «Устройства и звук» в Панели управления 
Ссылка на опцию «Изменить разрешение экрана» в Панели Управления
На странице «Разрешение экрана» есть опция «Разрешение». Выбранное там значение является текущим разрешением Вашего экрана.
На примере ниже, экран нашего ноутбука имеет разрешение 1366×768 пикселей.
Опция «Разрешение экрана» в Панели Управления
Следует отметить, что есть более быстрый способ узнать разрешение экрана монитора на Windows 7 — открыть данную вкладку в Панели Управления: на пустом участке Рабочего стола зажмите тап или нажмите правую кнопку мыши, после чего нажмите на опцию «Разрешение экрана» в контекстном меню.
Контекстное меню на Рабочем столе Windows 7
Узнайте разрешение Вашего экрана на странице «Экран» в приложении «Настройки» (Только для Windows 8.1)
В Windows 8.1 Вы можете узнать разрешение экрана, в том числе и на ноутбуке, при помощи страницы «Экран» в приложении «Настройки». Откройте «Настройки ПК» и выберите «Устройства и ПК», и в ней вкладку «Экран». Вы увидите в правой части окна заголовок «Разрешение» и справа от него текущее значение Вашего экрана. Например, на скриншоте ниже, Вы можете увидеть, что у нашего экрана разрешение 1024×768 пикселей.
Меню «Настройки» в Windows 8.1 
Вкладка «Экран» 
Меню «Настройка разрешения экрана 
Текущее разрешение экрана
Узнайте разрешение Вашего экрана при помощи «Инструментов диагностики DirectX» (Для всех версий Windows)
Для этого способа не имеет разницы, какая версия Windows у Вас установлена, поэтому Вы всегда можете использовать «Инструменты диагностики DirectX» для получения разрешения Вашего экрана. Откройте программу «Запустить», командную строку или PowerShell. В любой из этих программ, введите команду “dxdiag” и нажмите Enter на клавиатуре.
Ввод команды “dxdiag” в командную строку
В «Инструментах диагностики DirectX» выберите вкладку «Экран» и прокрутите список «Устройство» пока не найдете поле с названием «Текущее разрешение экрана». Его значение является текущим разрешением Вашего экрана. На примере ниже Вы можете увидеть, что у нашего монитора разрешение экрана 1366×768 пикселей.
Вкладка «Экран» и поле «Текущее разрешение экрана»
Узнайте разрешение Вашего экрана при помощи приложения «Системная информация» (Для всех версий Windows)
Вы также можете узнать разрешение Вашего экрана в приложении «Системная информация». Откройте это приложение с помощью командной строки.
Ввод команды для вызова приложения «Системная информация»
В нём раскройте список «Компоненты» в левой части окна и выберите «Экран» или «Дисплей». Прокрутите правую часть окна, пока не увидите элемент «Разрешение». Его значение и будет разрешением Вашего экрана. На примере ниже Вы можете увидеть разрешение нашего экрана – 1920×1080 пикселей.
Текущее разрешение экрана в «Сведениях о системе»
Узнайте разрешение Вашего экрана, запустив команду в командной строке или PowerShell (Для всех версий Windows)
Если Вам нравится использовать командную строку или PowerShell, Вы можете узнать разрешение экрана при помощи команды “wmic path Win32_VideoController get CurrentHorizontalResolution,CurrentVerticalResolution”.
Разрешение экрана при помощи команды “wmic path Win32_VideoController get CurrentHorizontalResolution,CurrentVerticalResolution”
Узнайте разрешение Вашего экрана, посетив веб-страницу (Для всех версий Windows)
Данный способ можно считать самым простым, но он может не подойти для некоторых конфигураций компьютеров. Всё что нужно сделать для того, чтобы узнать свое разрешение экрана онлайн, это открыть свой любимый веб-браузер и посетить страницу, которая автоматически распознает разрешение Вашего экрана. Хороший пример такой страницы: whatsmyscreenresolution.com. Когда Вы зайдете на неё, первым делом Вы увидите разрешение экрана, которое распознано веб-страницей.
Способ узнать разрешение экрана с помощью веб-страницы
Какой способ нахождения разрешения экрана Вы выберите?
Эти способы представлены для получения разрешения экрана на ОС Windows без использования сторонних программ. Вы знаете другие способы? Какой способ Вам понравился больше всего? Не забывайте, что Вы всегда можете оставить Ваше мнение или вопрос в комментариях.