Я обновляю свой iPhone 6 плюс к прошивке 10 бета - версию и только обнаружил , что в мобильном сафари, вы можете увеличить любой веб - страницу с помощью двойного постукивания или защемлений ИГНОРИРУЙТЕ в user-scalable=no
код в мета - теге. Я не знаю, это ошибка или особенность. Если это рассматривается как функция, как отключить масштабирование окна просмотра в iOS 10 Safari?
обновленный выпуск iOS 11/12, iOS 11 и iOS 12 Safari все еще НЕ уважают user-scalable=no
метатег.
Ответы:
Возможно предотвратить масштабирование веб-страниц в Safari на iOS 10, но это потребует дополнительных усилий с вашей стороны. Я предполагаю, что аргумент заключается в том, что степень сложности должна помешать разработчикам Cargo-Cult опустить «user-scalable = no» в каждый тег окна просмотра и сделать ненужные вещи бесполезными для пользователей с нарушениями зрения.
Тем не менее, я бы хотел, чтобы Apple изменила свою реализацию так, чтобы существовал простой (метатег) способ отключения двойного нажатия для увеличения. Большая часть трудностей связана с этим взаимодействием.
Вы можете остановить масштабирование с помощью чего-то вроде этого:
Обратите внимание, что если какие-либо более глубокие цели вызывают stopPropagation для события, событие не достигнет документа, и этот слушатель не предотвратит поведение масштабирования.
Отключение двойного касания для увеличения аналогично. Вы отключаете любое нажатие на документ, происходящее в течение 300 миллисекунд после предыдущего нажатия:
Если вы неправильно настроили элементы формы, при фокусировке на входе произойдет автоматическое масштабирование, а поскольку вы в основном отключили ручное масштабирование, теперь его практически невозможно уменьшить. Убедитесь, что размер входного шрифта> = 16px.
Если вы пытаетесь решить эту проблему в WKWebView в нативном приложении, приведенное выше решение является жизнеспособным, но это лучшее решение: https://stackoverflow.com/a/31943976/661418 . И, как упоминалось в других ответах, в iOS 10 beta 6 Apple теперь предоставила флаг для соблюдения метатега.
Обновление, май 2017 года: я заменил старый метод проверки длины касания на отключение при нажатии на более простой подход «check event.scale on touchmove». Должно быть более надежным для всех.
источник
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
и если браузер не учитывает метатег, это очень плохой дизайн браузера. Другой, как и очень плохой дизайн, это сдвиг назад / вперед, что невозможно предотвратить в iOS 9/10. Это сильно нарушает перетаскивание действий внутри веб-приложения.preventDefault
ONtouchmove
. Вы не можете (полностью) отключить масштабирование без отключения прокрутки.If you don't set up your form elements right, focusing on an input will auto-zoom, and since you have mostly disabled manual zoom, it will now be almost impossible to unzoom. Make sure the input font size is >= 16px.
Это новая функция в iOS 10.
Из примечаний к выпуску iOS 10 beta 1:
Я ожидаю, что скоро мы увидим дополнение JS, чтобы каким-то образом отключить это.
источник
Я смог исправить это, используя
touch-action
свойство css для отдельных элементов. Попробуйте установитьtouch-action: manipulation;
элементы, на которые обычно нажимают, например ссылки или кнопки.источник
touch-action: none;
для управления всеми жестами самостоятельно.touch-action: none
толькоmanipulatoin
, что оставляет проблему масштабирования пинч как есть.Похоже, что это поведение предположительно изменилось в последней бета-версии, которая на момент написания статьи была бета 6.
Из заметок о выпуске iOS 10 Beta 6:
Однако в моем (очень ограниченном) тестировании я пока не могу подтвердить, что это так.
Редактировать: подтверждено, iOS 10 Beta 6 с уважением
user-scalable=no
по умолчанию для меня.источник
WKWebView
не к сафари. Источник: Одно из наших картографических приложений сломалось, и мы не знаем, как это исправить.WKWebView
и предположил, что первоначальный вопрос задавалсяWKWebView
при написании моего ответа. Поэтому я предполагаю, что во время одной из первых бета-версий Apple изменила поведение обоихWKWebView
и мобильного Safari, затем в бета-6 они изменили поведение,WKWebView
но сохранили его для мобильного Safari.user-scalable=no
. Я не уверен, почему они когда-либо отменят это, только чтобы вернуть это, только чтобы удалить это снова.Обходной путь, который работает в Mobile Safari на момент написания статьи, состоит в том, чтобы иметь третий аргумент
addEventListener
be{ passive: false }
, поэтому полный обходной путь выглядит следующим образом:Возможно, вы захотите проверить, поддерживаются ли параметры, чтобы обеспечить обратную совместимость.
источник
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
.<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />
и<meta name="HandheldFriendly" content="true">
Я потратил около часа в поисках более надежного варианта JavaScript и не нашел его. Так уж получилось, что в последние несколько дней я возился с hammer.js (Hammer.js - это библиотека, которая позволяет легко манипулировать всеми видами сенсорных событий), и в основном терпел неудачу в том, что я пытался сделать.
С этим предостережением и пониманием, что я ни в коем случае не эксперт по JavaScript, это решение, которое я придумала, в основном использует hammer.js для захвата событий пинч-зума и двойного касания, а затем регистрирует и отбрасывает их.
Убедитесь, что вы включили hammer.js на свою страницу, а затем попробуйте вставить этот javascript где-нибудь в голове:
источник
.preventDefault
ко всем обработчикам жестов молотка. Я использую swipe / pinch / pan / tap вместе, я добавил его ко всем обработчикам, я не знаю, есть ли конкретный, который выполняет эту работу.Я попробовал предыдущий ответ о пинч-зум
однако иногда экран продолжает увеличиваться, когда event.touches.length> 1. Я обнаружил, что лучший способ - использовать событие touchmove, чтобы избежать движения пальца по экрану. Код будет примерно таким:
Надеюсь, это поможет.
источник
Проверьте масштабный коэффициент в событии касания, затем предотвратите событие касания.
источник
Мы можем получить все, что хотим, введя одно правило стиля и перехватывая события масштабирования:
✔ Отключить масштабирование.
✔ Отключение двойного увеличения.
✔ Прокрутка не влияет.
✔ Отключает выделение касанием (которое запускается в iOS по правилу стиля).
ВНИМАНИЕ: настройте iOS-обнаружение по своему вкусу. Подробнее об этом здесь .
Приносим извинения Люкьяксону и Петру Ковальски , чьи ответы представлены в измененном виде в приведенном выше коде.
источник
addEventListener
основанных ответов и передавая{ passive: false }
в качествеoptions
параметра вместоfalse
. Однако для обратной совместимости вам нужно пройти,false
еслиpassive
не поддерживается поле option. См. Developer.mozilla.org/en-US/docs/Web/API/EventTarget/…Я придумал довольно наивное решение, но, похоже, оно работает. Моей целью было не допустить, чтобы случайные двойные касания интерпретировались как увеличение, сохраняя при этом увеличение масштаба для обеспечения доступности.
Идея состоит в том, чтобы измерить время между первым
touchstart
и вторымtouchend
двумя нажатиями, а затем интерпретировать последнийtouchend
как щелчок, если задержка слишком мала. Несмотря на предотвращение случайного масштабирования, кажется, что этот метод не влияет на прокрутку списка, что приятно. Не уверен, что я ничего не пропустил, хотя.Вдохновлен суть от mutewinter и ответ Джозефа .
источник
В моем конкретном случае я использую Babylon.js для создания 3D-сцены, и вся моя страница состоит из одного полноэкранного холста. 3D-движок имеет свою собственную функцию масштабирования, но в iOS пинч-масштабирование мешает этому. Я обновил ответ @Joseph, чтобы преодолеть мою проблему. Чтобы отключить его, я понял, что мне нужно передать {passive: false} в качестве опции слушателю событий. Следующий код работает для меня:
источник
Как бы странно это ни звучало, по крайней мере для Safari в iOS 10.2, двойное нажатие для масштабирования магически отключено, если у вашего элемента или любого из его предков есть одно из следующего:
cursor: pointer
Набор в CSSисточник
Непреднамеренное масштабирование имеет место, когда:
Чтобы предотвратить поведение двойного нажатия, я нашел два очень простых обходных пути:
Оба этих параметра не позволяют Safari (iOS 10.3.2) масштабировать кнопки. Как вы можете видеть, один - только JavaScript, другой - только CSS. Используйте соответственно.
Вот демоверсия: https://codepen.io/lukejacksonn/pen/QMELXQ
Я не пытался предотвратить поведение прижима (пока), в первую очередь потому, что я склонен не создавать мультисенсорные интерфейсы для Интернета, а во-вторых, я пришел к мысли, что, возможно, все интерфейсы, включая собственный интерфейс приложения, должны быть «ущипнуть, чтобы увеличить» возможность в местах. Я бы по-прежнему старался избегать необходимости делать это пользователем, чтобы сделать ваш пользовательский интерфейс доступным для них любой ценой.
источник
Нашел эту простую работу, которая, кажется, предотвращает двойной щелчок для увеличения:
источник
В ответ на запрос я передал свой комментарий на ответ, чтобы люди могли его проголосовать:
Это работает 90% времени для iOS 13:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />
и
<meta name="HandheldFriendly" content="true">
источник
Я проверил все вышеупомянутые ответы на практике со своей страницей на iOS (iPhone 6, iOS 10.0.2), но безуспешно. Это мое рабочее решение:
источник
это сработало для меня:
источник