天道酬勤,学无止境

Disable double-tap “zoom” option in browser on touch devices

Question

I want to disable the double-tap zoom functionality on specified elements in the browser (on touch devices), without disabling all the zoom functionality.

For example: One element can be tapped multiple times for something to happen. This works fine on desktop browsers (as expected), but on touch device browsers, it will zoom in.

Answer1

Note (as of 2020-08-04): this solution does not appear to work in iOS Safari v12+. I will update this answer and delete this note once I find a clear solution that covers iOS Safari.

CSS-only solution

Add touch-action: manipulation to any element on which you want to disable double tap zoom, like with the following disable-dbl-tap-zoom class:

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

From the touch-action docs (emphasis mine):

manipulation

Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom.

This value works on Android and on iOS.

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

I've used that very recently and it works fine on iPad. Haven't tested on Android or other devices (because the website will be displayed on iPad only).

Answer3

I know this may be old, but I found a solution that worked perfectly for me. No need for crazy meta tags and stopping content zooming.

I'm not 100% sure how cross-device it is, but it worked exactly how I wanted to.

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

This will simply disable the normal tapping function, and then call a standard click event again. This prevents the mobile device from zooming, but otherwise functions as normal.

EDIT: This has now been time-tested and running in a couple live apps. Seems to be 100% cross-browser and platform. The above code should work as a copy-paste solution for most cases, unless you want custom behavior before the click event.

Answer4

I just wanted to answer my question properly as some people do not read the comments below an answer. So here it is:

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

I did not write this, i just modified it. I found the iOS-only version here: https://gist.github.com/2047491 (thanks Kablam)

Answer5

CSS to disable double-tap zoom globally (on any element):

  * {
      touch-action: manipulation;
  }

manipulation

Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom.

Thanks Ross, my answer extends his: https://stackoverflow.com/a/53236027/9986657

Answer6

If you need a version that works without jQuery, I modified Wouter Konecny's answer (which was also created by modifying this gist by Johan Sundström) to use vanilla 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();
}

Then add an event handler on touchstart that calls this function:

myButton.addEventListener('touchstart', preventZoom); 
Answer7

You should set the css property touch-action to none as described in this other answer https://stackoverflow.com/a/42288386/1128216

.disable-doubletap-to-zoom {
    touch-action: none;
}
Answer8
* {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

Disable double tap to zoom on touch screens. Internet explorer included.

Answer9

Simple prevent the default behavior of click, dblclick or touchend events will disable the zoom functionality.

If you have already a callback on one of this events just call a event.preventDefault().

Answer10

If there is anyone like me who is experiencing this issue using Vue.js, simply adding .prevent will do the trick: @click.prevent="someAction"

Answer11

This will prevent double tap zoom on elements in 'body' this can be changed to any other selector

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

});

But this also prevented my click event from triggering when clicked multiple times so i had to bind a another event to trigger the events on multiple clicks

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

On touchstart i added the code to prevent the zoom and trigger a click.

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

 });
Answer12

I assume that I do have a <div> input container area with text, sliders and buttons in it, and want to inhibit accidental double-taps in that <div>. The following does not inhibit zooming on the input area, and it does not relate to double-tap and zooming outside my <div> area. There are variations depending on the browser app.

I just tried it.

(1) For Safari on iOS, and Chrome on Android, and is the preferred method. Works except for Internet app on Samsung, where it disables double-taps not on the full <div>, but at least on elements that handle taps. It returns return false, with exception on text and range inputs.

