Стили

User Agent

Один из способов включения стилей для мобильного устройства — это использование User Agent, которую получает сервер от клиента.
Этому может помочь набор скриптов: code.google.com/p/mobileesp/, а также сервис от яндекса api.yandex.ru/detector/
При работе с User Agent только одна проблема — это постоянно появляющиеся новые User Agent.

На стороне клиента

Раньше использовался такой подход:

<link rel="stylesheet" href="site.css" media="screen" />
<link rel="stylesheet" href="mobile.css" media="handheld" />

Строка с media=«screen» соотвествует обычному компьютеру, media=«handheld» — это мобильное устройство. Новые устройства отказываются от такого подхода и необходимо использовать запросы внутри атрибута media.

Например для устройств с шириной экрана 480px и меньше будем использовать код:

<link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/>

Комбинируя оба способа можно написать:

media="handheld, only screen and (max-device-width:480px)"

Выбор пользователя

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

Что писать в стилях

1. Избавьтесь от многоколоночной разметки
2. Поставьте display: none; на неважных элементах
3. Уменьшите поля вокруг элементов
4. Уменьшите использование картинок, особенно больших фоновых
5. Повысьте читаемость текста увеличив размер мелкого текста.
6. Выкиньте плавающие элементы
7. Учитывайте, что события mouseover не работают.

Что кроме стилей

Многие мобильные устройства понимают такую запись номера телефона:

<a href="tel:15032084566" class="phone-link">(503) 208-4566</a>

Некоторые устройства уже поддерживают HTML5, поэтому можно использовать, например, такие теги:

<input type="tel" />
<input type="email" />

Теги HTML5 позволяют проводить валидацию на стороне браузера и открывать соответствующий набор символов.

Размеры и ориентация

Современные мобильные устройства обычно масштабируют страницу, чтобы она вся отображалась на экране.
Это не всегда удобно. Чтобы изменить данное поведение браузера, нужно использовать тег meta с атрибутом viewport. Например:

<meta name="viewport" content="width=320" />

Данное определение означает, что 320 пикселей страницы будет видно на устройстве.
Также можно запретить масштабирование:

<meta name="viewport" content="width=320,user-scalable=false" />

Также можно добавить стили на основе ориентации устройства:

@import url("portrait.css") all and (orientation:portrait);
@import url("landscape.css") all and (orientation:landscape);

Как вы поняли, файл portrait.css будет использован при портретной ориентации, а landscape.css при альбомной.

Определение ориентации поддерживается не всеми устройствами, использование max-width более надежно для определения ширины экрана.

Специальные замечания по iPhone

1. На iPhone нет поддержки Adobe Flash
2. Не поддерживается тег

<input type="file" />

, поскольку нет доступа к файловой структуре.
3. Кэшируются файлы размером не более 25 Kb
4. Есть проблемы с @font-face — использованием загрузки внешних шрифтов. См. также статью насчет шрифтов.

Но вы можете использовать Javascript библиотеки, которые можно использовать для доступа к специальным функциям iPhone. Обратите внимание на Sencha Touch, jQTouch и iui. Эти библиотеки также работают и с Android. Дополнительно ожидается появление production-релиза jQuery Mobile.

См. таже CSS Framework, отображающий страницу в стиле IPhone

Также можно создать свою иконку для сайта, используя следующий синтаксис:

<link rel="apple-touch-icon" href="/customIcon.png"/>

Иконка должна быть 57x57 пикселов в формате png. Android также понимает такие иконки.

Статья основывается на статье www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/

Ссылки для дополнительного чтения

* State of Mobile Web Development – дискуссия о мобильной разработке в 3-х частях
* Return of the Mobile Stylesheet – использование стилей
* Hardboiled CSS3 Media Queries – как назначать стили для устройств
* CSS Media Query for Mobile is Fool’s Gold – аргументы против media queries
* Mobile Web Design – дизайн
* Mobile operating systems and browsers are headed in opposite directions – направления в мире мобильных устройств
* Pocket-Sized Design: Taking Your Website to the Small Screen – старая, но еще полезная статья.