Meta html android что это

Полезные элементы в контейнере
для мобильных сайтов 18.02.2012

Этим постом я закончу предыдущий и одновременно начну серию статей на тематику мобильного веба.
Думаю, все в курсе, что мобильные девайсы в настоящий момент активно захватывают мир. Еще год назад по данным Stat Counter доля мобильного интернет-трафика в мире составляла 4%, на данный момент это значение уже равняется 8% с копейками, а это двукратный рост, на минуточку. Что интересно, тенденция 2*x прироста мобильного трафика наблюдается с 2009 года, когда его доля составляла 0,7%. (Последний отчет СтатКаунтера)
И что совсем интересно — этот рост не только не остановится, но и будет увеличиваться. Например, специалисты из Ericsson прогнозируют, что мобильный трафик данных вырастет к 2016 году в десять раз. А еще одни специалисты из не менее уважаемой компании Cisco прогнозируют рост в 18 раз — пруф.

Из всего вышенаписанного можно сделать вывод, что если кто из веб-разработчиков еще не окунулся в мир мобильного веба, то сейчас самое время это сделать.
В этой статье я рассмотрю те элементы контейнера

, которые десктопные олдскульные верстальщики возможно и не встречали в своей практике.

Начнем с самого первого тега, в который добавим небольшой апгрейд:

Таким нехитрым способом с помощью условных комментариев (conditional comments) тегу присваивается класс .iem7 в том случае, если страница открыта в браузере IE Mobile. Иногда бывает это полезно, так как известно, что браузеры от Microsoft не идеальны. А с помощью дополнительного класса мы можем в случае чего сделать развилку стилей.
Статья о таргетировании CSS для Windows Phone

Appcache

Также, для хеда можно сделать дополнительный апгрейд — добавить параметр manifest и включить поддержку appcache (Application Cache). Эта часть спецификации HTML5 позволяет использовать веб-приложение в оффлайн режиме. Да, в браузерах есть собственный механизм кеширования, но он ненадежен и не всегда работает так, как мы от него ожидаем. (Примечание: На iPhone/iTouch кэшируются файлы размером не более 25 Kb).
Использование appcache предоставляет следующие преимущества:

• Оффлайновый просмотр — пользователь может пользоваться сайтом, даже если нет онлайн-соединения (имеются в виду те страницы, которые уже находятся в кеше).
• Скорость — ресурсы кешируются локально, про позволяет сайту работать быстрее.
• Снижение нагрузки на сервер — браузер загружает только те ресурсы с сервера, которые были изменены

Кроме того, AppCache позволяет разработчикам определить, какие конкретно файлы следует кешировать и делать доступными оффлайн пользователям.
Задать эти файлы нужно именно в manifest файле примерно таким образом

Кстати, для этого файлика существует официальный валидатор

Title

Да, стандартный тег для задания заголовка страницы. Функция этого тега аналогична десктопной, однако стоит учитывать некоторые особенности. На некоторых устройствах title страницы используется в качестве заголовка в самом верху экрана; в других же title используется как текст по умолчанию для закладок и истории. Кроме того, по сравнению с десктопным браузером, в мобильном под title отведено довольно мало места — в среднем от 15ти до 40ка символов (60 в горизонтальном положении). Исходя из этого мобильные заголовки желательно делать короткими и значимыми, а не такими, какими советуют сеошники .

HandheldFriendly

Мета-тег HandheldFriendly изначально поддерживался старыми моделями Palm и Blackberry, где использовались такие браузеры, как AvantGo. Там тег использовался для определения разметки, ориентированной на мобильные устройства. Сегодня этот мета-тег также распознается некоторыми мобильными браузерами и параметр “true” служит индикатором того, что на странице использована оптимизированная для мобильных устройств разметка. Кроме того, он служит директивой для того, чтобы веб-документ отображался без автоматического масштабирования. (документация)

MobileOptimized

Мета-тег MobileOptimized был введен компанией Microsoft для того, чтобы контролировать ширину макета веб-страниц, которые рендерятся в браузере Internet Explorer Mobile. Контент мета-тега задается как целое число в пикселях. В IE Mobile наличие этого мета-тега принуждает страницу отображаться одной колонкой с заданной шириной, тем самым избавляясь от попыток браузера самостоятельно подогнать макет по размеру так, чтобы он помещался в экран. Кроме того, это позволяет избавиться от полосок горизонтальной прокрутки.
Некоторые мобильные не MS браузеры могут также использовать этот мета-тег для тех же целей. Более того, поисковые роботы, индексирующий сайты для мобильных устройств, также используют этот мета-тег для определения мобильно-ориентированного HTML. почитать подробнее

Viewport

