Мета-теги для мобильных устройств-должны ли они использоваться?
мета-теги "Viewport", "MobileOptimized" и "HandheldFriendly" могут использоваться для предоставления соответствующим образом отформатированного HTML-контента для мобильных устройств. Являются ли эти теги хорошими вещами? Они кажутся довольно специфичными для платформы во многих случаях, и даже когда они не специфичны для платформы (видовой экран), они, похоже, требуют определенных атрибутов устройства для правильной работы.
должны ли они использоваться? Где и когда их целесообразно использовать? Есть ли альтернативы (без user-agent признание)?
Примечание: я использую запросы css media для достижения мобильной поддержки, но для этого требуется некоторый UAR, чтобы оптимизировать размер шрифта.
2 ответов:
ответ прост:
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-но Проверьте свои целевые устройства и узнайте.должны ли они быть использовали? Где и когда их целесообразно использовать? Существуют ли альтернативы (без распознавания агента пользователя)?
они должны быть использованы, когда вы хотите, чтобы эффекты, которые они создают - в общем, рассказывать телефонов, что масштаб по умолчанию, чтобы использовать, контролируя изменение размера и т. д. Это хорошее объяснение того, почему вы можете использовать viewport, например:http://davidbcalhoun.com/2010/viewport-metatag - в нем также перечислены другие свойства, которые вы можете установить с помощью viewport и что так и есть.
они только другой способ достижения этих эффектов, без использования этих метатегов, с фанки JS трюки - которые будут медленнее, требуют загрузки скрипта, трудно поддерживать и будет ненадежным. Браузеры, которые не поддерживают
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
- http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
iPhone использует Safari в качестве браузера. У них есть страница разработчика что дает вам некоторую информацию, когда использовать метатег viewport:
например, если ваша веб-страница меньше, чем 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" />еще одна статья, которая может быть интересен для вас список отдельно:" положите ваш контент в мой карман".
Comments