В чем смысл 'meta viewport user-scalable = no' в Google Maps API

Question 1

Я использую Google Maps JavaScript API V3, и в официальных примерах вы всегда включаете этот метатег:

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

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

Итак, в чем смысл тега? Я должен оставить это? Должен ли я попытаться обнаружить агент браузера и показать его только для настольных браузеров?

Если вы хотите изучить плагин, вы можете скачать его , просмотреть источник или увидеть живой пример .

Question 2

На многих устройствах (таких как iPhone) он не позволяет пользователю использовать масштабирование браузера. Если у вас есть карта и браузер выполняет масштабирование, то пользователь увидит большое пиксельное изображение с огромными пиксельными метками. Идея состоит в том, что пользователь должен использовать масштабирование, предоставляемое Google Maps. Не уверен в каком-либо взаимодействии с вашим плагином, но для этого он нужен.

Совсем недавно, как отмечает @ehfeng в своем ответе, Chrome для Android (и, возможно, другие) воспользовались тем фактом, что в собственном браузере нет масштабирования страниц с таким установленным тегом области просмотра. Это позволяет им избавиться от пугающей 300-миллисекундной задержки событий касания, которую браузер заставляет ждать и посмотреть, не превратится ли ваше одиночное касание в двойное касание. (Подумайте о «одиночном щелчке» и «двойном щелчке».) Однако, когда этот вопрос был задан изначально (в 2011 году), это не соответствовало действительности ни в одном мобильном браузере. Это просто добавленная удивительность, которая случайно возникла совсем недавно.

Question 3

Отключение масштабируемого пользователем (а именно, возможность двойного нажатия для увеличения) позволяет браузеру уменьшить задержку щелчка. В браузерах с поддержкой сенсорного ввода, когда пользователь ожидает двойного касания для увеличения, браузер обычно ждет 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 мс

Question 4

Из документации v3 (Руководство разработчика> Концепции> Разработка для мобильных устройств):

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

Question 5

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

«user-scalable = no» также помогает предотвратить эффект увеличения в полях ввода iOS.

Answer 1

Я использую Google Maps JavaScript API V3, и в официальных примерах вы всегда включаете этот метатег:

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

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

Итак, в чем смысл тега? Я должен оставить это? Должен ли я попытаться обнаружить агент браузера и показать его только для настольных браузеров?

Если вы хотите изучить плагин, вы можете скачать его , просмотреть источник или увидеть живой пример .

Answer 2

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

Джордж Бирбилис

Answer 3

На многих устройствах (таких как iPhone) он не позволяет пользователю использовать масштабирование браузера. Если у вас есть карта и браузер выполняет масштабирование, то пользователь увидит большое пиксельное изображение с огромными пиксельными метками. Идея состоит в том, что пользователь должен использовать масштабирование, предоставляемое Google Maps. Не уверен в каком-либо взаимодействии с вашим плагином, но для этого он нужен.

Совсем недавно, как отмечает @ehfeng в своем ответе, Chrome для Android (и, возможно, другие) воспользовались тем фактом, что в собственном браузере нет масштабирования страниц с таким установленным тегом области просмотра. Это позволяет им избавиться от пугающей 300-миллисекундной задержки событий касания, которую браузер заставляет ждать и посмотреть, не превратится ли ваше одиночное касание в двойное касание. (Подумайте о «одиночном щелчке» и «двойном щелчке».) Однако, когда этот вопрос был задан изначально (в 2011 году), это не соответствовало действительности ни в одном мобильном браузере. Это просто добавленная удивительность, которая случайно возникла совсем недавно.

Answer 4

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

Хуан

Answer 5

@Juan Это больше, чем просто iOS / Safari. Готов поспорить, что это реализовано, например, в Chrome для Android. Но да, во многих браузерах Android 2.X не работает область просмотра.

Тротт

Answer 6

1

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

Джош

Answer 7

Еще один интересный побочный эффект user-scalable = no заключается в том, что он устраняет проблемы с позиционированием: фиксированные меню в браузерах Android 2.X (хотя вы можете использовать -webkit-backface-visibility: hidden;)

Кристиан Бутцке,

Answer 8

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