Этот метатег я умышленно пропущу и вернусь к нему в отдельной статье, т. к. он важен и требует более детального рассмотрения.

Иконки

Safari в iOS и дефолтный браузер в Андроиде обладают полезной функцией сохранения закладок на сайты и веб-приложения на рабочем столе, наряду с иконками для обычных приложений. Для таких типов закладок можно указать иконку, положив в корень сайта PNG картинку размером 57x57px с названием apple-touch-icon.png. Также можно указать иконку для отдельной страницы или раздела сайта, используя тег link со значением apple-touch-icon в аттрибуте rel и адресом картинки.
С появлением iPhone 4/4s и iPad, требование к этой иконке изменились – теперь она должна быть размером 114×114 для айфона или 72×72 для айпада. В принципе, размер этой иконки может быть и больше, мобильный сафари самостоятельно сожмет ее до нужного размера, плюс скруглит углы, добавит небольшую тень и эффект стеклянности к иконке. Выглядит это как-то так:

Также, поддерживается полупрозрачность иконок. В этом случае прозрачные области будут залиты черным цветом:

При желании от стеклянного эффекта можно отказаться, прописав вместо apple-touch-icon значение apple-touch-icon-precomposed.
Многие рекомендуют всегда использовать precomposed-иконки, чтобы всегда держать под своим контролем их дизайн.
Тем не менее, даже если вы решили использовать только apple-touch-icon-precomposed.png, есть смысл также оставить запись и с apple-touch-icon.png для максимальной совместимости — к примеру iOS 1 и BlackBerry OS6 не поддерживают precomposed.
Кстати, если подразумевается, что ваш сайт будет рассчитан на работу только с мобильными девайсами от Apple, то можно вообще отказаться от ссылок на иконки в HTML коде. Достаточно создать версии изображения в нужных размерах, задать им правильные названия и положить в корень проекта. Небольшая документация по этому поводу

Стоит сказать, что Android в свое время тоже научился распознавать эти иконки и использовать аналогично iOS устройствам — заявлена поддержка версий 2.1+. (Примечание: Android 2.1 поддерживает только precomposed иконки) — прув

Позволяет задать иконку для некоторых других устройств, например некоторые модели смартфонов Nokia.

Эта строка позволяет задать картинку загрузки (splash image) при открытии закладки с рабочего стола.
Выглядит это примерно следующим образом:

Естественно, сплэш-изображение может быть любым, но желательно, чтобы его дизайн гармонировал с общим дизайном сайта и содержал его логотип.
Если такая картинка не будет задана, то при открытии закладки будет показан скриншот последнего состояния приложения.
Картинку следует делать следующих размеров (иначе устройство его не примет):

