—»     —»   Viewport Resizer: невероятно гибкий букмарклет для тестирования разрешений
  Раздел: Инструменты   Нет комментариев  

Viewport Resizer: невероятно гибкий букмарклет для тестирования разрешений



Задачи веб-дизайнеров упрощаются изо дня в день. На рынке появляется все больше и больше новых разрешений, и для всех нужно продумывать профессиональные шаблоны. Сегодня уже недостаточно просто разделить веб-сайт на шаблон для настольных ПК и для мобильных устройств. Так как рынок стремительно завоевывается пользователями смартфонов, проблема становится серьезнее с каждым часом. Конечно же, сейчас у нас есть media queries, которые позволяют предоставить разные разрешения. И даже несмотря на то, что они отлично работают в большинстве случаев, вам все равно нужно проводить тестирование.

Viewport Resizer: невероятно гибкий букмарклет для тестирования разрешений

Viewport Resizer в форме букмарклета

Веб-приложение Viewport Resizer – это один из помощников, призванных на помощь дизайнерам. Вы просто перетаскиваете небольшой инструмент на панель ваших закладок, и он всегда будет у вас под рукой. Букмарклет предлагается с в 2 конфигурациях по умолчанию, которые вы без труда можете расширять и изменять. Первая стандартная конфигурация предлагает вам множество разрешений для смартфонов, планшетов, мониторов и для некоторых устройств Apple. Вторая конфигурация предлагает вам поддержку только устройств на базе iOS.

Viewport Resizer: невероятно гибкий букмарклет для тестирования разрешений

Как только Viewport Resizer будет встроен в панель закладок, он будет готов к работе. Если вы хотите протестировать веб-сайт, то запустите его URL, подождите, пока загрузится вся страница, а затем кликните по букмарклету. В верху страницы появится маленькая панель, где будут отображены доступные разрешения. Кликните по одному из них, и браузер начнет изменять разрешение.

Таким образом вы можете быстро протестировать breakpoint’ы и их работу. Если вы разрабатываете для особых разрешений, то вы без труда сможете самостоятельно ввести нужные параметры, используя эту панель.

Индивидуальная настройка панели

Если две стандартных конфигурации не отвечают вашим требованиям, вы всегда можете создать собственные настройки под определенные разрешения и устройства. Кроме обычных разрешений, Viewport Resizer также предлагает несколько заранее подготовленных настроек под конкретные устройства. Здесь вы сможете найти модели HTC, Nokia, Sony Ericsson, Motorola и многие другие.

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

Viewport Resizer: невероятно гибкий букмарклет для тестирования разрешений

Браузерная поддержка и ограничения

Viewport Resizer работает во всех современных браузерах за исключением одного (как вы уже догадались, это IE). Важное предупреждение: чтобы веб-сайт можно было протестировать, он должен позволять отображение во фреймах. Если вы используете какие-либо блокираторы фреймов, то их нужно отключить. Viewport Resizer – это действительно простой и гибкий инструмент. Мы рекомендуем вам познакомиться с ним!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 5384   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930