Jaki jest sens „meta viewport user-scalable = no” w interfejsie API Map Google

98

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
btw, Chrome pisze w konsoli „Klucz„ skalowalny przez użytkownika ”nie jest rozpoznawany i ignorowany”. jeśli go użyjesz, nawet z wartością "tak" - OOPS, właśnie zauważyłem, że mam "e" w "skalowalny", jakby mógł mieć "łuski (smok) :-)
— George Birbilis

Odpowiedzi:

110

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.

— Trott
źródło
myślę, że wyłącza tylko powiększanie w iPhonie, iPadzie ... safari. mój android po prostu go ignoruje (część skalowalna przez użytkownika, a nie reszta tagu viewport oczywiście)
— Juan
@Juan To więcej niż tylko rzeczy na iOS / Safari. Założę się, że jest na przykład zaimplementowany w Chrome na Androida. Ale tak, widok okna nie działa w wielu przeglądarkach Androida 2.X.
— Trott
1
Nie rób tego. Powoduje to, że niektóre witryny są bezużyteczne w przeglądarce Firefox dla Androida (i być może innych). Nie możesz być pewien, że Twoja strona będzie poprawnie wyświetlana we wszystkich przeglądarkach, a jeśli usuniesz powiększenie, niektórzy użytkownicy nie będą mogli korzystać z Twojej witryny. Nieco ponad 0,3 sekundy. Yahoo Tech to jeden z przykładów, gdy witryna jest nieczytelna w przeglądarce Firefox dla Androida, ponieważ nie można jej powiększyć.
— Josh
jeszcze jednym interesującym efektem ubocznym user-scalable = no jest to, że rozwiązuje problemy z pozycją: naprawione menu w przeglądarkach Android 2.X (chociaż można użyć -webkit-backface-visibility: hidden;)
— Christian Butzke
46

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

— ehfeng
źródło
z drugiej strony nie jest to dobre dla dostępności dla niepełnosprawnych użytkowników. Uważam, że wytyczne sekcji 508 określają, że użytkownik musi mieć możliwość powiększenia do 200%
— Graham Fowles
9

Z dokumentacji v3 (Podręcznik programisty> Pojęcia> Tworzenie dla urządzeń mobilnych):

Urządzenia z Androidem i iOS obsługują następujący <meta>tag:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

To ustawienie określa, że ​​mapa powinna być wyświetlana na pełnym ekranie i nie powinna być zmieniana przez użytkownika. Zwróć uwagę, że przeglądarka Safari w iPhonie wymaga umieszczenia tego <meta>tagu w <head>elemencie strony.

— stank345
źródło
3

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.

— Horia Rudan
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.