Какой смысл «метапорт-пользователя-масштабируемый = нет» в API Карт Google - PullRequest
89 голосов
/ 18 июня 2011

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

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

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

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

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

Ответы [ 4 ]

100 голосов
/ 18 июня 2011

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

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

39 голосов
/ 04 июня 2013

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

9 голосов
/ 21 июля 2013

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

Устройства Android и iOS соответствуют следующему тегу <meta>:

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

Этот параметр указывает, что карта должна отображаться в полноэкранном режиме и пользователь не должен изменять ее размер.Обратите внимание, что браузер iPhone Safari требует, чтобы этот тег <meta> был включен в элемент <head> страницы.

1 голос
/ 30 сентября 2014

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

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

...