it-swarm.com.de

Meta-Tags für Handys - sollten sie verwendet werden?

Mit den Meta-Tags "Viewport", "MobileOptimized" und "HandheldFriendly" können mobile Geräte mit entsprechend formatiertem HTML-Inhalt versorgt werden. Sind diese Tags gute Dinge? In vielen Fällen scheinen sie ziemlich plattformspezifisch zu sein, und selbst wenn sie nicht plattformspezifisch sind (Ansichtsfenster), scheinen sie gerätespezifische Attribute zu erfordern, um richtig zu funktionieren.

Sollten sie verwendet werden? Wo und wann ist es angebracht, sie zu verwenden? Gibt es Alternativen (ohne Benutzeragentenerkennung)?

Hinweis: Ich habe CSS-Medienabfragen verwendet, um die Unterstützung für Mobilgeräte zu erreichen. Dies erfordert jedoch eine gewisse UAR, um die Schriftgröße zu optimieren.

64
brinxmat

Die einfache Antwort lautet: viewport ist gut, die anderen sind ... weniger gut.

ansichtsfenster

viewport ist ein weit verbreiteter De-facto-Standard - ursprünglich erstellt von Apple für Mobile Safari auf dem iPhone, wurde von fast allen anderen mobilen Browsern übernommen : Opera Handy, iPhone, Android, Iris, Internet Explorer, BlackBerry, Obigo, Firefox

Einfaches Beispiel für einen Anwendungsfall: Stellen Sie die Site auf Mobilgeräten auf die volle Breite ein:

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

Die anderen beiden sind ältere De-facto-Standards für Funktionstelefone, die im Allgemeinen zu alt sind, um viewport zu unterstützen:

HandheldFriendly

Dieses Tag wurde ursprünglich zur Identifizierung von mobilen Inhalten in AvantGo-Browsern verwendet, wurde jedoch zu einem allgemeinen Standard für die Identifizierung von mobilen Websites. Es ist jedoch nicht bekannt, welche Browser dieses Metatag unterstützen:

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

MobileOptimized

Dies ist ein Windows-geschütztes Meta-Tag, das schließlich auch als weiteres Mittel zur Identifizierung von mobilen Inhalten verwendet wurde. Der Nachteil dieses Tags ist, dass eine bestimmte Breite angegeben werden muss. Auch hier ist nicht bekannt, wie die Unterstützung für dieses Tag lautet:

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

Zusammenfassung

Verwenden Sie viewport, es sei denn, Sie brauchen unterstützen ältere Funktionstelefone, die dies nicht unterstützen. In diesem Fall verwenden Sie wahrscheinlich HandheldFriendly & MobileOptimized - aber Teste deine Zielgeräte und finde es heraus .

Sollten sie verwendet werden? Wo und wann ist es angebracht, sie zu verwenden? Gibt es Alternativen (ohne Benutzeragentenerkennung)?

Sie sollten verwendet werden, wenn Sie die Effekte verwenden möchten, die sie erstellen - im Allgemeinen, um dem Telefon mitzuteilen, welcher Standardzoom verwendet werden soll, die Größenänderung zu steuern usw. Dies ist eine gute Erklärung dafür, warum Sie das Ansichtsfenster möglicherweise verwenden möchten. Beispiel: http://davidbcalhoun.com/2010/viewport-metatag - Es werden auch die anderen Eigenschaften aufgelistet, die Sie mit dem Ansichtsfenster festlegen können, und was sie tun.

Die einzige andere Möglichkeit, diese Effekte zu erzielen, ohne diese Metatags zu verwenden, sind flippige JS-Tricks - die langsamer sind, das Laden von Skripten erfordern, schwierig zu warten und unzuverlässig sind. Browser, die viewport nicht unterstützen, haben wahrscheinlich eine sehr fehlerhafte JS-Oberfläche für Viewport-bezogene Inhalte. Siehe die Quirksmode-Links unten.

Verweise

129
Duncan Lock

Das iPhone verwendet Safari als Browser. Sie haben eine Entwicklerseite , die Ihnen einige Informationen zur Verwendung des Meta-Tag-Ansichtsfensters gibt:

Wenn Ihre Webseite beispielsweise schmaler als 980 Pixel ist, sollten Sie die Breite des Ansichtsfensters so einstellen, dass sie zu Ihrem Webinhalt passt

Es wird wie folgt verwendet:

<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" />

Ein weiterer Artikel, der für Sie interessant sein könnte, ist A list Apart: " Legen Sie Ihren Inhalt in meine Tasche ".

4
Martin Thoma