Отключить масштабирование окна просмотра iOS 10+ safari?

Question

Отключить масштабирование окна просмотра iOS 10+ safari?

Я обновил свой iPhone 6 plus до iOS 10 бета-версии и только что обнаружил, что в мобильном сафари вы можете масштабировать любые веб-страницы, дважды нажав или нажав IGNORE, user-scalable=no код в метатеге. Я не знаю, это ошибка или особенность. Если это рассматривается как функция, как отключить масштабирование окна просмотра в iOS 10 Safari?

обновленный выпуск iOS 11/12, iOS 11 и iOS 12 по-прежнему НЕ УВАЖАЮТ user-scalable=no метатег.

189

css mobile-safari viewport ios10 ios11 ios12

Источник

user1299675 14 июн '16 в 09:32

20 ответов

Другие вопросы по тегам css mobile-safari viewport ios10 ios11 ios12

user661418 25 июл '16 в 16:37 2016-07-25 16:37 · Answer 1 · 2016-07-25 16:37

В iOS 10 можно предотвратить масштабирование веб-страниц, но с вашей стороны это потребует дополнительных усилий. Я предполагаю, что аргумент состоит в том, что степень сложности должна помешать разработчикам Cargo-Cult опускать "user-scalable = no" в каждый тег окна просмотра и создавать ненужные трудности для пользователей с нарушениями зрения.

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

Вы можете остановить масштабирование с помощью чего-то вроде этого:

document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, false);

Обратите внимание, что если какие-либо более глубокие цели вызывают stopPropagation для события, событие не достигнет документа, и этот слушатель не предотвратит поведение масштабирования.

Отключение двойного касания для увеличения аналогично. Вы отключаете любое нажатие на документ, происходящее в течение 300 миллисекунд после предыдущего нажатия:

var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
  var now = (new Date()).getTime();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

Если вы неправильно настроите элементы формы, при фокусировке на входе произойдет автоматическое масштабирование, а поскольку вы в основном отключили ручное масштабирование, теперь его практически невозможно уменьшить. Убедитесь, что размер входного шрифта>= 16px.

Если вы пытаетесь решить эту проблему в WKWebView в нативном приложении, приведенное выше решение является жизнеспособным, но это лучшее решение: /questions/21415844/otklyuchit-zhest-uvelicheniya-v-wkwebview/21415877#21415877. И, как упоминалось в других ответах, в iOS 10 beta 6 Apple теперь предоставила флаг для соблюдения метатега.

Обновление, май 2017 года: я заменил старый метод проверки длины касания на отключение при нажатии на более простой подход "check event.scale on touchmove". Должно быть более надежным для всех.

user1186112 16 июн '16 в 12:24 2016-06-16 12:24 · Answer 2 · 2016-06-16 12:24

Это новая функция в iOS 10.

Из примечаний к выпуску iOS 10 beta 1:

Чтобы улучшить доступность веб-сайтов в Safari, пользователи теперь могут увеличивать масштаб, даже если веб-сайт настроен. user-scalable=no в окне просмотра.

Я ожидаю, что мы скоро увидим дополнение JS, чтобы каким-то образом отключить это.

user344660 18 янв '17 в 14:40 2017-01-18 14:40 · Answer 3 · 2017-01-18 14:40

Я смог это исправить используя touch-action Свойство css для отдельных элементов. Попробуйте установить touch-action: manipulation; на элементы, на которые обычно нажимают, такие как ссылки или кнопки.

27

Источник

user344660 18 янв '17 в 14:40

user204000 06 авг '18 в 15:01 2018-08-06 15:01 · Answer 4 · 2018-08-06 15:01

Обходной путь, который работает в Mobile Safari на данный момент, состоит в том, чтобы использовать третий аргумент в adddEventListener быть { passive: false }Таким образом, полный обход выглядит так:

document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });

Вы можете проверить, поддерживаются ли опции, чтобы оставаться обратно совместимыми.

user567104 07 июл '21 в 02:12 2021-07-07 02:12 · Answer 5 · 2021-07-07 02:12

Используйте «touch-action: pan-x pan-y», чтобы отключить «масштабирование щипком», а также «масштабирование двойным касанием». Он работает на всех сенсорных экранах / телефонах, которые я тестировал, включая iOS Safari 14.5.1.

23

Источник

user567104 07 июл '21 в 02:12

user1762862 18 авг '16 в 11:41 2016-08-18 11:41 · Answer 6 · 2016-08-18 11:41

Похоже, что это поведение предположительно изменилось в последней бета-версии, которая на момент написания статьи была бета 6.

