在没有视口的情况下禁用 Android 网络浏览器上的双击缩放答案

【问题标题】：Disabling double tap zoom on Android web browsers, without viewport在没有视口的情况下禁用 Android 网络浏览器上的双击缩放
【发布时间】：2013-01-12 17:07:28
【问题描述】：

我想在 Android 浏览器上禁用我网页中 div 的双标签缩放。我尝试阻止触摸启动和触摸移动的默认设置，取消气泡/传播。我什至尝试过 jQuery mobile doubletap 事件，但它会在元素缩放后触发。

【问题讨论】：

标签： javascript dom-events android-browser

【解决方案1】：

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

如果您不想针对移动设备进行优化，将会节省您的时间。

【讨论】：

【解决方案2】：

添加以下元。这将在大多数移动浏览器中停止双击缩放，但会在您的页面上的任何地方停止它 - 而不仅仅是在您的单个 div 中。恐怕要么全有，要么全无。

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

【讨论】：

【解决方案3】：

扩展WebView 并使用GegstureDetector 来检测双击。

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


}

【讨论】：

这和javascript有什么关系？
@Lambart 我认为 user948620 应该写：“如果”你使用 WebView 在 android 中部署你的 webapp HTML+CSS+JS 你可以'扩展 WebView 并使用 GegstureDetector用Javascript 检测双击'。对于“纯 Javascript 方法”，请参阅此答案：stackoverflow.com/a/10910547/3424892
@lalengua 这很有道理。你可能是对的。