Мета-теги для мобильных устройств

Перевод статьи

Мобильные поисковые устройства, мобильные браузеры и даже десктопные браузеры используют мета-теги для распознавания и обработки разметки, ориентированной на мобильные устройства.
Основная часть контента, предназначенного для использования на мобильных устройствах, распознается с помощью объявления типа документа. Если в объявлении типа документа указано, что документ относится к разметке XHTML-MP или WML, это сигнализирует о том, что он оптимизирован под мобильные устройства.
Хотя современные продвинутые мобильные устройства и смартфоны обрабатывают разметку HTML4 и 5 (некоторые даже с JavaScript и AJAX), большинство разработчиков по-прежнему предпочитают специфическую оптимизацию под мобильные устройства. Однако, самый лучший вариант в этом случае – это легкий, валидный документ с использованием обычных HTML тегов.
В настоящее время, DOCTYPE документа уже не является основным критерием оптимизации документа под мобильные устройства, так как мобильные браузеры поддерживают полный набор html-тегов.
При верстке под мобильные устройства одним из важных критериев оптимизации кода являются мета-теги.
Мета-тег «MobileOptimized»
Microsoft ввели в обиход тег MobileOptimized, который позволяет контролировать ширину веб-страницы при обработке в мобильном браузере IE Mobile (или Pocket IE). Значение мета тега content задается целым числом в пикселях. В IE Mobile наличие этого мета-тега включает расположение элементов в одну колонку с заданной шириной, предупреждая мобильный браузер от преобразования контента под форму экрана мобильного устройства. Подробное описание свойств этого тега на сайте Microsoft
<meta name="MobileOptimized" content="width" />
Мобильные браузеры и мобильные поисковики используют этот мета-тег для распознавания html-документов, оптимизированных под мобильные устройства.
Мета-тег «HandheldFriendly»

Мета-тег HandheldFriendly изначально поддерживался в Palm мобильным браузером AvantGO. На нынешний момент он распознается большинством мобильных браузеров и мобильных поисковиков. Он так же позволяет отображать станицу в мобильном браузере без масштабирования. Значения параметра value у этого мета тега для мобильных браузеров - true, для декстопных приложений – false.

<meta name="HandheldFriendly" content="true" />

Мета-тег «Viewport»
Многие мобильные браузеры масштабируют веб страницы под полную ширину, которая оптимизирована для браузеров на ПК. Эти браузеры предоставляют пользователю возможность самостоятельно масштабировать страницу. Например Opera Mobile использует по умолчанию ширину страницы 850 px, a iPhone использует по умолчанию ширину в 980 px.
Мета-тег Viewport контролирует логическое разрешение и масштабирование во многих браузерах под смартфоны, а так же в Safari Mobile для iPhone, браузерах Android, браузерах webOS в Palm Pre и Pixi, Opera Mini, Opera Mobile и BlackBerry. Наличие мета-тега Veiwport указывает на то, что документ оптимизирован под мобильные устройства.
Вот простой пример использования мета-тега Viewport для задания ширины браузера в 240px и запрета на масштабирование для пользователя:
<meta name="viewport" content="width=240,user-scalable=no" />
Значение параметра content при перечислении разделяется запятыми.
Вот пример использования всех доступных параметров для значения content в мета-теге Viewport:
<meta name="viewport" content="width=240, height=320, user-scalable=yes,
initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" />
Таблица доступных параметров для значения content:

Параметр	Пример использования	Описание
width	width=320 width=device-width	Логическая ширина отображения в пикселях. Значение width=device-width указывает на то, что ширина документа должна подстраиваться под ширины экрана устройства.
height	height=480 height=device-height	Логическая высота отображения в пикселях. Значение height=device-height указывает на то, что высота документа должна подстраиваться под высоту экрана устройства.
user-scalable	user-scalable=no	Позволяет или запрещает пользователю масштабировать отображаемый документ. Возможные значения yes или no
initial-scale	initial-scale=2.0	Задает исходное масштабирование веб-страницы на экране устройства. Значение 1.0 позволяет отобразить веб-страницу без масштабирования
maximum-scale	maximum-scale=2.5	Позволяет задать максимально возможное приближение при масштабировании. Цифровое значение может задаваться от 0.25 до 10.0.
minimum-scale	minimum-scale=0.5	Позволяет задать минимальный лимит на масштабирование или приближение. Цифровое значение может задаваться от 0.25 до 10.0.

Более подробное описание мета-тега Viewport можно найти здесь

Верстка под мобильные: проблемы с IE Mobile

Не далее как вчера передо мной встала такая проблема, как верстка под IE Mobile. Возможно я недостаточно хорошо искала в рунете, но результаты моих поисков по запросам "IE Mobile особенности верстки" были чуть меньше, чем вообще никакими. А у заказчика тем временем был телефон именно с этим проклятущим браузером.
На англоязычных сайтах информации было чуть больше, что в конечном итоге мне и помогло решить мою проблему.
А проблема заключалась в  следующем: под IE Mobile  у меня форма не растягивалась под размер экрана.
Помогло в итоге применение мета тегов:

<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="width" />

Под другими мобильными браузерами отлично работали мета теги:

<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />

Head для мой страницы, корректно отображающийся под Android, IOS, Symbian и Windows Mobile выглядит вот так:

<head>
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="width" />
</head>

Полезные ссылки по теме:
http://learnthemobileweb.com/2009/07/mobile-meta-tags/ - статья про мета теги (MobileOptimized, HandheldFriendly, Viewport) с описанием их использования

http://www.formsite.com/documentation/mobile-optimization.html - оптимизация верстки под мобильные устройства

http://www.squeed.com/sites/default/files/Creating%20mobile%20apps.pdf - презентация в пдф, в которой наглядно расписано построение head'а для документа, существующие мобильные браузеры и что где отображается и еще много интересного

Начало моей записной книжки

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