Если вы были хорошим разработчиком весь прошлый год, возможно, Санта подарил вам новый блестящий iPhone. Если он это сделал, вы наверняка потратили часы на то, чтобы поиграть с ним — просматривать, загружать приложения, микроблоги и вообще получать массу удовольствия.
Теперь, будучи веб-разработчиком, вы, вероятно, задаетесь вопросом, где, черт возьми, «Просмотр исходного кода» и как вы можете создавать сайты и приложения, которые отлично смотрятся и отлично работают на iPhone. Вот несколько советов и приемов, которые помогут вам начать — и, что самое главное, вы можете попрактиковаться на симуляторе, если вы еще не сделали большую покупку.
1: Документация и симулятор iPhone
«Документация: нет», — заявил Питер-Поль Кох, когда начал играть с Safari для iPhone, но с тех пор ситуация изменилась. Apple теперь предоставляет информацию о веб-разработке для iPhone как часть документации Safari.
IPhone SDK (набор для разработки программного обеспечения), который предназначен только для Mac, также содержит симулятор iPhone — это очень удобно, если у вас уже есть iPhone, и, конечно, абсолютно необходимо, если вы еще не присоединились к армии iPhone. Чтобы получить к нему доступ, вам необходимо зарегистрироваться в качестве разработчика iPhone и установить iPhone SDK. После установки вы найдете симулятор iPhone в /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications
2: маленький экран CSS
Самая очевидная разница между iPhone и вашим ПК или Mac заключается в том, что у iPhone гораздо меньший экран. Если у вас уже есть страница, которая работает в настольных браузерах и программах чтения с экрана, одной простой стратегией является наличие дополнительной таблицы стилей, которая используется только в iPhone. Вот разметка, которую вы бы использовали:
<!--[if !IE]>-->
<link
rel="stylesheet"
href="small-screen.css"
type="text/css"
media="only screen and (max-device-width: 480px)"
/>
<!--<![endif]-->
Этот элемент ссылки использует медиазапрос для целевых устройств с максимальной шириной 480 пикселей, то есть доступной ширины, когда iPhone находится в горизонтальной ориентации. Условные комментарии IE необходимы для IE версии 5.5 или более ранней; в этих версиях отсутствует поддержка медиазапроса, и будет загружена таблица стилей, предназначенная для iPhone. Давайте попробуем пример.
В примере 1 мы видим страницу, которая будет отображать красный прямоугольник для зрителей iPhone, а синий — для других зрителей. Таблица стилей common.css содержит стили, предназначенные для всех браузеров, включая объявление для синей рамки. Другой, small-screen.css, предназначен для портативных устройств и содержит объявления для красной рамки. Когда вы загрузите этот пример в iPhone, вы увидите красное поле; на рабочем столе вы увидите синий.
Если вы предпочитаете использовать только одну таблицу стилей, вы можете добавить стили только для iPhone в основную таблицу стилей, используя блок @media
@media only screen and (max-device-width: 480px) {
#test-block {
background: red;
}
}
Мы можем видеть пример встроенной таблицы стилей, используемой в Примере 2. В таблице стилей, которую он использует, onestyleforall.css , вы увидите объявление для красного фона в блоке @media
3: Метаэлемент видового экрана
По умолчанию Safari на iPhone будет отображать вашу страницу так, как если бы это был настольный браузер на большом экране с шириной 980 пикселей, доступной для веб-контента. Затем он уменьшит содержимое, чтобы оно уместилось на маленьком экране. В результате пользователь видит вашу страницу маленькими неразборчивыми буквами и должен увеличить ее, чтобы увидеть интересные части. Это может быть хорошо для ваших веб-страниц, но если вы разрабатываете веб-приложение, которое стремится выглядеть как нативное приложение, это недопустимо.
К счастью, это легко исправить с помощью специального meta
<meta name="viewport" content="width=device-width" />
Этот элемент указывает браузеру использовать ширину устройства в качестве ширины области просмотра вместо 980 пикселей по умолчанию. Мы можем увидеть разницу с двумя примерами.
- В примере 3 показан простой элемент абзаца и отсутствует
metaШрифт практически не читается.
- Пример 4 включает элемент viewport. Теперь, когда ширина устройства составляет всего 320 пикселей, размер шрифта намного легче увидеть.
Кроме того, вы можете установить значение device-width Например, предположим, что ваш блог имеет макет с фиксированной шириной 750 пикселей, поэтому он прекрасно вписывается в экран рабочего стола 800 × 600. Пример 5 показывает урезанную версию этого типа макета: если вы загрузите его в iPhone, вы увидите пустое пространство, которое заполняет оставшиеся 980 пикселей.
Чтобы устранить лишнее пространство, вы можете использовать meta
<meta name="viewport" content="width=780" />
Пример 6 показывает версию нашего фиксированного макета с этим метаэлементом области просмотра.
Содержимое элемента metainitial-scale Для веб-приложений общий набор значений:
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
Этот элемент устанавливает ширину равной максимальной ширине устройства (как мы видели ранее), увеличивает масштаб до единицы, а также запрещает пользователю увеличивать и уменьшать контент. Это удобно для веб-приложений, которые должны выглядеть и чувствовать себя как нативное приложение.