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

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

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

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

• Разрешение — это соотношение экранной ширины и высоты в пикселях (например, 1920 x 1080 пикселей).
• Физический размер экрана — это его диагональ в дюймах (например, 24 дюйма).
• Размер окна браузера — это ширина и высота области просмотра в пикселях. Это разрешение за вычетом рамок, полос прокрутки и других элементов, уменьшающих видимую область сайта. Размер окна браузера пользователь может менять, поэтому дизайнеры обычно задают контентную область и боковые отступы.

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

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

Статистика Яндекс.Метрика

Разрешение экрана:

Разрешение окна клиента:

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

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

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

Что означают размеры окон монитора и браузера?

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

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

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

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

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

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

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

2.2. Размер внутреннего окна — это ширина и высота области просмотра .

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

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

Размеры экранов для адаптивной верстки

• 320px (20em),
• 640px (40em),
• 960px (60em),
• 1024px (64em)
• 1280px (80em),
• 1920px (120em).

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

Есть макет страницы с разрешением 1920.
У меня разрешение монитора 1366×768. При масштабировании в браузере, масштаб задается в процентах(90%, 50% и т.д).

Как мне точно, в пикселях, задать ширину окна браузера? Чтобы было можно проверить макет pixel perfect.
Пользуюсь хромом, если что.

• Вопрос задан более трёх лет назад
• 73298 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 2

Мне нравиться Window Resizer как доп. расширение. А вообще — F12 и жмем на маленький мобильный телефон и сможете ставить любой масштаб, даже тестировать скорость загрузки при разном интернете.

Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
Full-stack developer (Symfony, Angular)

В дебаг панели хрома, если что, есть возможность эмулировать девайс. Вот. Можно выставить любой размер вьюпорта на ваш вкус. Хотя лучше конечно прикупить для работы 24″ монитор.

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• Google Chrome

Есть ли возможность в консоли запускать код по ‘Alt+Enter’?

• 1 подписчик
• 19 нояб.
• 20 просмотров

Удобное изменение размеров окна браузера под стандартные разрешения экрана

Для кого-то нижеизложенное является самым баянистым баяном, но для меня это стало удачным открытием всего несколько дней назад. Уверен, что найдется еще достаточно юзеров, которые не знали о данной фишке. Посему эта заметка написана как раз для них. Сам себе удивляюсь — почему это я ранее не озадачился поиском простого, удобного и быстрого способа изменения окна браузеров (Opera, FireFox, IE), используемых при тестировании, несмотря на то, что верстаю уже достаточно продолжительный отрезок времени. Некоторое время назад был у меня один ява-скрипт в HTML-странице, на ней можно было указать нужный размер окна и через специальное поле загрузить тестируемую страницу. Теперь понимаю, что я занимался ерундой. На днях, когда мне понадобилось протестировать работу через этот скрипт, оказалось, что я его потер. Это и подтолкнуло меня на поиск стоящего решения.

Способ для браузеров FireFox и Internet Explorer

1. Создаем закладку для какой-либо страницы (любой).
2. Редактируем ее, вместо адреса страницы указываем нижеследующий JavaScript, а вместо названия соответствующее разрешение, например 1024×768.

javascript:self.resizeTo(1024,768); 

Дальше остается только организовать наиболее удобный доступ к созданным закладкам. В FireFox, например, их можно вынести на «Панель закладок».

Способ для браузера Opera

По идее, метод, обозначенный выше для FF и IE, в Опере тоже работает, но только в случае, если окно браузера не максимизировано. Взамен этого неудобства есть более интересный способ.

По умолчанию в Опере задействована клавиша «5», которая выполняет функцию «Развернуть/Восстановить окно», поэтому нам остается только изменить ее действие в настройках клавиатуры на следующее:

Maximize page | Restore page & Go to page, "javascript:resizeTo(1024,screen.availHeight-70), moveTo(100,0)" 

Здесь параметр screen.availHeight-70 означает, что из полной высоты страницы нужно вычесть 70 пикселей. Для меня такой вариант представления окна показался немного неудобным, поскольку мне нужно видеть его нижний край, поэтому я задал фиксированную высоту. Получилось следующее:

Maximize page | Restore page & Go to page, "javascript:resizeTo(1024,845), moveTo(100,0)" 

Конечно же, ничто не мешает сию настройку привязать к любой другой горячей клавише.

В качестве альтернативы можно воспользоваться еще одним вариантом, в виде готовых кнопок для Opera (размещаете в любое удобное для Вас место на панели браузера):

Компания «Expert Systems», имея большой опыт в сфере создания профессионального программного обеспечения, разрабатывает CRM-системы для ведения клиентской базы. Для тестирования возможностей программы можно попробовать бесплатную версию CRM-системы «Quick Sales 2 Free».

Смотрите также

Internet Explorer 8 проходит тест Acid2

Что-то много в последнее время мне глаза попадается информации, касаемой браузеров и поддержки ими стандартов. И мне это обстоятельство несомненно очень даже нравится. На хабре рассказали о том, что ожидаемая к выходу в марте 2008 года первая .

UserJS-скрипт на jQuery для авторизации в WordPress

Давно я обещал опубликовать данный пост и вот, наконец, делаю это сегодня. Как я уже писал ранее, я интегрировал в браузер Opera свой любимый фреймворк jQuery и по мере необходимости пописываю скрипты на нем. Благодаря этому мне удается .

Комментарии (9)

На самом деле использование кода типа «javascript:self.resizeTo (1024,768);» не совсем корректно, т.к. 768 — высота всего экрана пользователя. Высота же окна браузера, где отображается страница явно несколько меньше. 🙂
Но метод интересный, спасибо. 🙂

Согласен, конечно, на счет высоты (в Опере у меня как раз меньшие значения указаны, что и сделано в кнопках), но думаю, что она в данном случае не особо и важна, поскольку все-таки здесь главный показатель — ширина окна браузера.

Спасибо. Пригодится. А то иногда на работе при создании поста гляжу на соседнем компе результат, там разрешение меньше 🙂

Курсы javascript

Здравствуйте!
я только начинаю изучать язык javascript по этому ногами не бейте за дурацкий вопрос:
пере до мной стоит задача при нажатии на ссылку изменить размер окна до заданных размеров.
Пишу такие строки:

При этом вместо установки размеров окна браузера равным 300*300 у меня окно увеличивается на 300 px в ширину и на столько же в высоту:eek:
знаю что в браузере ie данная функция работать не будет пробую её на Firefox 3.
Подскажите что я делаю не так?

08.08.2008, 10:37
Новичок на форуме
Регистрация: 19.02.2008
Сообщений: 9,177
08.08.2008, 10:55
Регистрация: 06.05.2008
Сообщений: 765
А почему просто не присвоить window.outerWidth = windowWidth?
08.08.2008, 11:00
Новичок на форуме
Регистрация: 08.08.2008
Сообщений: 4

Можете меня забанить.

Если Вы просто хотите сказать что не любите когда на каком бы то нибыло сайте издеваются над Вашим браузером — так тут я могу Вас только поддержать — сам обычно ухожу с таких сайтов причём навсегда.

Но в данный момент передо мной стоит специфическая задача имеющая перед собой совершенно конкректную цель: уменьшить ширину браузера на 200px а в оставшееся расстояние вставить новое узкое окно. в котором будет находиться чат локальной сети. при закрытии окна чата браузер должен восстановить прежние размеры.