Где можно найти эмулятор ios и android
Несмотря на то что тестирование сайтов на реальных устройствах нельзя ничем заменить, существуют эмуляторы Android и iOS. Android-эмулятор для Windows, Linux и Mac OS X является бесплатным. Для того чтобы обзавестись им, необходимо скачать и установить комплект Android Software Development Kit (SDK), доступный по адресу http://developer. android.com/sdk/. Установка осуществляется из командной строки, так что это занятие не для слабонервных. iOS-симулятор доступен только для пользователей Mac OS X и является частью пакета Xcode (его можно бесплатно скачать из Mac App Store). Установив Xcode, вы сможете получить доступ к нему, используя путь ~/Developer/Platforms/iPhoneSimulator. platform/Developer/ Applications/iOSSimulator. app.
Проанализируем тег <meta> и разберемся, что к чему. Атрибут name="viewport" вполне понятен. Следующий атрибут content="initial-scale=2.0 говорит: «масштабировать содержимое до величины двойного размера» (0.5 означало бы половину размера, а 3.0 — трехкратный размер и т. д.), в то время как выражение width=device-width сообщает браузеру, что ширина страницы должна быть равна device-width.
Тег <meta> также можно использовать для контроля над тем, насколько сильно пользователи смогут увеличивать и уменьшать ширину страницы. Код в приведенном далее примере позволит увеличивать ширину страницы до величины, равной трехкратной ширине экрана устройства, и уменьшать ее до половины ширины экрана устройства:
<meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale=0.5" />
Кроме того, вы можете вообще лишить пользователей возможности осуществлять масштабирование и, несмотря на то что это важный инструмент, обеспечивающий доступность, его применение редко будет целесообразным на практике:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
Выражение user-scalable=no в данном случае будет уместным.
Мы изменим значение initial-scale на 1.0, в результате чего мобильный браузер будет обрабатывать страницу, придавая ей размер, равный 100 % от величины своей области просмотра. Присвоение атрибуту width значения device-width приведет к тому, что при обработке наша страница получит ширину, равную 100 % ширины окна любого из совместимых мобильных браузеров. Вот тег <meta>, который мы будем использовать:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Если взглянуть на страницу на экране iPad в книжной ориентации, то можно увидеть, что теперь содержимое хоть и обрезается, но не так, как если бы мы смотрели на него сквозь очки с толстыми линзами (рисунок 2.9)! Именно это нам и требуется на данном этапе. Мы добились прогресса, поверьте мне!
Вид страницы на экране iPad в книжной ориентации
ПРИМЕЧАНИЕ
Заметив, что тег <meta> с атрибутом name="viewport" используется все чаще, W3C начал предпринимать попытки привнести аналогичную функцию в CSS. По адресу http://dev. w3.org/ csswg/css-device-adapt/ вы сможете все узнать о новом объявлении @viewport. Идея заключается в том, чтобы вместо тега <meta> в разделе <head> разметки можно было указать в CSS-коде @viewport { width: 320px; }. В результате этого ширина окна браузера была бы задана равной 320 пикселам. Некоторые браузеры уже поддерживают такой синтаксис (например, Opera Mobile), хоть и с использованием префиксов, указывающих на их поставщиков, например @-o-viewport { width: 320px; }.
Добавить комментарий