Disable double tap zoom on Windows Phone

问题:

I've been working on a browser based clicking game using HTML and JavaScript. I have managed to suppress default behaviours causing mobile browsers to zoom, scroll and perform various other tricks in iOS and Android.

However with the Windows Phone a double click still causes it to try and zoom in. In testing it zooms in and then reverts back to its normal size but this is enough to block the game play element, which is clicking as fast as you can.

I have the following in HTML:

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

I also have the following in JavaScript:

window.addEventListener('touchstart', function(e) {
    clickarea.trigger('click'); // this is what tracks the number of clicks / touches
    e.preventDefault();
}, false);

window.addEventListener('touchmove', function(e) {
    e.preventDefault();
}, false);

window.addEventListener('touchend', function(e) {
    e.preventDefault();
}, false);

Does Windows Phone have any additional events that I'm missing or is there an error in my code?

回答1:

Windows phones use Microsoft's proprietary touch events instead of the standard ones, you'll need to add conditional code to listen for them.

adapting-your-webkit-optimized-site-for-internet-explorer-10

回答2:

You can change the touch start event with mouse down or MSPointer events as explained in the below link : http://blogs.windows.com/windows_phone/b/wpdev/archive/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10.aspx#step4

回答3:

The webbbrowser control in Windows Phone still allows for zoom and scroll because this is done on a control "above" the actual browser component.

This can be disabled in C# (additionally you can probably detect right/left vs up/down scroll gestures and suppress them individually)

See this blog entry for a full description: http://www.scottlogic.co.uk/blog/colin/2011/11/suppressing-zoom-and-scroll-interactions-in-the-windows-phone-7-browser-control/

Peter

Answer copied from: phone:WebBrowser disable pan/zoom wp7?

回答4:

I saw an error

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

last user-scalable value is wrong. Next string should work:

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