Определить ширину и высоту окна браузера / экрана с помощью js
При разработке сайтов часто возникает необходимость определить ширину/высоту пользовательского окна браузера.
Определите эти параметры можно с помощью javascript.
В JS существует несколько способов определить ширину окна
- Ширина окна минус ширина полосы скролинга — window.innerWidth
- Ширина окна вместе с полосой скрола — document.documentElement.clientWidth
Используя кнопки ниже, вы можете посмотреть на результаты работы каждого из свойств
Определение высоты экрана js
Аналогичный скрипт, что бы узнать высоту страницы экрана
Кнопки ниже демонстрируют работу этих скриптов
Как правило ширину и высоту браузера определяют во время создания разнообразных слайдеров галерей и прочих визуальной составляющей страницы. Например чтобы весь первый экран у нас занимало изображение или слайдер, мы определяем параметры окна и подставляю необходимые переменны в размеры объекта.
Метод определения размеров экрана с помощью jQuery
Ширина и высота данным методом, определяется вместе с полосой прокрутки и будет равносильна clientWidth/Height
Получить размер экрана, текущей веб-страницы и окна браузера
Как я могу получить windowWidth , windowHeight , pageWidth , pageHeight , screenWidth , screenHeight , pageX , <
17 ответов
Вы можете получить размер окна или документа с помощью jQuery:
Для размера экрана вы можете использовать screen объект:
Вот как мне удалось получить ширину экрана в React JS Project:
Если ширина равна 1680, вернуть 570, иначе вернуть 200
Чтобы проверить высоту и ширину текущей загруженной страницы любого веб-сайта, используйте «console» или после нажатия «Inspect» .
Шаг 1 . Нажмите правую кнопку мыши, выберите «Проверить», а затем нажмите «Консоль».
Шаг 2 . Убедитесь, что экран вашего браузера не находится в режиме максимизации. Если экран браузера находится в режиме «Развернуть», необходимо сначала нажать кнопку «Развернуть» (присутствует в правом или левом верхнем углу) и отменить ее.
шаг 3 . Теперь напишите следующее после знака «больше» (‘>’), т.е.
Вы также можете получить ширину и высоту окна, избегая панелей инструментов браузера и других вещей. Это реальная полезная область в окне браузера .
Для этого используйте: Свойства window.innerWidth и window.innerHeight (см. Документ в w3schools).
В большинстве случаев это будет лучший способ, например, отображать идеально центрированный плавающий модальный диалог. Это позволяет вам рассчитывать позиции на окне, независимо от того, какое разрешение ориентации или размера окна использует браузер.
Если вам нужно по-настоящему пуленепробиваемое решение для ширины и высоты документа ( pageWidth и pageHeight на рисунке), вы можете использовать мой плагин, jQuery.documentSize.
У него только одна цель: всегда возвращать правильный размер документа, даже в тех случаях, когда jQuery и другие методы fail. Несмотря на его название, вам не обязательно использовать jQuery — он написан на ванильном Javascript и тоже работает без jQuery.
Для глобального document . Для других документов, например во встроенном фрейме, к которому у вас есть доступ, передайте документ в качестве параметра:
Обновление: теперь и для размеров окна
Начиная с версии 1.1.0, jQuery.documentSize также обрабатывает размеры окна.
Это необходимо, потому что
- $( window ).height() является глючит в iOS, до такой степени, что он бесполезен
- $( window ).width() и $( window ).height() являются ненадежно для мобильных устройств, поскольку они не справляются с эффектами мобильного масштабирования.
JQuery.documentSize предоставляет $.windowWidth() и $.windowHeight() , которые решают эти проблемы. Для получения дополнительной информации, пожалуйста, ознакомьтесь с документация.
С введением globalThis в ES2020 вы можете использовать такие свойства, как.
Для размера экрана:
Для размера окна
Для смещения:
Полное руководство по размерам экрана
JavaScript
Для высоты:
Примечание. Когда окно развернуто, оно будет равно screen.availHeight
Для ширины:
Для роста:
Для ширины .
Пожалуйста, прекратите редактировать этот ответ. Это было отредактировано 21 раз различными людьми, чтобы соответствовать их предпочтению формата кода. Также было отмечено, что это не требуется, если вы хотите ориентироваться только на современные браузеры — если это так, вам нужно только следующее:
Но когда мы говорим об адаптивных экранах и если по какой-то причине мы хотим справиться с этим с помощью jQuery,
Дает правильное измерение. Даже это убирает лишнее пространство полосы прокрутки, и нам не нужно беспокоиться о корректировке этого пространства 🙂
В некоторых случаях, связанных с адаптивным макетом, $(document).height() может возвращать неверные данные, которые отображают только высоту порта просмотра. Например, когда у некоторого div # wrapper есть height: 100%, этот #wrapper может быть растянут на некоторый блок внутри него. Но его высота все равно будет как высота окна просмотра. В такой ситуации вы можете использовать
Это представляет фактический размер обертки.
Вот кросс-браузерное решение с чистым JavaScript (Source) :
Вот мое решение!
Не-jQuery способ получить доступное измерение экрана. window.screen.width/height уже выставлен, но для отзывчивости веб-дизайна и полноты я думаю стоит упомянуть следующие атрибуты:
utilWidth и vendHeight — доступная ширина и высота экран (исключая панели задач ОС и тому подобное).
Я разработал библиотеку для знания реального размера окна просмотра для настольных компьютеров и мобильных браузеров, потому что размеры области просмотра несовместимы между устройствами и не могут полагаться на все ответы этого поста (согласно всем исследованиям, которые я сделал по этому поводу): https://github.com/pyrsmk/W
Вы можете использовать объект Screen, чтобы получить это.
Ниже приведен пример того, что он будет возвращать:
Чтобы получить переменную screenWidth , просто используйте screen.width , то же самое с screenHeight , просто используйте screen.height .
Чтобы получить ширину и высоту окна, оно должно быть screen.availWidth или screen.availHeight соответственно.
Для переменных pageX и pageY используйте window.screenX or Y . Обратите внимание, что это из ОЧЕНЬ ЛЕВОГО / ТОП ВАШЕГО ВЛЕВО / ТОП-ЭСТ ЭКРАНА . Таким образом, если у вас есть два экрана шириной 1920 , то окно 500px слева от правого экрана будет иметь значение X 2420 (1920 + 500). screen.width/height , однако, отображает текущую ширину или высоту экрана.
Чтобы получить ширину и высоту вашей страницы, используйте jQuery $(window).height() или $(window).width() .
Снова используя jQuery, используйте $(«html»).offset().top и $(«html»).offset().left для значений pageX и pageY .
Я написал небольшой букмарклет javascript, который вы можете использовать для отображения размера. Вы можете легко добавить его в свой браузер и всякий раз, когда вы щелкаете по нему, вы увидите размер в правом углу окна вашего браузера.
Здесь вы найдете информацию, как использовать букмарклет https://en.wikipedia.org/wiki/Bookmarklet
Bookmarklet
Исходный код
Оригинальный код в кофе:
В основном, код предшествует небольшому div, который обновляется при изменении размера вашего окна.
Как проверить параметры попапа при ширине окна браузера 1600 px и 1000 px яндекс
Как получить размеры экрана, окна и веб-страницы в 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. Заключение
Надеюсь, теперь Вы понимаете, как получать различные размеры.
Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.
Внешний размер окна — это размер активного окна браузера (включая поисковую строку, панель вкладок, открытые боковые панели и проч.), а внутренний размер окна — это размер области просмотра.
Наконец, размер веб-страницы — это размер контента.
Как узнать ширину окна браузера?
Каким инструментом лучше пользоваться, чтобы определить/задать ширину экрана браузера?
Ситуация: нужно посмотреть, как выглядит страница при ширине экрана 1024 px (вместе с прокруткой)
Правильно я понимаю, что использование Window Resizer + контроль на whatsmy.browsersize.com позволит мне точно контролировать ширину браузера?
Или вообще есть какие-то более элементарные пути? Простите, туплю (
PS Да, я искала обсуждение аналогичного вопроса на форуме и не нашла
Просто один из вариантов. Возможно не ваш.
* появится возможность выбора разрешения или устройства
Так в частности «адаптивную верстку» проверяют
facebook (Дети диаграммы Ганта)
Каким инструментом лучше пользоваться, чтобы определить/задать ширину экрана браузера?
Ситуация: нужно посмотреть, как выглядит страница при ширине экрана 1024 px (вместе с прокруткой)
Правильно я понимаю, что использование Window Resizer + контроль на whatsmy.browsersize.com позволит мне точно контролировать ширину браузера?
Или вообще есть какие-то более элементарные пути? Простите, туплю (
PS Да, я искала обсуждение аналогичного вопроса на форуме и не нашла
Посмотрел данные сайты. Очевидно они показывают размеры окна браузера без элементов интерфейса (полосы прокруток, меню). Поэтому если вам нужен размер с полосой прокрутки, то все верно. Тем более, вряд ли несколько пикселей сыграют большую роль.
Как проверить сайт на разных разрешениях
Современный дизайнер знает принципы адаптивного веб-дизайна – сайт должен идеально визуализироваться на любом устройстве или размере экрана, на котором его будут открывать потенциальные клиенты. Это очень важно, ведь посетителей со смартфонов и планшетов уже перевалило за отметку 50%, да и наличие адаптива влияет на ранжирование в поисковых системах. Провести реальные тесты физически невозможно, но существуют специальные инструменты, позволяющие тестировать проекты в виртуальной среде.
Современный дизайнер знает принципы адаптивного веб-дизайна – сайт должен идеально визуализироваться на любом устройстве или размере экрана, на котором его будут открывать потенциальные клиенты. Это очень важно, ведь посетителей со смартфонов и планшетов уже перевалило за отметку 50%, да и наличие адаптива влияет на ранжирование в поисковых системах. Провести реальные тесты физически невозможно, но существуют специальные инструменты, позволяющие тестировать проекты в виртуальной среде.
Популярные разрешения экрана
Проверка сайта на разных разрешениях через браузеры
Firefox
Chrome
Yandex
Другие браузеры
Онлайн-сервисы для проверки адаптива
BrowserStack
Позволяет протестировать сайт не только на адаптивность, но и на кроссбраузерность. Для начала работы необходимо залогиниться через гугл-аккаунт. Бесплатный доступ для интерактивного тестирования браузера и мобильного приложения открывается только на 30 мин., 100 мин. дается на автотестирование.
Каждое устройство доступно до 1 мин. во время бесплатной пробной версии.
Стоимость подписки для проверки сайтов только в настольных браузерах (для одного пользователя) – 29 долл., в настольных и мобильных – 39 долл.
Screenfly
Рекомендуемые устройства включают настольные компьютеры, планшеты, телевизоры и смартфоны.
CrossBrowserTesting
Благодаря универсальности платформы, возможно запускать параллельные автоматические тесты, визуально сравнивать скриншоты, взаимодействовать с сайтом на реальных устройствах, а также удаленно отлаживать код по ходу работы. Для использования пробной версии необходимо зарегистрироваться в сервисе.
Ghostlab
Удобно, что можно делать снимки экрана с любого устройства, аннотировать их и перетаскивать на свой баг-трекер.
Пробный период длится 7 дней. Стоимость программы – 49 долл.
Responsinator
Ресурс предлагает протестировать страницу в следующих вариантах ширины: 375, 734, 412, 684, 667, 414, 736, 768, 1024.
Инструменты от поисковых систем для проверки адаптива
Огромный процент интернет-трафика поступает с мобильных устройств, и веб-сайт должен хорошо выглядеть и работать, чтобы пользователям было удобно.
Google Mobile Friendly
Google Mobile Friendly лучше всего подходит для проверки удобства использования мобильных девайсов и фрагментов кода.
Минус – нельзя посмотреть, как выглядит веб-ресурс в разных разрешениях, а также взаимодействовать с ним (отображает только первый экран).
Mobile Friendly – Яндекс.Вебмастер
Минус – нельзя посмотреть, как выглядит веб-ресурс в разных разрешениях, также возможна проверка только своих сайтов.
Как узнать, какими браузерами пользуются посетители сайта?
Важно! Сайт должен быть подключен к Google Analytics/Яндекс.Метрике.
После того как будет определено, с каких браузеров осуществляются входы, необходимо скачать их, поочередно открывать в каждом свой сайт и проверять, корректно ли отображение, отсутствуют ли баги, либо же воспользоваться онлайн-сервисом.
Размер окна браузера
Под какое разрешение делать сайт?
Как рассчитать ширину сайта для того, чтоб не появлялся горизонтальный скроллинг?
Пользователь может просматривать сайты на различных устройствах. Ниже приведена статистика устройств просмотра сайтов Яндекс.Метрика на январь 2021 год.
Типы устройств просмотра сайтов
Размеры окон экрана монитора и браузера указаны в пикселях (px).
Распространенные мониторы
Различные размеры окон браузера
1.1. Размер экрана
Размер экрана — это ширина и высота всего экрана: монитора (дисплея) или мобильного дисплея.
1.2. Доступный размер экрана
Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.
| Размер экрана |
| Доступный размер экрана |
| Внешнее окно браузера |
| Окно прсмотра |
2.1. Размер внешнего окна — это ширина и высота текущего (активного) окна браузера, включая адресную строку, поисковую строку, панель вкладок, открытые боковые панели и прочие панели браузера.
3. Размер веб-страницы
Размер веб-страницы — это ширина и высота отображаемого содержимого (размер загруженной веб-страницы).
Разрешения экрана, размеры окна браузера. Справочник (изменения от 27.11.2013)
Не секрет, что размер сайта должен быть меньше, чем размер экрана, потому, что у браузера есть рамка, полосы прокрутки и иногда другие инструменты, уменьшающие видимую область сайта. Под какое разрешение делать сайт сегодня? Как рассчитать ширину сайта для того, чтоб не появлялось горизонтального скроллинга? А если не хотите и вертикального? Как быть в этом случае?
Для этого мы составили очень простую и удобную таблицу:
Зеленым цветом выделены строки, показывающие оптимальное разрешение, под которые следует проектировать веб-сайт, так как по данным некоторой статистики у большей части пользователей мониторы поддерживают указанные параметры. Менее 10% имеют разрешение меньше указанного. Желательно, чтобы максимальная ширина сайта не превышала 1259 px, иначе некоторые пользователи вашего сайта могут увидить горизонтальный скроллинг, который является очень неудобным для использования. А если вы на своем сайте не хотите видеть и вертикального скроллинга, или просто хотите узнать высоту той части сайта, которую гарантированно увидят сразу при открытии страницы, то она будет в диапазоне 599-631 px.
А как быть с владельцами сотовых телефонов, смартфонов и планшетов? Под какое разрешение разрабатывать сайт для них?
Современные мобильные устройства, кроме очень бюджетных моделей, имеют минимальное разрешение 480×320 px, а чаще 800×480 или более, умеют масштабировать сайты, а также самостоятельно разделять их на блоки, выделять важные текстовые фрагменты. Большинство сайтов корректно отображается на мобильных устройствах и без создания специальной мобильной версии сайта. Если вы все же хотите разработать мобильную версию, то желательно, чтобы она была сверстана в одну колонку (обычные сайты чаще верстают в 2-3 колонки) и не содержала сложных скриптовых и навигационных решений (например, выпадающих меню, мелких управляющих элементов и т.п.).
Get the size of the screen, current web page and browser window
How can I get windowWidth , windowHeight , pageWidth , pageHeight , screenWidth , screenHeight , pageX , pageY , screenX , screenY which will work in all major browsers?
20 Answers 20
You can get the size of the window or document with jQuery:
For screen size you can use the screen object:
This has everything you need to know: Get viewport/window size
Please stop editing this answer. It’s been edited 22 times now by different people to match their code format preference. It’s also been pointed out that this isn’t required if you only want to target modern browsers — if so you only need the following:
Here is a cross browser solution with pure JavaScript (Source):
A non-jQuery way to get the available screen dimension. window.screen.width/height has already been put up, but for responsive webdesign and completeness sake I think its worth to mention those attributes:
availWidth and availHeight — The available width and height on the screen (excluding OS taskbars and such).
But when we talk about responsive screens and if we want to handle it using jQuery for some reason,
gives the correct measurement. Even it removes the scroll-bar’s extra space and we don’t need to worry about adjusting that space 🙂
Full 2020
I am surprised that question have about 10 years and it looks like so far nobody has given a full answer (with 10 values) yet. So I carefully analyse OP question (especially picture) and have some remarks
- 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)
- for screenHeight/Width OP wants to count screen height/width including system menu bar (eg. in MacOs) — this is why we NOT use .availWidth/Height (which not count it)
- for windowWidth/Height OP don’t want to count size of scroll bars so we use .clientWidth/Height
- the screenY — in below solution we add to position of top left browser corner ( window.screenY ) the height of its menu/tabls/url bar). But it is difficult to calculate that value if download-bottom bar appears in browser and/or if developer console is open on page bottom — in that case this value will be increased of size of that bar/console height in below solution. Probably it is impossible to read value of bar/console height to make correction (without some trick like asking user to close that bar/console before measurements. )
- pageWidth — in case when pageWidth is smaller than windowWidth we need to manually calculate size of <body> children elements to get this value (we do example calculation in contentWidth in below solution — but in general this can be difficult for that case)
- for simplicity I assume that <body> margin=0 — if not then you should consider this values when calculate pageWidth/Height and pageX/Y
I test it on Chrome 83.0, Safari 13.1, Firefox 77.0 and Edge 83.0 on MacOs High Sierra
Graphical answer: 
(. )
You can also get the WINDOW width and height, avoiding browser toolbars and other stuff. It is the real usable area in browser’s window.
To do this, use: window.innerWidth and window.innerHeight properties (see doc at w3schools).
In most cases it will be the best way, in example, to display a perfectly centred floating modal dialog. It allows you to calculate positions on window, no matter which resolution orientation or window size is using the browser.
To check height and width of your current loaded page of any website using «console» or after clicking «Inspect».
step 1: Click the right button of mouse and click on ‘Inspect’ and then click ‘console’
step 2: Make sure that your browser screen should be not in ‘maximize’ mode. If the browser screen is in ‘maximize’ mode, you need to first click the maximize button (present either at right or left top corner) and un-maximize it.
step 3: Now, write the following after the greater than sign (‘>’) i.e.
Complete guide related to Screen sizes
JavaScript
For height:
Note: When the window is maximized this will equal screen.availHeight
For width:
Jquery
For height:
For width:
With the introduction of globalThis in ES2020 you can use properties like.
For screen size:
For Window Size
For Offset:
If you need a truly bulletproof solution for the document width and height (the pageWidth and pageHeight in the picture), you might want to consider using a plugin of mine, jQuery.documentSize.
It has just one purpose: to always return the correct document size, even in scenarios when jQuery and other methods fail. Despite its name, you don’t necessarily have to use jQuery – it is written in vanilla Javascript and works without jQuery, too.
for the global document . For other documents, e.g. in an embedded iframe you have access to, pass the document as a parameter:
Update: now for window dimensions, too
Ever since version 1.1.0, jQuery.documentSize also handles window dimensions.
That is necessary because
- $( window ).height() is buggy in iOS, to the point of being useless
- $( window ).width() and $( window ).height() are unreliable on mobile because they don’t handle the effects of mobile zooming.
jQuery.documentSize provides $.windowWidth() and $.windowHeight() , which solve these issues. For more, please check out the documentation.
I wrote a small javascript bookmarklet you can use to display the size. You can easily add it to your browser and whenever you click it you will see the size in the right corner of your browser window.
Here you find information how to use a bookmarklet https://en.wikipedia.org/wiki/Bookmarklet
Bookmarklet
Original Code
The original code is in coffee:
Basically the code is prepending a small div which updates when you resize your window.
In some cases related with responsive layout $(document).height() can return wrong data that displays view port height only. For example when some div#wrapper has height:100%, that #wrapper can be stretched by some block inside it. But it’s height still will be like viewport height. In such situation you might use
That represents actual size of wrapper.
I developed a library for knowing the real viewport size for desktops and mobiles browsers, because viewport sizes are inconsistents across devices and cannot rely on all the answers of that post (according to all the research I made about this) : https://github.com/pyrsmk/W
Sometimes you need to see the width/height changes while resizing the window and inner content.
For that I’ve written a little script that adds a log box that dynamicly monitors all the resizing and almost immediatly updates.
It adds a valid HTML with fixed position and high z-index, but is small enough, so you can:
- use it on an actual site
- use it for testing mobile/responsive views
Tested on: Chrome 40, IE11, but it is highly possible to work on other/older browsers too . 🙂
EDIT: Now styles are applied only to logger table element — not to all tables — also this is a jQuery-free solution 🙂
You can use the Screen object to get this.
The following is an example of what it would return:
To get your screenWidth variable, just use screen.width , same with screenHeight , you would just use screen.height .
To get your window width and height, it would be screen.availWidth or screen.availHeight respectively.
For the pageX and pageY variables, use window.screenX or Y . Note that this is from the VERY LEFT/TOP OF YOUR LEFT/TOP-est SCREEN. So if you have two screens of width 1920 then a window 500px from the left of the right screen would have an X value of 2420 (1920+500). screen.width/height , however, display the CURRENT screen’s width or height.
To get the width and height of your page, use jQuery’s $(window).height() or $(window).width() .
Again using jQuery, use $(«html»).offset().top and $(«html»).offset().left for your pageX and pageY values.
