как узнать разрешение экрана браузера

Разрешения экрана, размеры окна браузера. Справочник (изменения от 27.11.2013)

Не секрет, что размер сайта должен быть меньше, чем размер экрана, потому, что у браузера есть рамка, полосы прокрутки и иногда другие инструменты, уменьшающие видимую область сайта. Под какое разрешение делать сайт сегодня? Как рассчитать ширину сайта для того, чтоб не появлялось горизонтального скроллинга? А если не хотите и вертикального? Как быть в этом случае?

Для этого мы составили очень простую и удобную таблицу:

Зеленым цветом выделены строки, показывающие оптимальное разрешение, под которые следует проектировать веб-сайт, так как по данным некоторой статистики у большей части пользователей мониторы поддерживают указанные параметры. Менее 10% имеют разрешение меньше указанного. Желательно, чтобы максимальная ширина сайта не превышала 1259 px, иначе некоторые пользователи вашего сайта могут увидить горизонтальный скроллинг, который является очень неудобным для использования. А если вы на своем сайте не хотите видеть и вертикального скроллинга, или просто хотите узнать высоту той части сайта, которую гарантированно увидят сразу при открытии страницы, то она будет в диапазоне 599-631 px.

А как быть с владельцами сотовых телефонов, смартфонов и планшетов? Под какое разрешение разрабатывать сайт для них?

Современные мобильные устройства, кроме очень бюджетных моделей, имеют минимальное разрешение 480×320 px, а чаще 800×480 или более, умеют масштабировать сайты, а также самостоятельно разделять их на блоки, выделять важные текстовые фрагменты. Большинство сайтов корректно отображается на мобильных устройствах и без создания специальной мобильной версии сайта. Если вы все же хотите разработать мобильную версию, то желательно, чтобы она была сверстана в одну колонку (обычные сайты чаще верстают в 2-3 колонки) и не содержала сложных скриптовых и навигационных решений (например, выпадающих меню, мелких управляющих элементов и т.п.).

Определяем разрешение экрана через JavaScript

Определяем размер клиентской части окна браузера через JavaScript

Источник

Как получить размеры экрана, окна и веб-страницы в 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 Да, я искала обсуждение аналогичного вопроса на форуме и не нашла

Посмотрел данные сайты. Очевидно они показывают размеры окна браузера без элементов интерфейса (полосы прокруток, меню). Поэтому если вам нужен размер с полосой прокрутки, то все верно. Тем более, вряд ли несколько пикселей сыграют большую роль.

Источник

Какое разрешение моего экрана? 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 без использования сторонних программ. Вы знаете другие способы? Какой способ Вам понравился больше всего? Не забывайте, что Вы всегда можете оставить Ваше мнение или вопрос в комментариях.

Источник

Размер окна браузера

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

Пользователь может просматривать сайты на различных устройствах. Ниже приведена статистика устройств просмотра сайтов Яндекс.Метрика на январь 2021 год.

Типы устройств просмотра сайтов

Размеры окон экрана монитора и браузера указаны в пикселях (px).

Распространенные мониторы

Различные размеры окон браузера

1.1. Размер экрана
Размер экрана — это ширина и высота всего экрана: монитора (дисплея) или мобильного дисплея.

1.2. Доступный размер экрана
Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.

Разрешение экрана	Размер окна браузера	Где встречается
800×600	779×431	ЭЛТ 15″
1024×768	1003×599	ЖК 15″, ЭЛТ 17″
1280×800	1259×631	ЖК 15″ wide, 17″ wide
1280×1024	1259×855	ЖК 17″, 19″
1400×1050	1379×881	ЖК 20″, 21″
1440×900	1419×731	ЖК 20″ wide
1600×1200	1579×1031	ЭЛТ 19″, 21″
1680×1050	1659×881	ЖК 22″ wide
▼	Разрешение экрана монитора	Название	Соотношение сторон
1	1920 x 1080	Full HD	16:9
2	1366 x 768	WXGA (HD Ready)	16:9
3	1536 × 864	16:9
4	1600 × 900	WXGA++ (HD+)	16:9
5	1280 x 1024	SXGA	5:4
6	1440 x 900	WXGA+	16:10
7	1680 x 1050	WSXGA+	16:10
8	1280 × 720	WXGA (HD Ready) 720p	16:9
9	1024 x 768	XGA	4:3
10	2560 × 1440	WQXGA (WQHD) (QHD)	16:9
11	1600 x 1024	WSXGA	25:16

Размер экрана

Доступный размер экрана

Внешнее окно браузера

Окно прсмотра

2.1. Размер внешнего окна — это ширина и высота текущего (активного) окна браузера, включая адресную строку, поисковую строку, панель вкладок, открытые боковые панели и прочие панели браузера.

3. Размер веб-страницы

Размер веб-страницы — это ширина и высота отображаемого содержимого (размер загруженной веб-страницы).

Источник