Как изменить ширину окна браузера с помощью настроек и кода

19.07.2025

Управление шириной окна через настройки браузера

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

Изменение ширины окна с помощью кода на сайте

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


window.resizeTo(ширина, высота);

Замените ширина и высота на числовые значения в пикселях, например:


window.resizeTo(1024, 768);

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

Изменение ширины с помощью CSS и HTML

Если ваша задача – контролировать ширину контента, а не самого окна, примените CSS для установки ширины элементов:

  • width: задает ширину элемента (например, сайта или блока)
  • max-width: ограничивает максимальную ширину
  • min-width: задает минимальную ширину

Плавное изменение ширины окна приведет к адаптивной верстке, если использовать относительные единицы, такие как %, vw или rem. Это позволяет сайту хорошо выглядеть при разных размерах окна.

Использование расширений и инструментов разработчика

  1. Установите расширения для браузера, такие как Window Resizer или Responsive Design Mode. Они позволяют быстро переключаться между предустановленными размерами окна для тестирования.
  2. Для Chrome откройте инструменты разработчика (F12 или Ctrl+Shift+I), выберите вкладку Device Toolbar (иконка устройства) и задайте нужные размеры в пикселях.

Автоматизация изменения размеров для тестирования

Можно написать скрипт, который меняет ширину окна через определенные интервалы:


let sizes = [320, 480, 768, 1024, 1280];
let index = 0;
setInterval(() => {
if (index >= sizes.length) index = 0;
window.resizeTo(sizes[index], window.innerHeight);
index++;
}, 3000);

Этот код сменит ширину окна по кругу, что удобно для проверки адаптивности.