Який сенс у мета-вікні перегляду user-scalable = no в API Карт Google

98

Я використовую API Карт Google JavaScript V3, і на офіційних прикладах завжди ви включаєте цей метатег:

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

Більшість прикладів сторонніх розробників, які я бачив, теж роблять це. Однак я написав плагін, використовуючи його, і один з моїх користувачів сказав мені, що це заважає йому збільшувати та зменшувати масштаб на своєму мобільному пристрої . У мене немає мобільного пристрою для тестування, і жоден з моїх пошуків не виявив корисної інформації.

Отже, який сенс тегу? Чи слід залишити це? Чи слід намагатися виявити агент браузера і показувати його лише для настільних браузерів?

Якщо ви хочете вивчити плагін, ви можете завантажити його , переглянути джерело або переглянути приклад у реальному часі .

— Ян Данн
джерело

До речі, Chrome пише в консолі "Ключ" масштабований користувачем "не розпізнається і ігнорується". якщо ви використовуєте його, навіть зі значенням "так" - OOPS, я просто помітив, що я маю "e" у "масштабованому", ніби він може мати "ваги (дракон) :-)

— Джордж Бірбіліс

110

На багатьох пристроях (наприклад, iPhone) це заважає користувачеві використовувати масштабування браузера. Якщо у вас є карта, а браузер робить масштабування, користувач побачить велике піксельне зображення із величезними пікселізованими мітками. Ідея полягає в тому, що користувач повинен використовувати масштабування, надане Google Maps. Не впевнений у взаємодії з вашим плагіном, але саме для цього він потрібен.

Зовсім недавно, як зазначає @ehfeng у своїй відповіді, Chrome для Android (і, можливо, інші) скористалися тим фактом, що немає власного браузера, що масштабує сторінки з таким тегом області перегляду. Це дозволяє їм позбутися страшної затримки 300 мс при подіях дотику, які браузер вимагає, щоб зачекати і перевірити, чи не стане ваш єдиний дотик подвійним. (Подумайте про "один клік" та "подвійний клік".) Однак, коли це питання було спочатку задане (у 2011 році), це не відповідало дійсності жодного мобільного браузера. Це просто додана дивовижність, яка випадково виникла зовсім недавно.

— Тротт
джерело

я думаю, це відключає лише масштабування iphone, ipad .. сафарі. мій андроїд просто ігнорує (масштабована користувачем частина, а не решта тегу області перегляду, звичайно)

— Хуан,

@Juan Це більше, ніж просто iOS / Safari. Б'юся об заклад, це реалізовано, наприклад, у Chrome для Android. Але так, вміст області перегляду не працює у багатьох браузерах Android 2.X.

— Тротт,

1

Не роби цього. Це робить деякі веб-сайти непридатними для використання у Firefox для Android (і, можливо, інших). Ви не можете бути впевнені, що ваша сторінка буде відображатися правильно у всіх браузерах, і якщо ви вилучите масштабування, деякі користувачі не зможуть користуватися вашим сайтом. Трохи більше 0,3 секунди. Yahoo Tech - один із прикладів сайту, який не читається у Firefox для Android, оскільки його не можна збільшити.

— Джош

ще один цікавий побічний ефект масштабованого користувачем = ні, це те, що він виправляє проблеми з позицією: виправлені меню у браузерах Android 2.X (хоча ви могли б використовувати -webkit-backface-visibility: hidden;)

— Крістіан Буцке

46

Вимкнення масштабованого користувачем (а саме можливості подвійного натискання для збільшення) дозволяє браузеру зменшити затримку клацання. У браузерах із сенсорним увімкненням, коли користувач очікує, що подвійне натискання збільшиться, браузер зазвичай чекає 300 мс, перш ніж запускати подію клацання, чекаючи, щоб побачити, чи користувач двічі торкнеться. Вимкнення масштабованого користувача дозволяє браузеру Chrome негайно запускати подію клацання, що покращує роботу користувачів.

З сесії Google IO 2013 https://www.youtube.com/watch?feature=player_embedded&v=DujfpXOKUp8#t=1435s

Оновлення: це вже не так, <meta name="viewport" content="width=device-width">достатньо, щоб прибрати затримку 300 мс

— ehfeng
джерело

з іншого боку, це погано для доступності для користувачів з обмеженими можливостями. Я вважаю, що в розділі 508 вказівки зазначено, що користувач повинен мати можливість збільшувати до 200%

— Грем Фоулз,

9

З документації v3 (Посібник розробника> Концепції> Розробка для мобільних пристроїв):

Пристрої Android та iOS поважають такий <meta>тег:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
Цей параметр визначає, що карта повинна відображатися на весь екран і не повинна змінюватись користувачем. Зверніть увагу, що браузер Safari iPhone вимагає, щоб цей <meta>тег був включений до <head>елемента сторінки .

— stank345
джерело

3

Ви не повинні використовувати вікно перегляду мета - тег на всіх , якщо ваш дизайн не відповідає. Неправильне використання цього тегу може призвести до пошкоджених макетів. Ви можете прочитати цю статтю, щоб отримати документацію про те, чому не слід використовувати цей тег, якщо ви не знаєте, що робите. http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

"user-scalable = no" також допомагає запобігти ефекту збільшення на полях введення iOS.

— Хорія Рудан
джерело