В сегодняшней статье мы продолжаем рассказывать о доступных инструментах и методах, разработанных и выпущенных активными членами сообщества веб-дизайна.
В первой статье мы говорили о PrefixFree, вторая была посвящена Foundation, в третьей были представлены Sisyphus.js, библиотека для Gmail. Четвертая статья освящала бесплатный плагин GuideGuide.
Еще в 2009 году, мои коллеги решили преобразовать браузер Opera Mobile таким образом, чтобы он работал не только для обычных мобильных платформ, но и для Windows и Linux. Первоначально предназначенный для контроля качества и тестирования, браузер Opera Mobile оказался полезным и для веб – разработчиков, которые могли бы его использовать для тестирования мобильных версий сайтов на стационарных компьютерах, используя Alt/Command + Tab.
Итак, мы решили, отойти от Mac, как самого известного решения для любого разработчика, и обратить свое внимание на общедоступный инструмент, который называется Opera Mobile Emulator. Opera Mobile Emulator можно бесплатно загрузить с сайта компании — разработчика или с Mac App Store. Установить его довольно просто. Интерфейс абсолютно идентичен с интерфейсом Opera Mobile на телефоне. В то время как инструменты, горячие кнопки, командная строка значительно отличаются, и дают вам больше возможностей.
В этой статье мы расскажем о том, как вы можете использовать эмулятор Opera Mobile, а также о некоторых его специфических настройках.
Примечание: Я работаю в компании Opera Software на должности менеджера по продуктам эмулятора Opera Mobile.
Начало
При запуске эмулятора первое, что вы увидите, это будет меню выбора профайла. Используя меню слева, вы можете запустить одну или несколько версий Opera Mobile, если вам требуются какие-то конкретные условия. Например, при выборе профиля «HTC Desire» вы запустите вариант Opera Mobile в WVGA (480 × 800 пикселей) портретный режим масштаба 150%, как это было бы на экране телефона HTC Desire. Если вы выберете другой профиль, вариант Opera Mobile будет запущен с настройками, которые будут соответствовать этому профилю.
Страницы можно загрузить, введя URL в адресной строке, либо путем перетаскивания любого файла или URL в окно браузера. Навигация по страницам также проста: используя обычные прикосновения, вы можете листать страницы и изменять их размер. Также изменить размер можно с помощью мыши и клавиш «+», «-».
Вы уже заметили, что Opera Mobile может изменяться под экран любого размера. Это, конечно, отличается от тестирования на устройствах, где браузер является полноценным приложением для данного конкретного мобильного устройства. Например, если вы хотите проверить макеты в различных форматах окон, вам лучше использовать для этого Opera Mobile, а не обычный браузер стационарного компьютера, потому что последний не будет реагировать на различные настройки просмотра, и таким образом вы не заметите возможные ошибки в приложении.
Стоит отметить, что device-width не запрашивает ширину экрана в эмуляторе Opera Mobile, а запускается вмести с используемым вариантом Opera Mobile. Кроме того, если вам интересна проверка различий между портретной и альбомной ориентации, вы можете использовать комбинацию Alt/Option + R или нажать на кнопку «Поворот экрана» в правом нижнем углу.
Конечно, рабочий процесс каждого человека индивидуален, и я здесь, чтобы помочь повысить вашу эффективность, а не диктовать, как надо работать. Очевидно, что ничто не сравнится с тестированием на реальных устройствах. Потому что только реальные устройства дадут вам точное представление о работе вашего сайта с учетом особенностей мобильного браузера, ограниченного процессора, размера экрана и так далее. Тем не менее, тестировать неготовый продукт на реальном устройстве – нет смысла, поэтому на промежуточных этапах я предпочитаю использовать эмулятор Opera Mobile.
Расширенный набор опций
В меню выбора профиля, вы найдете ряд профильных опций.
Опция «Resolution» в раскрывающемся меню дает вам возможность выбора размера экрана. Опция «Pixel Density» в раскрывающемся меню представляет собой список значений PPI: для HTC Desire, это 252, что приведет по умолчанию к размеру масштаба равному 150% и devicePixelRatio от 1,5 при запуске. Выбор PPI, например, 285, приведет масштаб к значению 200% и соответствующий devicePixelRatio.
Короче говоря, это сочетание разрешения и значения плотности будет меняться в зависимости от профиля. Оно влияет на размер окна, а также определяет использование media queries.
Опция «Input» в раскрывающемся меню позволяет выбрать один из трех режимов ввода для каждого типа пользовательского интерфейса и UA:
«Touch». Эта опция запуска Opera Mobile с пользовательским интерфейсом, оптимизированным для использования на телефонах с сенсорным экраном, она также даст UA строку с Opera Mobi.
«Keypad». Эта опция запуска Opera Mobile с пользовательским интерфейсом, где сочетания клавиш оптимизированы для обычных телефонов с сенсорным экраном. Для удобства разработчиков, мыши, панорамирования и масштабирования жестами все равно будут работать. Строка UA будет содержать Opera Mobi.
«Tablet». Эта опция запуска Opera Mobile с оптимизированным пользовательским инт …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров