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

Ответ 1

Простой ответ: viewport хорош, другие... менее хороши.

окна просмотра

viewport - это широко поддерживаемый де-факто стандарт - первоначально созданный Apple для мобильного Safari на iPhone, он был принят почти всеми другие мобильные браузеры: Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox

Простой пример использования: сделать сайт полной шириной на мобильном устройстве:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

Остальные два являются более старыми "стандартами" для "функциональных телефонов", которые, как правило, слишком стары для поддержки viewport:

HandheldFriendly

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

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

MobileOptimized

Это метатег Windows-запатентованный, который также в конечном итоге стал использоваться в качестве другого средства идентификации мобильного контента. Недостатком этого тега является указание конкретной ширины. Опять же, неизвестно, какая поддержка для этого тега:

<meta name="MobileOptimized" content="320"/> 

Резюме

Используйте viewport, если вам не нужна поддержка старых телефонов с функциями, которые его не поддерживают, и в этом случае, вероятно, используйте как HandheldFriendly, так и MobileOptimized, но проверьте целевые устройства и узнайте.

Должны ли они использоваться? Где и когда целесообразно их использовать? Существуют ли альтернативы (без распознавания пользовательских агентов)?

Они должны использоваться, когда вы хотите, чтобы они создавали эффекты - как правило, сообщать телефоны о том, какой масштаб масштабирования использовать, контролировать повторную калибровку и т.д. Это хорошее объяснение того, почему вы, возможно, захотите использовать окно просмотра, например: http://davidbcalhoun.com/2010/viewport-metatag - в нем также перечислены другие свойства, которые вы можете установить с помощью видового экрана и что они делают.

Они только другим способом достижения этих эффектов, не используя эти метатеги, - это фанки JS-трюки, которые будут медленнее, требуют загрузки script, будут трудно поддерживать и будут ненадежными. Браузеры, которые не поддерживают viewport, вероятно, будут иметь очень плохой интерфейс JS для связанных с виджетами материалов; см. ниже ссылки на quirksmode.

Ссылки

• Для действительно полного объяснения всего этого предмета см. http://www.quirksmode.org/mobile/viewports.html и http://www.quirksmode.org/mobile/viewports2.html
• https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
• http://davidbcalhoun.com/tag/mobileoptimized
• http://www.quirksmode.org/mobile/ и http://www.quirksmode.org/mobile/tableViewport.html li >
• http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

Ответ 2

В iPhone используется Safari. У них есть страница разработчика которая дает вам некоторую информацию о том, как использовать окно просмотра метатега:

Например, если ваша веб-страница чем 980 пикселей, тогда вы следует установить ширину окна просмотра для соответствия вашему веб-контенту

Он используется следующим образом:

<META name="viewport" content="width = 650" />

<META name="viewport" content="width = device-width" />

<META name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

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