$('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) Optionally for built-in Internet app on Android (5.1, Samsung), inhibits double-taps on the <div>, but inhibits zooming on the <div>:

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

(3) For Chrome on Android 5.1, disables double-tap at all, does not inhibit zooming, and does nothing about double-tap in the other browsers. The double-tap-inhibiting of the <meta name="viewport" ...> is irritating, because <meta name="viewport" ...> seems good practice.

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

Using CSS touch-events: none Completly takes out all the touch events. Just leaving this here in case someone also has this problems, took me 2 hours to find this solution and it's only one line of css. https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Answer14

Here we go

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

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

相关推荐
  • How can I “disable” zoom on a mobile web page?
    Question I am creating a mobile web page that is basically a big form with several text inputs. However (at least on my Android cellphone), every time I click on some input the whole page zooms there, obscuring the rest of the page. Is there some HTML or CSS command to disable this kind of zoom on moble web pages? Answer1 This should be everything you need : <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' > Answer2 For those of you late to the party, kgutteridge's answer doesn't work for me and Benny Neugebauer's answer includes target
  • Disable scrolling in all mobile devices
    Question This sounds like there should be a solution for it all over the internet, but I am not sure why I cannot find it. I want to disable Horizontal scrolling on mobile devices. Basically trying to achieve this: body{ overflow-x:hidden // disable horizontal scrolling. } This may be relevant information: I also have this in my head tag, because I also do not wish the user to be able to zoom: <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' /> <meta name="viewport" content="width=device-width" /> Thanks Answer1 html, body { overflow-x
  • H5 page mobile terminal double-tap the screen to prohibit page zoom
    Add the user-scalable=no attribute to the meta tag <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" /> Origin:https://blog.csdn.net/qq_43248623/article/details/115274255
  • Disable Auto Zoom in Input “Text” tag - Safari on iPhone
    Question I made an HTML page that has an <input> tag with type="text". When I click on it using Safari on iPhone, the page becomes larger (auto zoom). Does anybody know how to disable this? Answer1 The browser will zoom if the font-size is less than 16px and the default font-size for form elements is 11px (at least in Chrome and Safari). Additionally, the select element needs to have the focus pseudo-class attached. input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"
  • How do I simulate a hover with a touch in touch enabled browsers?
    Question With some HTML like this: <p>Some Text</p> Then some CSS like this: p { color:black; } p:hover { color:red; } How can I allow a long touch on a touch enabled device to replicate hover? I can change markup/use JS etc, but can't think of an easy way to do this. Answer1 OK, I've worked it out! It involves changing the CSS slightly and adding some JS. Using jQuery to make it easy: $(document).ready(function() { $('.hover').on('touchstart touchend', function(e) { e.preventDefault(); $(this).toggleClass('hover_effect'); }); }); In english: when you start or end a touch, turn the class hover
  • Not able disable Home button on specific android devices
    Question I know this question has been asked many times and the answer is always "No we cant disable home button". I have a little different query to ask. I wrote simple code in which my activity overrides the onKeyDown() and return true for all key presses. In theory this means whoever opens the application is stuck there and has no option to move out of the application. When i tested this application on different devices, i made following observations : On motorola device with OS as 2.2.2 , Home button got disabled. On HTC device with OS as 2.3.5 , Home button got disabled. On Sony with OS
  • iOS Safari – How to disable overscroll but allow scrollable divs to scroll normally?
    Question I'm working on an iPad-based web app, and need to prevent overscrolling so that it seems less like a web page. I'm currently using this to freeze the viewport and disable overscroll: document.body.addEventListener('touchmove',function(e){ e.preventDefault(); }); This works great to disable overscroll but my app has several scrollable divs, and the above code prevents them from scrolling. I'm targeting iOS 5 and above only so I've avoided hacky solutions like iScroll. Instead I'm using this CSS for my scrollable divs: .scrollable { -webkit-overflow-scrolling: touch; overflow-y:auto; }
  • Mobile Safari: Javascript focus() method on inputfield only works with click?
    Question I have a simple input field like this. <div class="search"> <input type="text" value="y u no work"/> </div>​ And I'm trying to focus() it inside a function. So inside of a random function (doesn't matter what function it is) I have this line … $('.search').find('input').focus(); This works just fine on every Desktop whatsoever. However it doesn't work on my iPhone. The field is not getting focused and the keyboard is not shown on my iPhone. For testing purposes and to show you guys the problem I did a quick sample: $('#some-test-element').click(function() { $('.search').find('input')
  • Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers
    Question I have a website here. Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the body has overflow-x:hidden. In any mobile browser, whether Android or iOS, the black menu bar displays its full width, which brings whitespace on the right of the page. As far as I can tell, this whitespace isn't even a part of the html or body tags. Even if I set the viewport to a specific width in the <head>: <meta name="viewport" content="width=1100, initial-scale=1"> The site expands to the 1100px but still has the whitespace beyond the 1100. What am I
  • What Does 'zoom' do in CSS?
    Question I found that some jQuery Plugin, in their css rule uses 'zoom' descriptor, I even Look into w3c website and found that it is used to magnify but how can I actually implement it? Or I have to Define some viewport? And how do I define such viewport ? Or i am wrong about the whole stuff ? is it possible to use it like a { zoom:1; } a:hover { zoom:2; } Answer1 Zoom is not included in the CSS specification, but it is supported in IE, Safari 4, Chrome (and you can get a somewhat similar effect in Firefox with -moz-transform: scale(x) since 3.5). See here. So, all browsers zoom: 2; zoom: 200
  • Chrome and chromedriver version corresponding
    ChromeDriver version Chrome version 2.44 (Fixed 2.43 bug) v69-v71 2.43v69-v71 2.42 v68-v70 2.41v67-v69 2.40 v66-v68 2.39 v66-v68 2.38 v65-v67 2.37v64-v66 2.36 v63-v65 2.35v62-v64 2.34 v61-v63 2.33 v60-v62 chromedriver下载地址:chromedriver下载更多版本见下面----------ChromeDriver v2.43 (2018-10-16)----------Supports Chrome v69-71Resolved issue 2537: Parsing of proxy configuration is not standard compliant [[Pri-1]]Resolved issue 2607: Launch App command is flaky [[Pri-2]]Resolved issue 2575: Screenshot of element inside iFrame is taken incorrectly [[Pri-2]]Resolved issue 1855: Feature request : ChromeDriver
  • Android: How to detect double-tap?
    Question I have a problem with implementing double tap. Well I implemented the onGestureListener and I had the gestureDetector, but I'm not sure where is the problem, here is my code: public class home extends TabActivity implements OnGestureListener { /** Called when the activity is first created. */ private EditText queryText; private ResultsAdapter m_adapter; private ProgressDialog pd; final Handler h = new Handler(); private TabHost mTabHost; private ArrayList<SearchItem> sResultsArr = new ArrayList<SearchItem>(); private String queryStr; private JSONObject searchResponse; private
  • Prevent zoom cross-browser
    Question For a map-like tool, I would like to disable the browser zooming feature. (I know that this is generally a bad idea, but for some specific website, it is needed). I did it successfully by listening the keyboard shortcut CTRL + / CTRL - and adding e.preventDefault(), etc. But this doesn't prevent from changing the zoom from the browser's Zoom menu. I tried: with CSS: zoom: reset; It works for Chrome (see this page for a working example) but it doesn't work at all on Firefox. in various questions/answers, I also found <meta name="viewport" content="width=device-width, initial-scale=1
  • How to disable rubber band in iOS web apps?
    Question This: $('body').on('touchmove', function(e) { e.preventDefault(); }); Works, but will disable scrolling throughout the whole page, which is far from ideal. This: $('*').on('touchstart', function(e){ var element = $(this).get(0); if ( element.scrollTop <= 0 ) element.scrollTop = 1; if ( element.scrollTop + element.offsetHeight >= element.scrollHeight ) element.scrollTop = element.scrollHeight - element.offsetHeight - 1; }); Works on pages that have a scrolling area. However when there is nothing to scroll it will again show the rubber-band. So my question: How can you disable the
  • What is the best way to detect a mobile device?
    Question Is there a way to detect whether or not a user is using a mobile device in jQuery? Something similar to the CSS @media attribute? I would like to run a different script if the browser is on a handheld device. The jQuery $.browser function is not what I am looking for. Answer1 Editor's note: user agent detection is not a recommended technique for modern web apps. See the comments below this answer for confirmation of this fact. It is suggested to use one of the other answers using feature detection and/or media queries. Instead of using jQuery you can use simple JavaScript to detect it
  • Media query to detect if device is touchscreen
    Question What is the safest way, using media queries, to make something happen when not on a touchscreen device? If there is no way, do you suggest using a JavaScript solution such as !window.Touch or Modernizr? Answer1 I would suggest using modernizr and using its media query features. if (Modernizr.touch){ // bind to touchstart, touchmove, etc and watch `event.streamId` } else { // bind to normal click, mousemove, etc } However, using CSS, there are pseudo class like, for example in Firefox. You can use :-moz-system-metric(touch-enabled). But these features are not available for every
  • How to disable text selection highlighting
    Question For anchors that act like buttons (for example Questions, Tags, Users, etc. which are located on the top of the Stack Overflow page) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally selects the text? I realize that this could be done with JavaScript and a little googling yielded the Mozilla-only -moz-user-select option. Is there a standard-compliant way to accomplish this with CSS, and if not, what is the "best practice" approach? Answer1 UPDATE January, 2017: According to Can I use, the user-select is currently supported in all browsers
  • enable/disable zoom in Android WebView
    Question There are some methods in WebSettings related to zoom: WebSettings.setSupportZoom WebSettings.setBuiltInZoomControls I noticed they work differently on some devices. For example, on my Galaxy S pinch to zoom is enabled by default, but on LG P500 it is disabled (And now I don't know how to enable ONLY pinch to zoom, but hide zooming buttons). On P500 when I call setBuiltInZoomControls(true) I get both these variants working (multitouch and buttons). How to enable multitouch zoom and disable zooming buttons on devices such an LG P500? (Also, I know the same problems are on HTC devices)
  • Easy way to hide system bar on Android ICS
    Question I will give my ICS tablets for users to complete a survey so I would like the user to work with my app only. They should not be able to switch to the home screen, press back buttons etc., so I would like to hide the system bar completely. My tablet is rooted and I know some application like this can help me, but I don't need all the extra functions of this app. I found this tutorial that could help me, but if I can add the code to do my own, it would be great. Answer1 HideBar has a kiosk mode especially for this use case. A free download is available at http://ppareit.github.com
  • Javascript Drag and drop for touch devices [closed]
    Question As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. Closed 8 years ago. I am looking for a drag & DROP plugin that works on touch devices. I would like similar functionality to the jQuery UI plugin which allows "droppable" elements. The jqtouch plugin supports dragging, but no dropping. Here is drag