All geek questions in one place

Stop Android from zooming on double tap

I make a (very) small page that is used by speech and language therapists to count stuttering in a speech. For each syllable, they press the "Syllable" button, and for each stutter they press the "Stutter" button.

The intended use is on an Android tablet. I have all the code working (using jQuery). It works great on a computer. The problem is that you need to click quickly (once for each syllable). And when you quickly click on the Android browser, it scales and disappears and goes crazy.

So, is there a way to make the page a fixed width, so there's no need to zoom in and out, or is there another way to tell Android 4.0 not to do this double-click action.

Here is my code. I omitted jQuery and the head as I think it does not matter. But you can see how small the page is.

... <body> <h2>Stutter Count</h2> Syllables: <span id="s-count">0</span> <br> Errors: <span id="e-count">0</span> <br> Percent Errors: <span id="all-p-count"><span id="p-count">0</span>%</span> <br><br> <input type="button" value="Syllable" id="s-button">&nbsp; <input type="button" value="Error" id="e-button">&nbsp; <input type="button" value="Reset" id="reset"> </body> </html>

EDIT: My code is here: http://www.duncannz.com/pages/stutter-count.php (for the desktop) or http://www.duncannz.com/pages/stutter-count.php?mobile=1 (for mobile phones / tablets)

+4
source share
3 answers

You can use <meta> to limit scaling:

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

Then in your php check if this is a mobile device, if so, drives off the meta tag.

+4
source 
 <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width">

The Meta Viewport tag solves the problem in most cases. But Android has a strange problem, when the orientation changes, the meta tag is reset, and you can scale or scale the page again.

To fix this problem in the orientaionchange Android monitor and set the meta viewport tag on each changechange event.

Here is a link with a code snippet http://moduscreate.com/orientation-change-zoom-scale-android-bug/

+2
source

I have not tried your code, but something like this might help if you are using jQuery Mobile on the mobile side:

 $("input").live("focus", function () { $.mobile.zoom.disable(true); }); $("input").live("blur", function () { $.mobile.zoom.enable(true); });

This code should go up to your jQuery Mobile. Please note that focus and blurring may be wrong events in your case. I took this from the crop, which I used to turn off scaling if people clicked on my selection fields.

Just pay attention to the design: you may want to save your state in html5 localstorage and only send an invoice if the user finally selects the submit button.

+1
source

Source: https://habr.com/ru/post/1413882/

More articles:


All Articles