Apa gunanya 'meta viewport user-scalable = no' di Google Maps API

98

Saya menggunakan Google Maps JavaScript API V3 dan contoh resminya selalu menyertakan tag meta ini:

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

Sebagian besar contoh pihak ketiga yang pernah saya lihat juga melakukannya. Saya menulis plugin menggunakannya, dan salah satu pengguna saya memberi tahu saya bahwa itu mencegahnya untuk memperbesar dan memperkecil perangkat selulernya . Saya tidak memiliki perangkat seluler untuk diuji, dan tidak ada pencarian saya yang mengungkapkan informasi yang berguna.

Jadi, apa gunanya tag itu? Haruskah saya membiarkannya? Haruskah saya mencoba mendeteksi agen browser dan hanya menampilkannya untuk browser desktop?

Jika Anda ingin memeriksa plugin, Anda dapat mendownloadnya , menelusuri sumbernya atau melihat contoh langsung .

mobile google-maps-api-3 viewport meta-tags Ian Dunn
sumber
btw, Chrome menulis di konsol "Kunci" berskala pengguna "tidak dikenali dan diabaikan." jika Anda menggunakannya, bahkan dengan nilai "ya" - OOPS, baru saja saya perhatikan saya memiliki "e" dalam "dapat diskalakan", seolah-olah dapat memiliki "sisik (naga) :-)
George Birbilis

Jawaban:

110

Pada banyak perangkat (seperti iPhone), ini mencegah pengguna menggunakan zoom browser. Jika Anda memiliki peta dan browser melakukan zooming, maka pengguna akan melihat gambar piksel besar dengan label piksel besar. Idenya adalah bahwa pengguna harus menggunakan zoom yang disediakan oleh Google Maps. Tidak yakin tentang interaksi apa pun dengan plugin Anda, tetapi untuk itulah plugin itu ada.

Baru-baru ini, seperti yang dicatat @ehfeng dalam jawabannya, Chrome untuk Android (dan mungkin lainnya) telah memanfaatkan fakta bahwa tidak ada browser asli yang memperbesar halaman dengan tag viewport yang disetel seperti itu. Hal ini memungkinkan mereka untuk menghilangkan penundaan 300ms yang ditakuti pada peristiwa sentuhan yang diperlukan browser untuk menunggu dan melihat apakah satu sentuhan Anda akan berakhir menjadi sentuhan ganda. (Pikirkan "klik tunggal" dan "klik dua kali".) Namun, ketika pertanyaan ini pertama kali diajukan (pada tahun 2011), ini tidak benar di browser seluler mana pun. Itu hanya menambah keangkeran yang secara kebetulan muncul baru-baru ini.

Trott
sumber
saya pikir itu hanya menonaktifkan zoom di iphone, ipad .. barang safari. android saya hanya mengabaikannya (bagian yang dapat diskalakan pengguna, tentu saja bukan sisa tag viewport)
Juan
@Juan Ini lebih dari sekedar barang iOS / Safari. Saya yakin ini diterapkan di Chrome untuk Android, misalnya. Tapi ya, area pandang tidak berfungsi di banyak browser Android 2.X.
Trott
1
Jangan lakukan itu. Itu membuat beberapa situs web tidak dapat digunakan di Firefox untuk Android (dan mungkin yang lain). Anda tidak dapat memastikan bahwa halaman Anda akan ditampilkan dengan benar di semua browser, dan jika Anda menghapus zoom, beberapa pengguna tidak akan dapat menggunakan situs Anda. Lebih dari 0,3 detik. Yahoo Tech adalah salah satu contoh situs yang tidak bisa dibaca di Firefox untuk Android karena tidak bisa di-zoom.
Josh
satu lagi efek samping yang menarik dari user-scalable = no adalah bahwa itu memperbaiki masalah dengan posisi: menu tetap pada browser Android 2.X (meskipun Anda dapat menggunakan -webkit-backface-visibility: hidden;)
Christian Butzke
46

Menonaktifkan skalabel pengguna (yaitu, kemampuan ketuk dua kali untuk memperbesar) memungkinkan browser mengurangi penundaan klik. Di browser yang mengaktifkan sentuhan, saat pengguna mengharapkan ketuk dua kali untuk memperbesar, browser biasanya menunggu 300 md sebelum mengaktifkan peristiwa klik, menunggu untuk melihat apakah pengguna akan mengetuk dua kali. Menonaktifkan skalabel pengguna memungkinkan browser Chrome untuk segera mengaktifkan peristiwa klik, memungkinkan pengalaman pengguna yang lebih baik.

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

Pembaruan: itu tidak benar lagi, <meta name="viewport" content="width=device-width">sudah cukup untuk menghapus penundaan 300ms

ehfeng
sumber
di sisi lain, ini tidak baik untuk aksesibilitas bagi pengguna penyandang disabilitas. Saya percaya bahwa pedoman bagian 508 menetapkan bahwa pengguna harus dapat memperbesar hingga 200%
Graham Fowles
9

Dari dokumentasi v3 (Panduan Pengembang> Konsep> Mengembangkan untuk Perangkat Seluler):

Perangkat Android dan iOS mengikuti <meta>tag berikut :

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

Pengaturan ini menetapkan bahwa peta harus ditampilkan dalam layar penuh dan tidak boleh diubah ukurannya oleh pengguna. Perhatikan bahwa browser Safari iPhone mengharuskan <meta>tag ini disertakan dalam <head>elemen halaman .

stank345
sumber
3

Anda tidak boleh menggunakan tag meta viewport sama sekali jika desain Anda tidak responsif. Menyalahgunakan tag ini dapat menyebabkan tata letak rusak. Anda dapat membaca artikel ini untuk dokumentasi tentang mengapa Anda harus menggunakan tag ini kecuali Anda tahu apa yang Anda lakukan. http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

"user-scalable = no" juga membantu mencegah efek zoom-in pada kotak input iOS.

Horia Rudan
sumber