відключити режим перегляду масштабування if 10+ safari?

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

оновлено у версії iOS 11/12, iOS 11 та safari iOS 12 досі НЕ поважають user-scalable=noметатег.

Можна запобігти масштабуванню веб-сторінок у сафарі на iOS 10, але це потребує більшої роботи з вашого боку. Я здогадуюсь, аргумент полягає в тому, що ступінь складності повинна зупинити вантажні культові диски, щоб вони не потрапляли на "користувач, що масштабується = ні", у кожен тег огляду та робили речі непотрібними для користувачів із порушеннями зору.

Все ж хотілося б, щоб 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);

Якщо ви неправильно налаштуєте елементи форми, фокусування на вводі автоматично збільшить масштаб, а оскільки ви в основному відключили ручне збільшення, знімати масштаб тепер буде майже неможливо. Переконайтеся, що розмір вхідного шрифту> = 16 пікс.

Якщо ви намагаєтеся вирішити це в WKWebView в нативній програмі, рішення, наведене вище, є життєздатним, але це краще рішення: https://stackoverflow.com/a/31943976/661418 . І як уже згадувалося в інших відповідях, в iOS 10 beta 6 Apple тепер подала прапор на честь метатега.

Оновлення травня 2017 року: я замінив старий метод "check touch touch on touchstart", щоб відключити "pinch-zoom" більш простим підходом "check event.scale on touchmove". Має бути більш надійним для всіх.

Це нова функція в iOS 10.

З приміток до випуску бета-версії iOS 10:

• Щоб покращити доступність веб-сайтів у Safari, користувачі тепер можуть здійснювати масштабне збільшення, навіть коли веб-сайт встановлюється user-scalable=noу вікні перегляду.

Я очікую, що ми скоро побачимо надбудову JS, щоб дещо відключити це.

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

Здається, що ця поведінка нібито змінилася в останній бета-версії, яка на момент написання - бета-6.

З приміток до випуску для iOS 10 Beta 6:

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

Однак під час мого (дуже обмеженого) тестування я поки не можу підтвердити це.

Редагувати: перевірено, user-scalable=noдля мене iOS 10 Beta 6 відповідає умовами за замовчуванням.

Щоб обійти цю проблему , яка працює в Mobile Safari в цей час написання, щоб мати третій аргумент в addEventListenerВЕ { passive: false }, так в повній мірі обійти це виглядає наступним чином :

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

Ви можете перевірити, чи підтримуються варіанти, щоб вони залишалися сумісними назад.

Я витратив близько години, шукаючи більш надійний варіант 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>

Я спробував попередню відповідь про збільшення зуму

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);

Сподіваюся, це допоможе.

Перевірте масштабний коефіцієнт у події Touchove, а потім запобігайте дотику.

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

Ми можемо отримати все, що хочемо, ввівши одне правило стилю та перехопивши масштабування подій:

$(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 на свій смак. Детальніше про це тут .

Вибачте лукеяксон та Пьотр Ковальський , відповіді яких відображаються в модифікованому вигляді в наведеному вище коді.

Я придумав досить наївне рішення, але, здається, працює. Моєю метою було запобігти трактуванню випадкових подвійних натискань як збільшення, зберігаючи при цьому щільний пристрій для збільшення доступності.

Ідея полягає у вимірюванні часу між першим 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();
  }
});

Натхненний сутью від немитої зими та відповіді Йосифа .

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

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

Як не дивно це звучить, принаймні для Safari в iOS 10.2, подвійне натискання на масштабування магічним чином відключається, якщо ваш елемент або хтось із його предків має одну з наступних дій:

1. Слухач onClick - це може бути простий нооп.
2. cursor: pointerНабір в CSS

Ненавмисне масштабування, як правило, відбувається, коли:

• Користувач двічі торкається компонента інтерфейсу
• Користувач взаємодіє з вікном перегляду за допомогою двох або більше цифр (прищіпка)

Щоб запобігти подвійному поводженню, я знайшов два дуже простих способи вирішення:

<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

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

Знайдено цю просту роботу, яка, як видається, запобігає подвійному клацанню для збільшення:

    // 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);

Як вимагається, я передав свій коментар у відповідь, щоб люди могли його схвалити:

Це працює 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), але не мав успіху. Це моє робоче рішення:

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

це працювало для мене:

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