У браузері на сенсорних пристроях двічі торкніться опції "масштабування"

112

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

Наприклад: один елемент можна натиснути кілька разів, щоб щось сталося. Це добре працює на настільних браузерах (як очікувалося), але на браузерах із сенсорним пристроєм це збільшить масштаб.

— Wouter Konecny
джерело

Хоч і не для збільшення, але ось деякі інші найважливіші - `-webkit-touch-callout: none; -webkit-text-size-prilagod: жоден; -webkit-user-select: немає;

— Удайрай Дешмух

99

Примітка (станом на 2020-08-04): це рішення не працює в iOS Safari v12 +. Я оновлю цю відповідь і видалю цю нотатку, як тільки знайду чітке рішення, яке охоплює iOS Safari.

Рішення лише для CSS

Додайте touch-action: manipulationдо будь-якого елемента, на якому потрібно вимкнути подвійне масштабування, наприклад, із наступним disable-dbl-tap-zoomкласом:

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}

З touch-actionдокументів (моє наголос):

маніпуляції

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

Це значення працює на Android та iOS.

— Росс Аллен
джерело

@SergoPasoevi, чи можете ви створити приклад, який не працює? Я використовую це рішення для iOS 12, і воно працює для мене.

— Росс Аллен

Я бачу ту саму проблему, що і @SergoPasoevi, не працюючи на iOS 12

— Trevor Jex

Працював для мене на iOS 12!

— KB2497

2

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

— ойген

1

Не працює на останньому iOS під час подвійного торкання зображення.

— Адам Сільвер

54

<head>
<title>Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
etc...
</head>

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

— Каблам
джерело

16

Це відключить ВСІ функціональні можливості збільшення, на жаль, це не було моїм питанням. Я хочу відключити лише вказані елементи.

— Wouter Konecny

Ой лайно. Я читаю це навпаки, провал на мені. Вибачте!

— Каблам

5

Як щодо цього рішення? Це лише iOS, але, можливо, підлаштовується? : gist.github.com/2047491

— Каблам

2

@WouterKonecny Якщо ви видалите перевірку Useragent, він повинен працювати на будь-якому пристрої, який підтримує подію сенсорного початку. Для виявлення цих пристроїв ви можете використовувати щось на зразок isEventSupported

— nxt

4

Зараз Apple це офіційно ігнорує. github.com/w3c/html/isissue/602

— катамфетамін

38

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

~~Я не на 100% впевнений, наскільки це крос-пристрій~~, але це спрацювало саме так, як я хотів.

$('.no-zoom').bind('touchend', function(e) {
  e.preventDefault();
  // Add your code here. 
  $(this).click();
  // This line still calls the standard click event, in case the user needs to interact with the element that is being clicked on, but still avoids zooming in cases of double clicking.
})

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

РЕДАКТУВАННЯ: Зараз це перевірено часом і працює в декількох програмах, що живуть. Здається, це 100% крос-браузер і платформа. Вищевказаний код повинен працювати як рішення для копіювання та вставки для більшості випадків, якщо ви не бажаєте користувацької поведінки перед подією кліку.

— Rockster160
джерело

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

— benchpresser

2

це відключає кліки, я не думаю, що це гарне рішення шкода

— Pixelomo

6

для цього вам не потрібен JS, ви можете просто встановити атрибут CSSpointer-events: none

— Pixelomo

1

Дякую, що це прекрасно спрацювало з обробкою кнопок збільшення / зменшення без відключення масштабування на всій сторінці.

— Рамон

1

Якщо я правильно це бачу, це може бути невдалим у певних ситуаціях, коли вам потрібні довірені події (наприклад, натискання на sth, що викликає повноекранний екран, або інші експерименти, як yneed довірені події, що означає TRIGGERED USER / OS)

— Мануель Граф

29

Я просто хотів правильно відповісти на моє запитання, оскільки деякі люди не читають коментарів нижче відповіді. Отже ось це:

(function($) {
  $.fn.nodoubletapzoom = function() {
      $(this).bind('touchstart', function preventZoom(e) {
        var t2 = e.timeStamp
          , t1 = $(this).data('lastTouch') || t2
          , dt = t2 - t1
          , fingers = e.originalEvent.touches.length;
        $(this).data('lastTouch', t2);
        if (!dt || dt > 500 || fingers > 1) return; // not double-tap

        e.preventDefault(); // double tap - prevent the zoom
        // also synthesize click events we just swallowed up
        $(this).trigger('click').trigger('click');
      });
  };
})(jQuery);

Я цього не писав, я просто модифікував. Тут я знайшов версію для iOS: https://gist.github.com/2047491 (спасибі Kablam)

— Wouter Konecny
джерело

1

Схоже, це не працює, принаймні, не на SIII (з Android 4.0.4). Я намагався прив’язати до документа, тіла, вікна, *, без кісток.

— Макс

Спробував і мене, працює на safari / ipad, android chrome, але не з браузером за замовчуванням для android

— Strae

2

jquery не javascript, було б непогано мати приклад, як це зробити без бібліотеки

— Martijn Scheffer

Шукаєте версію не-jquery :-(

— Тимо

знову ж таки, jQuery - це не JavaScript, і його не слід заохочувати, оскільки він не працює добре на сайтах, заснованих на більш сучасних ідеях, таких як angular. читайте запитання

— Martijn Scheffer

15

CSS для відключення подвійного торкання масштабу в усьому світі (на будь-якому елементі):

  * {
      touch-action: manipulation;
  }

маніпуляції

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

Дякую Россу, моя відповідь поширює його: https://stackoverflow.com/a/53236027/9986657

— Січ
джерело

1

Це має бути позначено відповіддю. Я спробував поставити його лише на html та body, але він не працював в iOS 13.2. Це працює.

— R OMS

Це не працює на iOS 13 само по собі, але в поєднанні з цим кодом він натискає кнопку, щоб повністю збільшити масштаб для програми React. document.getElementById('root').addEventListener('click', () => {})

— Сергій

яблуко відключено, щоб збільшити ios13, як ви можете сказати, що він не працює на iOS13?

— ойген

15

Якщо вам потрібна версія , яка працює без JQuery , я змінив відповідь Wouter Конечни (який також був створений шляхом модифікації цього суть по Johan Сундстрем ) використовувати ванільний JavaScript.

function preventZoom(e) {
  var t2 = e.timeStamp;
  var t1 = e.currentTarget.dataset.lastTouch || t2;
  var dt = t2 - t1;
  var fingers = e.touches.length;
  e.currentTarget.dataset.lastTouch = t2;

  if (!dt || dt > 500 || fingers > 1) return; // not double-tap

  e.preventDefault();
  e.target.click();
}

Потім додайте обробник подій, touchstartякий викликає цю функцію:

myButton.addEventListener('touchstart', preventZoom);

— Еврим Персембе
джерело

3

блискучий. просто хотів зазначити, що мені потрібно додати addEventListener, щоб викликати це. myButton.addEventListener('touchstart', preventZoom);

— martin jakubik

11

Ви повинні встановити властивість CSS , touch-actionщоб , noneяк описано в цій другій відповіді https://stackoverflow.com/a/42288386/1128216

.disable-doubletap-to-zoom {
    touch-action: none;
}

— Джонатан Моралес Велес
джерело

1

Це працює ... але що робити, якщо я хочу відключити масштабування, але залишити інші сенсорні події? У мене великий стіл, і це також вимикає прокрутку.

— FrenkyB

2

Якщо ви хочете лише позбутися масштабування подвійним натисканням, вам слід встановити значення "touch-action: manipulate;" Це все одно дозволить панорумувати та збільшувати масштаб. Важлива примітка. Це також допомагає позбутися браузерів із затримкою кліків, запроваджених для здійснення збільшення подвійного дотику. дивіться developer.mozilla.org/en-US/docs/Web/CSS/touch-action

— cschuff

За яким тегом HTML слід додати цей клас?

— Разван Замфір

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

— Джонатан Моралес Велес

2

* {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

Вимкніть подвійне торкання, щоб збільшити масштаб сенсорних екранів. Інтернет-провідник включений.

— Ерчін Дедеоглу
джерело

1

Просте поведінка за умовчанням click, dblclickабо touchendподії відключити функції масштабування.

Якщо ви вже маєте зворотний дзвінок на одній із цих подій, просто зателефонуйте на event.preventDefault().

— Вільям Гразель
джерело

1

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

— Рік Джулі

1

Якщо хтось, як я , стикається з цією проблемою за допомогою Vue.js , просто додавши .prevent виконає трюк:@click.prevent="someAction"

— Sølve Tornøe
джерело

0

Це запобіжить подвійне збільшення масштабування елементів у "body", це може бути змінено на будь-який інший селектор

$('body').bind('touchstart', function preventZoom(e){
            var t2 = e.timeStamp;
            var t1 = $(this).data('lastTouch') || t2;
            var dt = t2 - t1;
            var fingers = e.originalEvent.touches.length;
            $(this).data('lastTouch', t2);
            if (!dt || dt > 500 || fingers > 1){
                return; // not double-tap
            }
            e.preventDefault(); // double tap - prevent the zoom
            // also synthesize click events we just swallowed up
            $(e.target).trigger('click');

});

Але це також заважало моєму події натискання, коли було натиснене кілька разів, тому мені довелося прив’язати іншу подію, щоб викликати події в декілька кліків

$('.selector').bind('touchstart click', preventZoom(e) {    
    e.stopPropagation(); //stops propagation
    if(e.type == "touchstart") {
      // Handle touchstart event.
    } else if(e.type == "click") {
      // Handle click event.
    }
});

На touchstart я додав код, щоб запобігти масштабуванню та викликати клацання.

$('.selector').bind('touchstart, click', function preventZoom(e){
            e.stopPropagation(); //stops propagation
            if(e.type == "touchstart") {
                // Handle touchstart event.
                var t2 = e.timeStamp;
                var t1 = $(this).data('lastTouch') || t2;
                var dt = t2 - t1;
                var fingers = e.originalEvent.touches.length;
                $(this).data('lastTouch', t2);


                if (!dt || dt > 500 || fingers > 1){
                    return; // not double-tap
                }

                e.preventDefault(); // double tap - prevent the zoom
                // also synthesize click events we just swallowed up
                $(e.target).trigger('click');

            } else if(e.type == "click") {
                // Handle click event.
               "Put your events for click and touchstart here"
            }

 });

— Dally S
джерело

-1

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

Я просто спробував це.

(1) Для Safari на iOS та Chrome на Android, і це кращий метод. Працює за винятком Інтернет-програми на Samsung, де він відключає подвійне натискання не повністю <div>, а принаймні на елементи, що обробляють крани. Він повертається return false, за винятком входів textта rangeвходів.

$('selector of <div> input area').on('touchend',disabledoubletap);

function disabledoubletap(ev) {

    var preventok=$(ev.target).is('input[type=text],input[type=range]');

    if(preventok==false) return false; 
}

(2) Опціонально для вбудованого інтернет-додатку для Android (5.1, Samsung), не перешкоджає подвійному натисканню на <div>, але призупиняє масштабування <div>:

$('selector of <div> input area').on('touchstart touchend',disabledoubletap);

(3) Для Chrome на Android 5.1 взагалі вимикає подвійне торкання, не перешкоджає масштабуванню та нічого не робить щодо подвійного натискання в інших браузерах. Інгібування подвійного натискання на <meta name="viewport" ...>це подразнює, тому що <meta name="viewport" ...>здається хорошою практикою.

<meta name="viewport" content="width=device-width, initial-scale=1, 
          maximum-scale=5, user-scalable=yes">

— Петро
джерело

-2

Використання сенсорних подій CSS: жодна Повністю не знімає всі сенсорні події. Просто залишивши це тут, якщо хтось теж має ці проблеми, мені знадобилося дві години, щоб знайти це рішення, і це лише один рядок css. https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

— Асгеїр Фріманнссон
джерело

-4

Ось і ми

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

— не впевнений
джерело