Disabling double tap zoom on Android web browsers, without viewport

Question

I want to disable the double tab zoom on a div in my web page on Android browser. I tried prevent default on touch start and touchmove, cancelling bubble/propagation. I even tried jQuery mobile doubletap event, but it fires after the element is zoomed.

score 9 · Accepted Answer · answered Jan 31 '13 at 23:05

Add the following meta. This will stop double-tap zoom in the majority of mobile browsers, but will stop it everywhere on your page - not just in your single div. It's all or nothing, I'm afraid.

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

score 3 · Answer 2 · 2013-01-29T08:13:00.560

Extend WebView and use GegstureDetector to detect double tap.

public class DummyWebView
    extends WebView
{

    private boolean doubleTapped;

    private GestureDetector.OnGestureListener gestureListener;
    private GestureDetector.OnDoubleTapListener doubleTapListener;
    private GestureDetector gestureDetector;

    public DummyWebView(Context context,
            AttributeSet attrs,
            int defStyle)
    {
        super(context, attrs, defStyle);

        getSettings().setUseWideViewPort(true);
        getSettings().setBuiltInZoomControls(true);

        // Gesture Listener
        gestureListener = new GestureDetector.OnGestureListener()
        {

            @Override
            public boolean onSingleTapUp(MotionEvent e)
            {
                // Nothing to do
                return false;
            }

            @Override
            public void onShowPress(MotionEvent e)
            {
                // Nothing to do
            }

            @Override
            public boolean onScroll(
                    MotionEvent e1,
                    MotionEvent e2,
                    float distanceX,
                    float distanceY)
            {
                // Nothing to do
                return false;
            }

            @Override
            public void onLongPress(MotionEvent e)
            {
                // Nothing to do
            }

            @Override
            public boolean onFling(
                    MotionEvent e1,
                    MotionEvent e2,
                    float velocityX,
                    float velocityY)
            {
                // Nothing to do
                return false;
            }

            @Override
            public boolean onDown(MotionEvent e)
            {
                // Nothing to do
                return false;
            }
        };

        // Double tap listener
        doubleTapListener = new GestureDetector.OnDoubleTapListener()
        {
            @Override
            public boolean onSingleTapConfirmed(MotionEvent e)
            {
                // Nothing to do
                return false;
            }

            @Override
            public boolean onDoubleTapEvent(MotionEvent e)
            {
                // Double tap detected, we need to prevent 
                doubleTapped = true;
                return false;
            }

            @Override
            public boolean onDoubleTap(MotionEvent e)
            {


                return false;
            }
        };

        // Gesture detection on itself
        gestureDetector = new GestureDetector(getContext(), gestureListener_);
        gestureDetector.setOnDoubleTapListener(doubleTapListener);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event)
    {   
        if(gestureDetector.onTouchEvent(event)) return true;

        // Double tapping might perform zooming in/out
        // We need to prevent it
        if(doubleTapped)
        {
            doubleTapped = false;
            return doubleTapped;
        }
        return super.onTouchEvent(event);
    }


}

@Lambart I think **user948620** should've written: "IF" you use `WebView` for deploying your webapp `HTML+CSS+JS` in android you could 'Extend WebView and use GegstureDetector to detect double tap' with `Javascript`. For a "pure Javascript aproach", see this answer: http://stackoverflow.com/a/10910547/3424892 — lalengua, Oct 21 '16 at 00:05

score 0 · Answer 3 · answered Oct 24 '16 at 12:21

0

<meta name="viewport" user-scalable=no" />

will save your time if you don't want to optimize it for mobile.

answered Oct 24 '16 at 12:21

Hardik Patil

97
1
8

Disabling double tap zoom on Android web browsers, without viewport

3 Answers3