• 320×480 (iPhone
• 640×960 (iPhone 4+, новый iPod Touch)
• 768×1004 (iPad portrait)
• 1024×748 (iPad landscape)

По-умолчанию, закладка с рабочего стола запускает веб-сайт в стандартном режиме сафари – с адресной строкой.
Этот мета-тег необходим для того, чтобы приложение открылось в полноэкранном режиме, без видимой адресной строки. К сожалению, этот режим имеет некоторые ограничения — при клике на любую ссылку, переход на следующую страницу осуществляется уже в стандартном режиме мобильного сафари.

Меняем дизайн статус-бара — тонкой полосы в самом верху экрана, где отображается время и иконка заряда батареи.

Для того, чтобы его изменить, используется мета-тег apple-mobile-web-app-status-bar-style.

Здесь может быть один из трех вариантов – default, black или black-translucent.
Default — оставит его в стандартном синем дизайне, black — заставит изменить фон на черный. black-translucent — также сделает статус-бар черным, но добавит к нему полупрозрачность — это немного расширит видимую область контента, что возможно потребует дополнительных правок в css. (документация)

Некоторые дополнительные мета-теги, которые могут быть включены при надобности:

Mobile Internet Explorer позволяет принудительно активировать технологию ClearType для сглаживания шрифтов. Чем многие и пользуются .

Эти строки позволяют отключить автоматическое распознавание форматов. Проще говоря, если вы где-нибудь на странице указали номер телефона в html-коде и не указали

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

Источник

Как создать вебсайт для мобильных устройств

Стили

User Agent

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Какие бывают META теги и зачем они нужны

META-теги

В продолжении первого поста про DOCTYPE, я, как и обещал, продолжу про META теги.
META-теги — это необязательные атрибуты, размещенные в заголовке страницы, которые могут содержать ее описание, ключевые слова к ней, информацию об авторе, управляющие команды для броузера и поисковых роботов, и прочую служебную информацию, не предназначенную для посетителей.

META-теги имеют два возможных атрибута

—
—
META-теги должны находиться в заголовке HTML-документа между и (особенно это важно для документов, использующих фреймы).

Стандартом HTML 4.01 значения и имена мета-тегов НЕ оговариваются, поэтому мы будем рассматривать те значения, которые уже устоялись в интернете и используются чаще других.

Пруфлинк: http://www.w3.org/TR/html401/struct/global.html#h-7.4.4.1
(The META element can be used to identify properties of a document (e.g., author, expiration date, a list of key words, etc.) and assign values to those properties. This specification does not define a normative set of properties.)

Атрибут HTTP-EQUIV

META-теги с атрибутом HTTP-EQUIV эквивалентны HTTP-заголовкам. Обычно они управляют действиями броузеров и могут быть использованы для совершенствования информации, выдаваемой обычными заголовками. Теги такой формы могут дать такой же эффект, что и HTTP-заголовки, и на некоторых серверах автоматически могут быть переведены в настоящие HTTP-заголовки.
Некоторые генерируемые сервером поля заголовков не могут быть подменены значениями из META-тегов (в частности Date), другие подменяются только при ненормальном статус-коде (<>200). Когда заголовок не понятен, то значение HTTP-заголовка превалирует над значением META-тегов.

Источник

p0vidl0.info

Кодинг, админинг и прочие развлечения

12 трюков html5 для мобильных устройств

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

1. HTML5 на полный экран

В браузерах android — встроенном до версии 4.3 и других, например Chrome, существует только одно решение данной проблемы. Ширина и высота документа должна соответствовать экрану устройства, тогда нужного эффекта мы можем добиться следующим js кодом:

Google maps использует этот способ для полноэкранного отображения своего контента. Так же, можно легко избежать появления адресной строки при скроле пальцами:

[js]document.addEventListener(«touchmove», function(e) < e.preventDefault() >);[/js]

В браузерах Google Chrome, Firefox OS, Firefox для android, BlackBerry OS 10 и Amazon Silk (браузер, разработанный для Kindle Fire) мы можем использовать W3C Fullscreen API.

Браузеры iPhone iOS, Android, Chrome под Android имеют разные реализации полноэкранного отображения содержимого. IE11 на Windows Mobile еще и требует разрешения на переход в полноэкранных режим.

Разные браузеры требуют применения специфических префиксов, поэтому приходится создавать универсальный код:

[js]var body = document.documentElement;
if (body.requestFullscreen) <
body.requestFullscreen();
> else if (body.webkitrequestFullscreen) <
body.webkitrequestFullscreen();
> else if (body.mozrequestFullscreen) <
body.mozrequestFullscreen();
> else if (body.msrequestFullscreen) <
body.msrequestFullscreen();
>[/js]

Главное, что нужно запомнить: активацию полного экрана можно производить только после действия пользователя, например касания пальцем.

На iPhone, начиная с iOS 7.1, Apple использует атрибут minimal-ui мета-тега viewport, который позволяет отобразить минимальные элементы пользовательского элемента при портретной ориентации и скрыть все элементы пользовательского интерфейса при альбомной ориентации. Функция недоступна на iPad.
Пример использования:

При использовании данной возможности, нужно уделить особое внимание области вдоль краев.

Как определить активацию minimal-ui:

[css]@media (device-height: 568px) and (height: 529px),
(device-height: 480px) and (height: 441px) <
/* minimal-ui is active */
>[/css]

2. Полноэкранный ярлык на домашнем экране

В iOS, на iPhone и iPad, и Chrome на Android, мы можем установить полноэкранный ярлык на домашнем экране. Web-приложение может быть запущено вне браузера. Для использования данной возможности нужно добавить несколько мета-тегов:

В случае с Firefox OS и Firefox на Android, мы можем создать полноэкранное приложение на домашнем столе, создав JSON манифест и используя JavaScript API. В официальной документации очень толковые примеры.

3. Canvas высокого разрешения

Canvas API — bitmap-ориентированный интерфейс, позволяющий работать с изображениями, загруженными из файла. Например, если создать canvas с шириной 200, мы получим изображение шириной 200 точек и в документе оно будет отображено с шириной 200 css-точек, независимо от разрешения.

Это означает, что на iPhone 5S изображение будет отображено шириной 400 реальных точек экрана, а на Nexus 5 — 600 точек.

Если вы хотите создать изображение высокого разрешения, можно просто увеличить оригинал вдвое:

Обратите внимание, что увеличение размера canvas, так же, увеличивает использование памяти и процессора при работе с ними.

4. Цифровая клавиатура для цифровых полей

Как многие уже знают, новые типы элементов HTML, такие как type=email, могут способствовать адаптации виртуальной клавиатуры мобильного устройства к активному полю ввода.

Для элемента type=number, Android и Windows Phone отображают полную цифровую клавиатуру, а iOS только цифры.

Если добавить атрибут pattern=»3*», в iOS мы получим полную цифровую клавиатуру, как на остальных платформах:

Этот же трюк можно использовать и для type=password, для определенных полей:

5. Отзывчивый веб и Windows 8

Если вы сталкиваетесь с адаптивным веб-дизайном, вы используете мета-тег viewport и набор css правил для разных размеров экрана. Однако, для windows 8.x с Internet Explorer, запущенным в полноэкранном (metro) режиме, нужно еще немного волшебства.

Windows 8 и 8.1 позволяет разместить на одном экране браузер и другие полноэкранные приложения, включая классический рабочий стол. В данном случае и когда ширина окна становится меньше 1024 точек, IE автоматически переходит в мобильный режим отображения и пускает по боку все наши правила адаптивной разметки.

Для избежания такого поведения, мы можем использовать css viewport:

[css]@media only screen and (max-width: 400px) <
@-ms-viewport < width: 320px; >
>[/css]

6. Выбор даты и времени

Используя поле , мы на большинстве современных браузеров получим диалог выбора даты и времени. Так было и на мобильных устройствах до появления iOS 7 и Chrome 26 на Android. Начиная с этих версий, браузеры обрабатывают его как простое текстовое поле.

Разработчики этих браузеров не потрудились нормально документировать свойство type=datetime-local, которое заставляет выводить диалог выбора даты и времени:

7. Расширенное редактирование

Стандарт html5 включает новый атрибут элементов: ContentEditable. Он может применяться к любому html элементу, включая

При пользовательской активации такого элемента, появляется виртуальная клавиатура и он становится редактируемым. Для сохранения изменений, нужно обрабатывать атрибут innerHTML элемента.

В iOS пользователь имеет возможность выделять текст жирным, курсивом или подчеркиванием.

[html]

• static item in the hTML

[/html]

8. Все оттенки Safari

Начиная с iOS 7, Safari для iPhone и iPod touch поддерживает возможность смены раскраски фона за полу-прозрачным интерфейсом самого Safari в цвет фона вашего сайта.

Есть простой способ обойти эту особенность и заменить цвет фона на любой другой:

[css]body <
/* for safari’s tint */
background-color: blue;
/* for the document’s body background color */
background-image: linear-gradient(to bottom, red 0%, red 100%);
>[/css]

9. Название ярлыка на домашнем экране

При добавлении ярлыка сайта на домашний экран мобильного устройства, его наименование берется из тега . Из-за особенностей SEO, зачастую в этом теге может быть совсем не то, что мы хотим показать пользователю.

Есть способ задать название ярлыка на домашнем столе мобильного устройства.

Недокументированный тег Safari на iOS:

Для Windows Phone и планшетов на Windows 8.x можно указать название ярлыка используя специальный тег application-name:

К сожалению, мне пока не известен способ указания названия ярлыка для Chrome на Android.

10. Живые заголовки на Windows Phone

Пользователь может закрепить сайт из IE на стартовый экран Windows 8.x или Windows Phone (последние версии). Вы можете создать живой заголовок, обновлять информацию и анимировать значок даже когда сайт не открыт.

Для этого необходимо несколько мета-тегов. Для начала рассмотрим добавление значка:

Для «оживления», мы можем использовать Badge Polling URI (начиная с IE10) или Notification Polling URI (начиная IE11).

Первый может обновлять значок, количество непрочитанных элементов. Второй может отображать новые сообщения и информацию.

В обоих случаях, мы можем указать частоту обновления информации:

Для упрощения работы с живыми плитками, вы можете использовать Live Tile creator от Microsoft или специальный плагин для WordPress.

11. Вкладки без присмотра

Мобильные браузеры выглядят как их старшие собратья, но ведут себя, зачастую, совсем не так. Пример: iOS Safari и его вкладки. Если открыть три вкладки: хабр, gmail и вконтакте, динамическое содержимое будет обновляться только на одной, активной в данный момент вкладке. Никакие js скрипты не будут выполняться на фоновых вкладках, в отличие от десктопных браузеров.

Есть, по крайней мере, один способ это исправить. Можно проверять обновление данных на сервере и изменять название вкладки или выводить алерт, в случае необходимости.

Данный способ основан на обычном мета-теге refresh, который определяет перезагрузку страницы. Safari обрабатывает этот мета-тег даже для фоновых вкладок. И нам осталось только определить интервал перезагрузки страницы.

Применять этот метод нужно только в тех случаях, когда он действительно нужен.

12. После прочтения сжечь

В этой заметке вы узнали о некоторых трюках и недокументированных возможностях мобильных браузеров.

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

Источник