Как изменить ширину окна браузера
Перейти к содержимому

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

  • автор:

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

Для кого-то нижеизложенное является самым баянистым баяном, но для меня это стало удачным открытием всего несколько дней назад. Уверен, что найдется еще достаточно юзеров, которые не знали о данной фишке. Посему эта заметка написана как раз для них. Сам себе удивляюсь — почему это я ранее не озадачился поиском простого, удобного и быстрого способа изменения окна браузеров (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 — высота всего экрана пользователя. Высота же окна браузера, где отображается страница явно несколько меньше. 🙂
Но метод интересный, спасибо. 🙂

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

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

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

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

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

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

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

Neko3

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

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

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

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

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

google-chrome

  • Google Chrome
  • +1 ещё

Как отключить кеширование Tampermonkey при разработке скриптов?

  • 1 подписчик
  • 07 мар.
  • 15 просмотров

Расширение Firefox для измерения ширины экрана похожее как в chrome

введите сюда описание изображения

При изменении ширины окна браузера, когда открыт Developer tools, в правом верхнем углу указывается ширина и высота окна. Очень удобно при верстке. Есть ли что-то подобное в Firefox или есть ли подобные расширения для него же?

Отслеживать

задан 8 сен 2017 в 8:04

Alex Antipov Alex Antipov

323 1 1 золотой знак 2 2 серебряных знака 10 10 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

  1. Ctrl+Shift+S (Debugger)
  2. Toolbox Option
  3. Ставим флажок возле Responsive Design Mode
  4. Появится кнопка Responsive Design Mode
  5. Нажимаем её и получаем возможность смотреть разрешение страницы, НО внутри окна браузера, впрочем ширину и высоту страницы изменять можно.

Отслеживать

ответ дан 8 сен 2017 в 8:37

5,970 3 3 золотых знака 23 23 серебряных знака 44 44 бронзовых знака

  • вёрстка
  • google-chrome
  • firefox
  • firefox-extension
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.3.8.5973

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

Фотография

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

Ситуация: нужно посмотреть, как выглядит страница при ширине экрана 1024 px (вместе с прокруткой)

  1. Установила Window Resizer из магазина Хрома. Задаю значение 1024х768
  2. Но если зайти на http://myresolutionis.ru , где можно посмотреть онлайн текущее разрешение экрана браузера в пикселях, то там указываются значения 1007×768.
  3. На http://whatsmy.browsersize.com/ тоже можно посмотреть ширину онлайн, и там в большинстве случаев результаты совпадают с тем, что я выбираю в Window Resizer. Но в ряде случаев не совпадают. Так, заданное 1280 там показывается как 1270

Правильно я понимаю, что использование Window Resizer + контроль на whatsmy.browsersize.com позволит мне точно контролировать ширину браузера?

Или вообще есть какие-то более элементарные пути? Простите, туплю (

PS Да, я искала обсуждение аналогичного вопроса на форуме и не нашла

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *