Какая точка "meta viewport user-scalable = no" в API Карт Google

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

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

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

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

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

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

"user-scalable = no" также помогает предотвратить эффект масштабирования для ящиков ввода iOS.