Question

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

预期用途是在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（适用于手机/平板电脑）

Answer 1

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

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

然后在php中，检查这是否是移动设备，如果是，请回显meta标记。

Answer 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标记可以解决问题。但Android存在一个奇怪的问题，即在方向更改时，元标记会重置，您可以再次缩放或缩放页面。

在Android监视器orientaionchange中解决此问题，并在每个orientationchange事件上设置元视口标记。

以下是代码段http://moduscreate.com/orientation-change-zoom-scale-android-bug/

的链接

Answer 3

我没有尝试你的代码，但如果你在移动端使用jQuery Mobile，这样的东西会有所帮助：

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

此代码应该在您的jQuery Mobile包含之前。请注意，焦点和模糊可能不是您的情况下的正确事件。如果有人点击我的选择框，我就会从一个剪掉的照片中使用它来禁用缩放。

关于设计的注意事项：您可能需要考虑将状态保存到html5 localstorage，并且只有在用户最终选择提交按钮时才提交计数。

停止Android轻击双击

3 个答案: