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

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

Сам себе удивляюсь – почему это я ранее не озадачился поиском простого, удобного и быстрого способа изменения окна браузеров (Opera, FireFox, IE), используемых при тестировании, несмотря на то, что верстаю уже достаточно продолжительный отрезок времени.

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

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

Суть методики максимально проста – в браузере нужно создать закладку, в которой прописать специальный код ява-скрипта. То есть:

  1. Создаем закладку для какой-либо страницы (любой).
  2. Редактируем ее, вместо адреса страницы указываем нижеследующий JavaScript, а вместо названия соответствующее разрешение, например 1024×768.
    javascript:self.resizeTo(1024,768);
    
  3. Аналогично создаем закладки под другие разрешения экрана.

Дальше остается только организовать наиболее удобный доступ к созданным закладкам. В 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 (размещаете в любое удобное для Вас место на панели браузера):

800×600

1024×768

1280×1024

* * *

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

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

  1. Brim
    8 октября 2007 г. в 18:44

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

  2. 9 октября 2007 г. в 09:35

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

  3. 18 октября 2007 г. в 10:58

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

  4. inno
    22 октября 2007 г. в 21:20

    полезно

  5. Svesh
    3 ноября 2009 г. в 23:40

    Жизненно и актуально…
    Как раз собирался придумывать способ и наткнулся случайно.
    Автору спасибо

  6. 31 марта 2010 г. в 14:54

    А как быть с браузером google chrome?

    Код

    javascript:self.resizeTo(1024,768);

    в нём не работоспособен

    1. 1 апреля 2010 г. в 09:39 / ответ на коммент mihdan

      Не представляю, как.

  7. 30 января 2012 г. в 23:40

    В Firefox 9 это уже не работает. Хотя перестало еще раньше, не заметил когда.

  8. Андрей
    13 марта 2012 г. в 17:39

    И в новом FF тоже не работает.

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код