Stop Android from zooming on double-tap
I'm making a (very) small page which is used by Speech and Language therapists to count stutters in speech. For each syllable they press a "Syllable" button, and for each stutter they press a "Stutter" button.
The intended use is on an Android Tablet. I have all the code working (using jQuery). It works fine on a computer. The problem is: you have to tap fast (once for every syllable). And when you tap fast on the Android browser, it zooms in and out and goes crazy.
So is there a way to make the page have a fixed width so it feels no need to zoom in and out, or another way to tell Android 4.0 not to do that double tap zoom action.
Here's my code. I've omitted the jQuery and head as I think it's irrelevant. 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">
<input type="button" value="Error" id="e-button">
<input type="button" value="Reset" id="reset">
</body>
</html>
EDIT: My code is here: http://www.duncannz.com/pages/stutter-count.php (for desktop), or http://www.duncannz.com/pages/stutter-count.php?mobile=1 (for mobiles/tablets)
Answer
You could use <meta> to restrict zooming:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Then in your php, check whether this is a mobile device, if so, echoes out that meta tag.