Из заметок о выпуске iOS 10 Beta 6:

WKWebView теперь по умолчанию уважать user-scalable=no из окна просмотра. Клиенты WKWebView может улучшить доступность и позволить пользователям увеличивать масштаб на всех страницах, устанавливая WKWebViewConfiguration имущество ignoresViewportScaleLimits в YES,

Однако в моем (очень ограниченном) тестировании я пока не могу подтвердить, что это так.

Редактировать: проверено, iOS 10 Beta 6 с уважением user-scalable=no по умолчанию для меня.

user435515 06 окт '16 в 07:19 2016-10-06 07:19 · Answer 7 · 2016-10-06 07:19

Я потратил около часа в поисках более надежного варианта javascript и не нашел его. Так уж сложилось, что в последние несколько дней я возился с hammer.js (Hammer.js - это библиотека, которая позволяет легко манипулировать всеми видами сенсорных событий), и в большинстве случаев терпел неудачу в том, что я пытался сделать.

С этим предупреждением и пониманием, что я ни в коем случае не эксперт по javascript, я пришел к решению, которое в основном использует hammer.js для захвата событий пинч-зума и двойного касания, а затем регистрирует и отбрасывает их.

Убедитесь, что вы включили hammer.js на свою страницу, а затем попробуйте вставить этот javascript где-нибудь в голове:

< script type = "text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"> < /script >
< script type = "text/javascript" >

  // SPORK - block pinch-zoom to force use of tooltip zoom
  $(document).ready(function() {

    // the element you want to attach to, probably a wrapper for the page
    var myElement = document.getElementById('yourwrapperelement');
    // create a new hammer object, setting "touchAction" ensures the user can still scroll/pan
    var hammertime = new Hammer(myElement, {
      prevent_default: false,
      touchAction: "pan"
    });

    // pinch is not enabled by default in hammer
    hammertime.get('pinch').set({
      enable: true
    });

    // name the events you want to capture, then call some function if you want and most importantly, add the preventDefault to block the normal pinch action
    hammertime.on('pinch pinchend pinchstart doubletap', function(e) {
      console.log('captured event:', e.type);
      e.preventDefault();
    })
  });
</script>

user9598077 12 июн '18 в 18:11 2018-06-12 18:11 · Answer 8 · 2018-06-12 18:11

В моем конкретном случае я использую Babylon.js для создания 3D-сцены, и вся моя страница состоит из одного полноэкранного холста. 3D-движок имеет свою собственную функцию масштабирования, но в iOS вмешивается масштабирование. Я обновил ответ @Joseph, чтобы преодолеть мою проблему. Чтобы отключить его, я понял, что мне нужно передать {passive: false} в качестве опции слушателю событий. У меня работает следующий код:

window.addEventListener(
    "touchmove",
    function(event) {
        if (event.scale !== 1) {
            event.preventDefault();
        }
    },
    { passive: false }
);

user2757539 04 авг '17 в 00:06 2017-08-04 00:06 · Answer 9 · 2017-08-04 00:06

Мы можем получить все, что хотим, вставив одно правило стиля и перехватывая события масштабирования:

$(function () {
  if (!(/iPad|iPhone|iPod/.test(navigator.userAgent))) return
  $(document.head).append(
    '<style>*{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}</style>'
  )
  $(window).on('gesturestart touchmove', function (evt) {
    if (evt.originalEvent.scale !== 1) {
      evt.originalEvent.preventDefault()
      document.body.style.transform = 'scale(1)'
    }
  })
})

✔ Отключить масштабирование.

✔ Отключение двойного увеличения.

✔ Прокрутка не влияет.

✔ Отключает выделение касанием (которое запускается в iOS по правилу стиля).

ВНИМАНИЕ: настройте iOS-обнаружение по своему вкусу. Подробнее об этом здесь.

Приносим извинения Люкьяксону и Петру Ковальски, чьи ответы представлены в измененном виде в приведенном выше коде.

user1805402 11 янв '17 в 10:04 2017-01-11 10:04 · Answer 10 · 2017-01-11 10:04

Проверьте масштабный коэффициент в событии касания, затем предотвратите событие касания.

document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
        event.preventDefault();
    }
}, false);

6

Источник

user1805402 11 янв '17 в 10:04

user6851390 20 сен '16 в 12:38 2016-09-20 12:38 · Answer 11 · 2016-09-20 12:38

Я попробовал предыдущий ответ о пинч-зум

document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, false);

