Google Haritalar API'sindeki "meta viewport user-scalable = no" nun amacı nedir?

99

Google Haritalar JavaScript API V3'ü kullanıyorum ve resmi örnekler her zaman şu meta etiketi eklemenizi sağladı:

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

Gördüğüm üçüncü taraf örneklerinin çoğu da bunu yapıyor. Yine de onu kullanarak bir eklenti yazdım ve kullanıcılarımdan biri bunun mobil cihazında yakınlaştırma ve uzaklaştırma yapmasını engellediğini söyledi . Test edebileceğim bir mobil cihazım yok ve aramalarımın hiçbiri yararlı bir bilgi vermedi.

Öyleyse, etiketin amacı nedir? Onu içeride bırakmalı mıyım? Tarayıcı aracısını algılamaya ve onu yalnızca masaüstü tarayıcılar için göstermeye çalışmalı mıyım?

Eklentiyi incelemek isterseniz şunları yapabilirsiniz indirmek , kaynak taramak veya canlı örneğe bakın .

mobile  google-maps-api-3  viewport  meta-tags 
— Ian Dunn
kaynak
btw, Chrome konsola "" Kullanıcı tarafından ölçeklenebilir "anahtarı tanınmıyor ve yok sayılıyor." Eğer kullanırsanız, "evet" değeriyle bile - OOPS, sanki "ölçekleri (bir ejderha) olabilirmiş gibi" ölçeklenebilir "de" e "ye sahip olduğumu fark ettim :-)
— George Birbilis

Yanıtlar:

110

Birçok cihazda (iPhone gibi), kullanıcının tarayıcının yakınlaştırmasını kullanmasını engeller. Bir haritanız varsa ve tarayıcı yakınlaştırmayı yapıyorsa, kullanıcı büyük pikselli etiketlere sahip büyük, pikselli bir görüntü görecektir. Buradaki fikir, kullanıcının Google Haritalar tarafından sağlanan yakınlaştırmayı kullanmasıdır. Eklentinizle herhangi bir etkileşimden emin değilim, ancak bunun için var.

Daha yakın bir zamanda, @ehfeng'in cevabında belirttiği gibi, Android için Chrome (ve belki de diğerleri), böyle bir görüntü alanı etiketi olan sayfalarda yerel tarayıcı yakınlaştırma olmadığı gerçeğinden yararlandı. Bu, tarayıcının beklemesi gereken dokunma olaylarındaki korkunç 300 ms gecikmeden kurtulmalarına ve tek dokunuşunuzun çift dokunuşla sonuçlanıp sonuçlanmayacağını görmelerine olanak tanır. ("Tek tıklama" ve "çift tıklama" seçeneğini düşünün.) Ancak, bu soru ilk sorulduğunda (2011'de), bu hiçbir mobil tarayıcı için doğru değildi. Daha yakın zamanda tesadüfen ortaya çıkması da ek olarak harikadır.

— Trott
kaynak
bence sadece iphone, ipad .. safari şeylerinde yakınlaştırmayı devre dışı bırakır. androidim onu ​​yok sayıyor (kullanıcı tarafından ölçeklendirilebilen kısım, elbette görüntü alanı etiketinin geri kalanını değil)
— Juan
@Juan Bu iOS / Safari'den daha fazlası. Örneğin, Android için Chrome'da uygulandığına bahse girerim. Ancak evet, görüntü alanı öğeleri birçok Android 2.X tarayıcısında çalışmıyor.
— Trott
1
Bunu yapma. Bazı web sitelerini Android için Firefox'ta (ve belki diğerlerinde) kullanılamaz hale getirir. Sayfanızın tüm tarayıcılarda doğru görüntüleneceğinden emin olamazsınız ve yakınlaştırmayı kaldırırsanız bazı kullanıcılar sitenizi kullanamayacaktır. 0,3 saniyenin biraz üzerinde. Yahoo Tech, yakınlaştırılamadığı için Android için Firefox'ta okunamayan bir siteye bir örnektir.
— Josh
Android 2.X tarayıcılarda fiks menüler: kullanıcı ölçeklenebilir = biri daha ilginç bir yan etkisi yok o pozisyonu sorunları giderir olmasıdır (-webkit-arka yüz-görünürlük kullanabilirsiniz gerçi: hidden;)
— Christian Butzke
47

Kullanıcı tarafından ölçeklenebilirliği devre dışı bırakmak (yani, yakınlaştırmak için çift dokunma yeteneği), tarayıcının tıklama gecikmesini azaltmasına olanak tanır. Dokunma etkin tarayıcılarda, kullanıcı çift dokunmanın yakınlaştırmasını beklediğinde, tarayıcı tıklama olayını tetiklemeden önce genellikle 300 ms bekler ve kullanıcının iki kez dokunup dokunmayacağını bekler. Kullanıcı tarafından ölçeklenebilirliğin devre dışı bırakılması, Chrome tarayıcının tıklama olayını anında tetiklemesine ve daha iyi bir kullanıcı deneyimi sağlamasına olanak tanır.

Google IO 2013 oturumundan https://www.youtube.com/watch?feature=player_embedded&v=DujfpXOKUp8#t=1435s

Güncelleme: artık doğru değil, <meta name="viewport" content="width=device-width">300 ms gecikmeyi kaldırmak için yeterli

— ehfeng
kaynak
diğer yandan bu, engelli kullanıcılar için erişilebilirlik açısından iyi değildir. Bölüm 508 yönergelerinin bir kullanıcının% 200'e kadar yakınlaştırma yapabilmesi gerektiğini belirttiğine inanıyorum
— Graham Fowles
10

Gönderen v3 belgelerinde (Geliştirici Kılavuzu'nda> Kavramlar> Mobil Cihazlar için Developing):

Android ve iOS cihazlar aşağıdaki <meta>etikete uyar:

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

Bu ayar, haritanın tam ekran görüntülenmesi gerektiğini ve kullanıcı tarafından yeniden boyutlandırılmaması gerektiğini belirtir. İPhone'un Safari tarayıcısının bu <meta>etiketin sayfanın <head>öğesi içinde olmasını gerektirdiğini unutmayın .

— stank345
kaynak
3

Sen görünüm meta etiketi kullanmak gerektiğini hiç tasarım duyarlı değilse. Bu etiketi yanlış kullanmak, bozuk düzenlere neden olabilir. Ne yaptığınızı bilmiyorsanız neden bu etiketi kullanmanız gerektiğiyle ilgili belgeler için bu makaleyi okuyabilirsiniz. http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

"user-scalable = no", iOS giriş kutularında yakınlaştırma etkisini önlemeye de yardımcı olur.

— Horia Rudan
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.