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

98

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

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

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

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

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

mobile  google-maps-api-3  viewport  meta-tags 
— Ян Данн
источник
кстати, Chrome пишет в консоли "Ключ" масштабируемый пользователем "не распознается и игнорируется." если вы его используете, даже со значением «да» - OOPS, только что заметил, что у меня есть «e» в «scaleable», как будто у него может быть «чешуя (дракон) :-)
— Джордж Бирбилис

Ответы:

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, потому что его нельзя увеличить.
— Джош
Еще один интересный побочный эффект user-scalable = no заключается в том, что он устраняет проблемы с позиционированием: фиксированные меню в браузерах 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>элемент страницы .

— вонючий345
источник
3

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

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

— Хория Рудан
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.