однако иногда экран продолжает увеличиваться, когда event.touches.length > 1. Я обнаружил, что лучший способ - использовать событие touchmove, чтобы избежать движения пальца по экрану. Код будет примерно таким:

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();      
}, false);

Надеюсь, это поможет.

user1818285 07 окт '17 в 19:00 2017-10-07 19:00 · Answer 12 · 2017-10-07 19:00

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

Идея заключается в измерении времени между первым touchstart и второй touchend в двойном нажатии, а затем интерпретировать последний touchend нажмите, если задержка слишком мала. Несмотря на предотвращение случайного масштабирования, кажется, что этот метод не влияет на прокрутку списка, что приятно. Не уверен, что я ничего не пропустил, хотя.

let preLastTouchStartAt = 0;
let lastTouchStartAt = 0;
const delay = 500;

document.addEventListener('touchstart', () => {
  preLastTouchStartAt = lastTouchStartAt;
  lastTouchStartAt = +new Date();
});
document.addEventListener('touchend', (event) => {
  const touchEndAt = +new Date();
  if (touchEndAt - preLastTouchStartAt < delay) {
    event.preventDefault();
    event.target.click();
  }
});

Вдохновленный суть от mutewinter и ответ Джозефа.

user1415748 28 фев '20 в 22:48 2020-02-28 22:48 · Answer 13 · 2020-02-28 22:48

По запросу я перевел свой комментарий на ответ, чтобы люди могли проголосовать за него:

Это работает в 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">

5

Источник

user1415748 28 фев '20 в 22:48

user1009784 01 авг '17 в 16:03 2017-08-01 16:03 · Answer 14 · 2017-08-01 16:03

Непреднамеренное масштабирование имеет место, когда:

Пользователь дважды нажимает на компонент интерфейса
Пользователь взаимодействует с окном просмотра, используя две или более цифры (пинч)

Чтобы предотвратить поведение двойного нажатия, я нашел два очень простых обходных пути:

<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>

Оба этих параметра не позволяют Safari (iOS 10.3.2) увеличить масштаб кнопки. Как видите, один - только JavaScript, другой - только CSS. Используйте соответственно.

Вот демоверсия: https://codepen.io/lukejacksonn/pen/QMELXQ

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

user374196 12 янв '17 в 18:57 2017-01-12 18:57 · Answer 15 · 2017-01-12 18:57

Как бы странно это ни звучало, по крайней мере для Safari в iOS 10.2, двойное нажатие для масштабирования магически отключено, если у вашего элемента или любого из его предков есть одно из следующего:

Слушатель onClick - это может быть простой noop.
cursor: pointer установить в CSS

1

Источник

user374196 12 янв '17 в 18:57

user276780 03 окт '17 в 07:33 2017-10-03 07:33 · Answer 16 · 2017-10-03 07:33

Нашел эту простую работу, которая, кажется, предотвращает двойной щелчок для увеличения

    // Convert touchend events to click events to work around an IOS 10 feature which prevents
    // developers from using disabling double click touch zoom (which we don't want).
    document.addEventListener('touchend', function (event) {
        event.preventDefault();
        $(event.target).trigger('click');
    }, false);

user1887771 03 сен '20 в 17:07 2020-09-03 17:07 · Answer 17 · 2020-09-03 17:07

В текущей версии сафари это больше не работает. Вы должны определить второй параметр как непассивный, передав {passiv:false}

 document.addEventListener('touchmove', function(e) {
 e.preventDefault();
}, { passive: false });

1

Источник

user1887771 03 сен '20 в 17:07

user10091841 23 май '19 в 09:27 2019-05-23 09:27 · Answer 18 · 2019-05-23 09:27

Если ничего из вышеперечисленного не работает для вас, просто установка размера шрифта в поле на 16px решит проблему.

0

Источник

user10091841 23 май '19 в 09:27

user2177457 27 июл '17 в 13:40 2017-07-27 13:40 · Answer 19 · 2017-07-27 13:40

Я проверил все вышеупомянутые ответы на практике со своей страницей на iOS (iPhone 6, iOS 10.0.2), но безуспешно. Это мое рабочее решение:

$(window).bind('gesturestart touchmove', function(event) {
    event = event.originalEvent || event;
    if (event.scale !== 1) {
         event.preventDefault();
         document.body.style.transform = 'scale(1)'
    }
});

0

Источник

user2177457 27 июл '17 в 13:40

user5468982 03 янв '19 в 19:43 2019-01-03 19:43 · Answer 20 · 2019-01-03 19:43

Это сработало для меня:

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);

0

Источник

user5468982 03 янв '19 в 19:43