4

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">&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 desktop), or http://www.duncannz.com/pages/stutter-count.php?mobile=1 (for mobiles/tablets)

  • My intuition says that to override HTML to prevent zooming would be a horrible mis-feature so it isn't there. It does allow you to make an prototpe in very few lines, but this strikes me as a rather inaccurate counter which is heavily dependent upon the connection to the server being able to keep up with ~4 clicks/second. This would probably be much better as a native app even though that is considerably more work. – msw May 23 '12 at 04:39
  • 1. Since it's all client-side, the server only serves up the page once. The jQuery handles the rest and the clicks happen instantly. So that's not a problem (unless I understood you wrongly) 2. Is there an easy way to convert HTML into an APK? I don't care how bad it looks. I've tried AppsGeyser.com but it doesn't work. –  May 23 '12 at 04:52
  • You've already exceeded my knowledge with the client-side JQuery stuff. Sorry to have commented outside my domain. – msw May 23 '12 at 05:03
  • I've just tried it with http://beta.appinventor.mit.edu/ App Inventor's "WebViewer" function (listed under "Not ready for Primetime"). It works (ie doesn't zoom on double-tap), but can't keep up with ~2 taps a second. –  May 23 '12 at 07:13
  • I'm not sure what your app does, but if it only does "count how many times a button is pressed", with 2 buttons, You'd probably be best of by making a native app. Making, not converting. The hello-world will get you running in no-time, then all you have to do is make a button with an onclicklistener that does `+1` to some var. That is way the quickest. – Nanne May 23 '12 at 10:18
  • It's more than "count how many times a button is pressed", it also has percentage counts (see it the link above), and I don't really want to go into app development. I did this project because I wanted to start with jQuery. It's working now as a webpage thanks to @NiftyDude 's suggestion though. –  May 24 '12 at 06:25

3 Answers3

3

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.

Andreas Wong
  • 59,630
  • 19
  • 106
  • 123
2
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width">

Meta Viewport tag does solve the problem in most of the cases. But Android has a strange issue where on orientation change the meta tag is reset and you can scale or zoom the page again.

For fixing this issue in Android monitor orientaionchange and set meta viewport tag on every orientationchange event.

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

Ankit Garg
  • 384
  • 3
  • 4
0

I didn't try your code, but something like this could 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 before your jQuery Mobile include. Note that focus and blur may not be the right events in your case. I took this from a snipped I used to disable zooming if people clicked on my select boxes.

Just a note on design: you may want to consider saving your state to html5 localstorage and only submitting the count if a user finally selects the submit button.

Jack
  • 16,506
  • 19
  • 100
  • 167
  • Do you mean like this? Because I still haven't got it working. ` ` –  May 23 '12 at 08:45
  • http://api.jquery.com/live/ says that live() is deprecated. I changed it to on("click") but still not working. –  May 23 '12 at 08:57
  • I think you are on the right track, but I don't have the time to test this at the moment. If I think of something in the meantime then I will let you know. – Jack May 23 '12 at 09:53
  • Got it thanks to viewport (@NiftyDude 's suggestion). So I'm not using jQuery mobile at all, just jQuery. –  May 24 '12 at 06:26