Meta-Tags "Viewport", "MobileOptimized" und "HandheldFriendly" können verwendet werden, um Mobilgeräten entsprechend formatierte HTML-Inhalte bereitzustellen. 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 benötigen, um ordnungsgemäß 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 Unterstützung für Mobilgeräte zu erhalten. Dies erfordert jedoch einige UAR, um die Schriftgröße zu optimieren.
html
mobile-website
Brinxmat
quelle
quelle
Antworten:
Die einfache Antwort lautet:
viewportist gut, die anderen sind ... weniger gut.Ansichtsfenster
viewportist ein weit verbreiteter De-facto-Standard - ursprünglich von Apple für mobile Safari auf dem iPhone entwickelt und von fast allen anderen mobilen Browsern übernommen: Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, FirefoxEinfaches Beispiel für einen Anwendungsfall: Machen Sie die Site auf Mobilgeräten in voller Breite:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>Die anderen beiden sind ältere De-facto-Standards für Feature-Telefone, die im Allgemeinen zu alt sind, um Folgendes zu unterstützen
viewport:HandheldFreundlich
Dieses Tag wurde ursprünglich zur Identifizierung mobiler Inhalte in AvantGo-Browsern verwendet, wurde jedoch zu einem allgemeinen Standard für die Identifizierung mobiler Websites. Es ist jedoch nicht bekannt, welche Browser dieses Meta-Tag unterstützen:
<meta name="HandheldFriendly" content="true"/>MobileOptimized
Dies ist ein Windows-proprietäres Meta-Tag, das schließlich auch als weiteres Mittel zur Identifizierung mobiler Inhalte verwendet wurde. Der Nachteil dieses Tags ist, dass eine bestimmte Breite angegeben werden muss. Auch hier ist nicht bekannt, welche Unterstützung für dieses Tag besteht:
<meta name="MobileOptimized" content="320"/>Zusammenfassung
Verwenden
viewportSie diese Option, es sei denn, Sie müssen ältere Funktionstelefone unterstützen, die diese nicht unterstützen. Verwenden Sie in diesem Fall wahrscheinlich sowohl HandheldFriendly als auch MobileOptimized. Testen Sie jedoch Ihre Zielgeräte und finden Sie es heraus .Sie sollten verwendet werden, wenn Sie die von ihnen erzeugten Effekte verwenden möchten - im Allgemeinen, um den Telefonen mitzuteilen, welcher Standardzoom verwendet werden soll, um die Größenänderung zu steuern usw. Dies ist eine gute Erklärung dafür, warum Sie möglicherweise das Ansichtsfenster verwenden möchten, z. B.: Http: // davidbcalhoun.com/2010/viewport-metatag - listet auch die anderen Eigenschaften auf, die Sie mit dem Ansichtsfenster festlegen können, und deren Funktionsweise.
Die einzige Möglichkeit, diese Effekte zu erzielen, ohne diese Metatags zu verwenden, sind funky JS-Tricks, die langsamer sind, das Laden von Skripten erfordern, schwierig zu warten sind und unzuverlässig sind. Browser, die dies nicht unterstützen
viewport, verfügen wahrscheinlich über eine sehr fehlerhafte JS-Oberfläche zum Anzeigen von Inhalten. Siehe die Quirksmode-Links unten.Verweise
quelle
Das iPhone verwendet Safari als Browser. Sie haben eine Entwicklerseite, die Ihnen einige Informationen gibt, wann Sie das Meta-Tag-Ansichtsfenster verwenden sollen:
Es wird so 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: " Stecken Sie Ihren Inhalt in meine Tasche ".
quelle