Vô hiệu hóa tùy chọn “thu phóng” khi nhấn đúp trong trình duyệt trên thiết bị cảm ứng


112

Tôi muốn vô hiệu hóa các zoom nhấp đúp chức năng trên các yếu tố quy định trong trình duyệt (trên các thiết bị cảm ứng), mà không cần tắt tất cả các chức năng zoom .

Ví dụ: Một phần tử có thể được khai thác nhiều lần để điều gì đó xảy ra. Điều này hoạt động tốt trên các trình duyệt máy tính để bàn (như mong đợi), nhưng trên các trình duyệt thiết bị cảm ứng, nó sẽ phóng to.


Mặc dù không phải để thu phóng, nhưng đây là một số tính năng cần thiết khác - `-webkit-touch-callout: none; -webkit-text-size-Adjust: không có; -webkit-user-select: none;
Udayraj Deshmukh 19/06/17

Câu trả lời:


98

Lưu ý (kể từ 2020-08-04): giải pháp này dường như không hoạt động trong iOS Safari v12 +. Tôi sẽ cập nhật câu trả lời này và xóa ghi chú này sau khi tôi tìm thấy giải pháp rõ ràng cho iOS Safari.

Giải pháp chỉ CSS

Thêm touch-action: manipulationvào bất kỳ phần tử nào mà bạn muốn tắt tính năng thu phóng bằng cách nhấn đúp, như với disable-dbl-tap-zoomlớp sau :

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

Từ touch-actiontài liệu (tôi nhấn mạnh):

Thao tác

Bật cử chỉ thu phóng lia và chụm, nhưng tắt các cử chỉ không chuẩn bổ sung như nhấn đúp để thu phóng .

Giá trị này hoạt động trên Android và iOS.


@SergoPasoevi, bạn có thể tạo một ví dụ không hoạt động được không? Tôi đang sử dụng giải pháp này cho iOS 12 và nó đang phù hợp với tôi.
Ross Allen

Tôi thấy vấn đề tương tự như @SergoPasoevi, không làm việc trên iOS 12
Trevor JEX

Làm việc cho tôi trên iOS 12!
KB2497

2
Khuyết điểm của việc quấn toàn bộ cơ thể bạn bằng hành động chạm: thao tác là gì?
oygen

1
Không hoạt động trên iOS mới nhất khi nhấn đúp vào hình ảnh.
Adam Silver

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>

Tôi đã sử dụng nó rất gần đây và nó hoạt động tốt trên iPad. Chưa được thử nghiệm trên Android hoặc các thiết bị khác (vì trang web sẽ chỉ hiển thị trên iPad).


16
Điều đó sẽ vô hiệu hóa TẤT CẢ chức năng thu phóng, rất tiếc đó không phải là câu hỏi của tôi. Tôi chỉ muốn vô hiệu hóa các phần tử được chỉ định.
Wouter Konecny

Ôi chao. Tôi đã đọc nó theo cách khác, thất bại là do tôi. Lấy làm tiếc!
Kablam

5
Làm thế nào về giải pháp này? Nó chỉ dành cho iOS, nhưng có lẽ có thể tinh chỉnh? : gist.github.com/2047491
Kablam

2
@WouterKonecny ​​Nếu bạn bỏ kiểm tra useragent, nó sẽ hoạt động trên bất kỳ thiết bị nào hỗ trợ sự kiện touchstart. Để phát hiện những thiết bị đó, bạn có thể sử dụng một cái gì đó như isEventSupported
nxt vào

4
Apple hiện chính thức bỏ qua điều này. github.com/w3c/html/issues/602
catamphetamine

38

Tôi biết điều này có thể đã cũ, nhưng tôi đã tìm thấy một giải pháp phù hợp với mình. Không cần các thẻ meta điên rồ và dừng phóng to nội dung.

Tôi không chắc 100% nó là thiết bị chéo như thế nào, nhưng nó hoạt động chính xác như cách tôi muốn.

$('.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.
})

Thao tác này chỉ đơn giản là vô hiệu hóa chức năng khai thác thông thường, sau đó gọi lại sự kiện nhấp chuột chuẩn. Điều này ngăn không cho thiết bị di động phóng to, nhưng ngược lại hoạt động như bình thường.

CHỈNH SỬA: Tính năng này hiện đã được kiểm tra theo thời gian và đang chạy trong một vài ứng dụng trực tiếp. Có vẻ là 100% trình duyệt chéo và nền tảng. Đoạn mã trên sẽ hoạt động như một giải pháp sao chép-dán cho hầu hết các trường hợp, trừ khi bạn muốn hành vi tùy chỉnh trước sự kiện nhấp chuột.


câu trả lời đơn giản nhưng tuyệt vời. không cần phải sửa đổi các thẻ meta hoặc v.v.
đo bàn có

2
này vô hiệu hóa nhấp chuột, tôi không nghĩ rằng đó là một giải pháp tốt xin lỗi
Pixelomo

6
bạn không cần JS để làm điều đó mà bạn có thể chỉ cần đặt thuộc tính CSSpointer-events: none
Pixelomo

1
Cảm ơn bạn, điều này đã hoạt động hoàn hảo để xử lý các nút tăng / giảm mà không tắt tính năng thu phóng trên toàn bộ trang.
Ramón

1
Nếu tôi thấy điều này chính xác, điều này có thể không thành công trong một số trường hợp nhất định mà bạn cần các sự kiện đáng tin cậy (ví dụ: clickin on sth đang kích hoạt toàn màn hình hoặc các thử nghiệm khác, vì các sự kiện đáng tin cậy có nghĩa là DO NGƯỜI DÙNG / HĐH ĐIỀU HÀNH)
Manuel Graf

29

Tôi chỉ muốn trả lời đúng câu hỏi của mình vì một số người không đọc các bình luận bên dưới câu trả lời. Vì vậy, đây là:

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

Tôi không viết cái này, tôi chỉ sửa đổi nó. Tôi đã tìm thấy phiên bản chỉ dành cho iOS tại đây: https://gist.github.com/2047491 (cảm ơn Kablam)


1
Điều này dường như không hoạt động, ít nhất là không trên SIII (w / Android 4.0.4). Tôi đã thử liên kết với tài liệu, nội dung, cửa sổ, *, không có xúc xắc.
Tối đa

Đã thử tôi cũng vậy, hoạt động trên safari / ipad, android chrome nhưng không hoạt động với trình duyệt mặc định của android
Strae

2
jquery không Javascript nó sẽ được tốt đẹp để có một ví dụ về làm thế nào để làm điều này mà không có một thư viện
Martijn Scheffer

Đang tìm kiếm phiên bản không phải jquery :-(
Timo

một lần nữa, jQuery không phải là javascript và không nên được khuyến khích, vì nó không hoạt động tốt với các trang web dựa trên những ý tưởng hiện đại hơn như góc cạnh. đọc câu hỏi
Martijn Scheffer

15

CSS để tắt tính năng thu phóng nhấn đúp trên toàn cầu (trên bất kỳ phần tử nào):

  * {
      touch-action: manipulation;
  }

Thao tác

Bật cử chỉ thu phóng lia và chụm, nhưng tắt các cử chỉ không chuẩn bổ sung như nhấn đúp để thu phóng.

Cảm ơn Ross, câu trả lời của tôi mở rộng: https://stackoverflow.com/a/53236027/9986657


1
Điều này nên được đánh dấu câu trả lời. Tôi đã thử chỉ đặt nó trên html và body nhưng nó không hoạt động trong iOS 13.2. Những công việc này.
R OMS

Bản thân điều này không hoạt động trên iOS 13, nhưng với mã này, nó có thể nhấn để thu phóng hoàn toàn ứng dụng React. document.getElementById('root').addEventListener('click', () => {})
Sergei

Apple đã vô hiệu hóa chạm để phóng to trên ios13, làm thế nào bạn có thể nói rằng nó không hoạt động trên iOS13?
oygen

15

Nếu bạn cần một phiên bản hoạt động mà không cần jQuery , tôi đã sửa đổi câu trả lời của Wouter Konecny (cũng được tạo ra bằng cách sửa đổi ý chính này bởi Johan Sundström ) để sử dụng JavaScript vani.

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

Sau đó, thêm một trình xử lý sự kiện trên touchstartđó gọi hàm này:

myButton.addEventListener('touchstart', preventZoom); 

3
xuất sắc. chỉ muốn đề cập rằng tôi cần thêm một addEventListener để gọi nó. myButton.addEventListener('touchstart', preventZoom);
martin jakubik

11

Bạn nên đặt thuộc tính css touch-actionthành nonenhư được mô tả trong câu trả lời khác này https://stackoverflow.com/a/42288386/1128216

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

1
Điều này hoạt động ... nhưng điều gì sẽ xảy ra nếu tôi muốn tắt tính năng thu phóng, nhưng vẫn để lại các sự kiện chạm khác? Tôi có một cái bàn lớn và điều này cũng vô hiệu hóa tính năng cuộn.
FrenkyB

2
Nếu bạn chỉ muốn loại bỏ chế độ thu phóng khi nhấn đúp, bạn nên đặt giá trị thành 'touch-action: Thao tác;' Thao tác này sẽ vẫn cho phép quét và thu nhỏ. Lưu ý quan trọng: Điều này cũng giúp loại bỏ các trình duyệt trì hoãn nhấp chuột được giới thiệu để triển khai thu phóng khi nhấn đúp. xem developer.mozilla.org/en-US/docs/Web/CSS/touch-action
cschuff

Lớp này nên được thêm vào thẻ HTML nào?
Razvan Zamfir

Tôi nghĩ bạn chỉ có thể thêm nó vào bất kỳ phần tử nào mà bạn không muốn sử dụng để phóng to. Ví dụ: trong trường hợp của tôi, tôi không muốn người dùng phóng to bất kỳ phần nào trên trang của mình, vì vậy tôi đã thêm phần đó vào thẻ body.
Jonathan Morales Vélez

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

Tắt nhấn đúp để phóng to trên màn hình cảm ứng. Trình khám phá Internet bao gồm.


1

Đơn giản ngăn chặn hành vi mặc định click, dblclickhoặc touchendcác sự kiện sẽ vô hiệu hóa chức năng zoom.

Nếu bạn đã gọi lại cho một trong các sự kiện này, chỉ cần gọi a event.preventDefault().


1
Điều này đã làm việc cho tôi. Tôi đang xác định sự kiện bắt đầu cảm ứng của riêng mình trên một nút và tôi muốn tắt chức năng thu phóng.
Rick Giuly,

1

Nếu có ai giống tôi đang gặp phải vấn đề này bằng cách sử dụng Vue.js , chỉ cần thêm .prevent sẽ thực hiện thủ thuật:@click.prevent="someAction"


0

Thao tác này sẽ ngăn việc thu phóng khi nhấn đúp vào các phần tử trong 'body', điều này có thể được thay đổi thành bất kỳ bộ chọn nào khác

$('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');

});

Nhưng điều này cũng ngăn sự kiện nhấp chuột của tôi kích hoạt khi được nhấp nhiều lần, vì vậy tôi phải liên kết một sự kiện khác để kích hoạt các sự kiện trên nhiều lần nhấp

$('.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.
    }
});

Trên touchstart, tôi đã thêm mã để ngăn thu phóng và kích hoạt một cú nhấp chuột.

$('.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"
            }

 });

-1

Tôi giả sử rằng tôi có một <div>vùng chứa đầu vào với văn bản, thanh trượt và các nút trong đó và muốn hạn chế các thao tác nhấn đúp vô tình trong đó <div>. Những điều sau đây không ngăn cản việc phóng to vùng đầu vào và nó không liên quan đến việc nhấn đúp và phóng to bên ngoài <div>vùng của tôi . Có các biến thể tùy thuộc vào ứng dụng trình duyệt.

Tôi vừa thử nó.

(1) Đối với Safari trên iOS và Chrome trên Android và là phương pháp ưu tiên. Hoạt động ngoại trừ ứng dụng Internet trên Samsung, nơi nó vô hiệu hóa tính năng nhấn đúp không phải trên toàn bộ <div>, nhưng ít nhất là trên các phần tử xử lý các lần nhấn. Nó trả về return false, với ngoại lệ trên textrangeđầu vào.

$('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) Tùy chọn đối với ứng dụng Internet tích hợp sẵn trên Android (5.1, Samsung), hạn chế nhấn đúp trên <div>, nhưng ngăn phóng to trên <div>:

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

(3) Đối với Chrome trên Android 5.1, vô hiệu hóa tính năng nhấn đúp, không ngăn cản việc phóng to và không thực hiện gì với việc nhấn đúp trong các trình duyệt khác. Nhấn đúp để ức chế <meta name="viewport" ...>là khó chịu, bởi vì <meta name="viewport" ...>có vẻ như thực hành tốt.

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


-4

Chúng tôi bắt đầu

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

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.