Meta-tagi dla telefonów komórkowych-czy powinny być używane?
Meta-tagi "Viewport", "MobileOptimized" i "HandheldFriendly" mogą być używane do dostarczania odpowiednio sformatowanej zawartości HTML na urządzenia mobilne. Czy te znaczniki są dobre? W wielu przypadkach wydają się dość specyficzne dla platformy, a nawet jeśli nie są specyficzne dla platformy( viewport), wydają się wymagać specyficznych atrybutów urządzenia, aby działać poprawnie.
Czy powinny być używane? Gdzie i kiedy należy z nich korzystać? Czy istnieją alternatywy (bez user-agent uznanie)?
Uwaga: używam CSS media queries, aby uzyskać wsparcie dla urządzeń mobilnych, ale wymaga to trochę UAR, aby uzyskać optymalizację rozmiaru czcionki.
2 answers
Prosta odpowiedź brzmi: viewport jest dobra, inni są... mniej dobrze.
Viewport
viewport jest szeroko obsługiwany de facto standard-pierwotnie stworzony przez Apple dla mobilnego Safari na iPhone ' a, został przyjęty przez prawie wszystkie inne przeglądarki mobilne: Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox
Prosty przykład użycia: zrobić witrynę pełną szerokość na telefon komórkowy:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Pozostałe dwa są starszymi de facto "standardami" dla " funkcji telefony " - które generalnie są za stare Na obsługę viewport:
HandheldFriendly
Ten tag był pierwotnie używany do identyfikacji treści mobilnych w przeglądarkach AvantGo, ale stał się ogólnym standardem identyfikacji stron mobilnych. Jednak nie wiadomo, jaki zakres przeglądarek obsługuje ten meta tag:
<meta name="HandheldFriendly" content="true"/>
MobileOptimized
Jest to zastrzeżony dla systemu Windows meta tag, który ostatecznie stał się również używany jako inny sposób identyfikacji treści mobilnych. Wady z tym tagiem jest to, że należy podać określoną szerokość. Ponownie nie wiadomo, jakie jest wsparcie dla tego tagu:
<meta name="MobileOptimized" content="320"/>
Podsumowanie
Używaj viewport chyba że potrzebujesz do obsługi starszych telefonów funkcyjnych, które go nie obsługują, w takim przypadku prawdopodobnie używaj zarówno HandheldFriendly , jak i MobileOptimized - ale przetestuj swoje urządzenia docelowe i dowiedz się.
Czy powinny być używane? Gdzie i kiedy należy z nich korzystać? Czy istnieją alternatywy (bez user-agent uznanie)?
Powinny być używane, gdy chcesz uzyskać efekty, które tworzą-ogólnie mówiąc, informując telefony, jakiego domyślnego zoomu użyć, kontrolując zmianę rozmiaru itp. Jest to dobre wyjaśnienie, dlaczego warto użyć viewport, na przykład: http://davidbcalhoun.com/2010/viewport-metatag - wyświetla również inne właściwości, które można ustawić za pomocą viewport i co one robią.
One tylko inny sposób, aby osiągnąć te efekty, bez użycia tych metatagów, jest z funky Sztuczki JS-które będą wolniejsze, będą wymagały wczytywania skryptów, będą trudne w utrzymaniu i będą zawodne. Przeglądarki, które nie obsługują viewport, prawdopodobnie będą miały bardzo wadliwy interfejs JS do obsługi viewport; zobacz poniższe linki do quirksmode.
Referencje
- Dlanaprawdę obszerne wyjaśnienie tego całego tematu, Zobacz 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/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-02 10:31:39
IPhone używa Safari jako przeglądarki. Mają stronę programisty , która daje pewne informacje, kiedy używać widoku znacznika meta:
Na przykład, jeśli Twoja strona jest węższe niż 980 pikseli, wtedy ty powinien ustawić szerokość widoku aby dopasować swoją zawartość www
Używa się go tak:
<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" />
Kolejny artykuł, który może być dla Ciebie interesujący, to lista obok: "umieść swoje treści w Moja Kieszeń ".
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-15 14:02:23