Używam Google Maps JavaScript API V3 i oficjalne przykłady zawsze zawierają ten metatag:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
Większość przykładów innych firm, które widziałem, również to robi. Napisałem jednak wtyczkę, używając jej, a jeden z moich użytkowników powiedział mi, że uniemożliwia mu to powiększanie i pomniejszanie jego urządzenia mobilnego . Nie mam urządzenia mobilnego do przetestowania, a żadne z moich wyszukiwań nie ujawniło żadnych przydatnych informacji.
Więc jaki jest sens tego tagu? Powinienem to zostawić? Czy powinienem spróbować wykryć agenta przeglądarki i pokazać go tylko w przeglądarkach na komputer?
Jeśli chcesz przetestować wtyczkę, możesz ją pobrać , przejrzeć źródło lub zobaczyć przykład na żywo .
mobile
google-maps-api-3
viewport
meta-tags
Ian Dunn
źródło
źródło
Odpowiedzi:
Na wielu urządzeniach (takich jak iPhone) uniemożliwia użytkownikowi korzystanie z zoomu przeglądarki. Jeśli masz mapę, a przeglądarka dokonuje powiększenia, wówczas użytkownik zobaczy duży, stary pikselowany obraz z ogromnymi pikselowymi etykietami. Chodzi o to, aby użytkownik korzystał z zoomu zapewnianego przez Google Maps. Nie jestem pewien co do interakcji z Twoją wtyczką, ale po to służy.
Niedawno, jak zauważa @ehfeng w swojej odpowiedzi, Chrome dla Androida (i być może inni) wykorzystali fakt, że nie ma natywnej przeglądarki powiększającej strony z tak ustawionym tagiem viewport. To pozwala im pozbyć się przerażającego opóźnienia 300 ms w zdarzeniach dotykowych, które przeglądarka potrzebuje, aby czekać i sprawdzić, czy pojedynczy dotyk zakończy się podwójnym dotknięciem. (Pomyśl „pojedyncze kliknięcie” i „podwójne kliknięcie”). Kiedy jednak pierwotnie zadano to pytanie (w 2011 r.), Nie było to prawdą w żadnej przeglądarce mobilnej. To tylko dodana wspaniałość, która przypadkowo pojawiła się niedawno.
źródło
Wyłączenie funkcji skalowania przez użytkownika (a mianowicie możliwości dwukrotnego dotknięcia w celu powiększenia) umożliwia przeglądarce zmniejszenie opóźnienia kliknięcia. W przeglądarkach obsługujących dotyk, gdy użytkownik spodziewa się, że dwukrotne dotknięcie spowoduje powiększenie, przeglądarka zazwyczaj czeka 300 ms przed uruchomieniem zdarzenia kliknięcia, czekając na sprawdzenie, czy użytkownik dwukrotnie dotknie. Wyłączenie funkcji skalowania przez użytkownika umożliwia przeglądarce Chrome natychmiastowe wywołanie zdarzenia kliknięcia, co zapewnia lepsze wrażenia użytkownika.
Z sesji Google IO 2013 https://www.youtube.com/watch?feature=player_embedded&v=DujfpXOKUp8#t=1435s
Aktualizacja: to już nieprawda,
<meta name="viewport" content="width=device-width">
wystarczy, aby usunąć opóźnienie 300 msźródło
Z dokumentacji v3 (Podręcznik programisty> Pojęcia> Tworzenie dla urządzeń mobilnych):
źródło
Nie należy stosować tag rzutni meta w ogóle , jeśli projekt nie reaguje. Niewłaściwe użycie tego tagu może spowodować uszkodzenie układów. Możesz przeczytać ten artykuł, aby uzyskać dokumentację dotyczącą tego, dlaczego nie powinieneś używać tego tagu, chyba że wiesz, co robisz. http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
„user-scalable = no” pomaga również zapobiegać efektowi powiększenia w polach wejściowych iOS.
źródło