4

我正在制作一个（非常）小页面，语音和语言治疗师使用它来计算语音中的口吃。对于每个音节，他们按下一个“音节”按钮，对于每个口吃，他们按下一个“口吃”按钮。

预期用途是在 Android 平板电脑上。我有所有的代码工作（使用jQuery）。它在计算机上运行良好。问题是：你必须快速敲击（每个音节敲一次）。当您在 Android 浏览器上快速点击时，它会放大和缩小并变得疯狂。

那么有没有办法让页面有一个固定的宽度，所以感觉不需要放大和缩小，或者另一种方法告诉Android 4.0不要做双击缩放动作。

这是我的代码。我省略了 jQuery 和 head，因为我认为这无关紧要。但是你可以看到页面有多小。

...
<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>

编辑：我的代码在这里：http ://www.duncannz.com/pages/stutter-count.php （桌面版），或http://www.duncannz.com/pages/stutter-count.php?mobile= 1（用于手机/平板电脑）

4

3 回答 3

3

您可以<meta>用来限制缩放：

<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.

于 2012-05-23T09:00:30.643 回答
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/

于 2013-02-14T00:52:31.563 回答
0

我没有尝试您的代码，但是如果您在移动端使用 jQuery Mobile，这样的事情可能会有所帮助：

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

这段代码应该在你的 jQuery Mobile 包含之前。请注意，在您的情况下，焦点和模糊可能不是正确的事件。如果人们点击我的选择框，我会从我用来禁用缩放的截图中截取这个。

只是关于设计的一个说明：您可能需要考虑将您的状态保存到 html5 本地存储，并且仅在用户最终选择提交按钮时才提交计数。

于 2012-05-23T08:18:18.813 回答