Question

我编写了一个小型Web应用程序来收集一些数据并将其存储在中央数据库中。我走来走去，阅读价值观并在我的Android智能手机上输入网站。这只适合我，因此这次没有公开的可用性问题。

现在我想添加一个按钮来增加一个读数，我需要能够多次按下该按钮。但是如果我做得太快，浏览器会识别双标签并缩放/缩放到页面中。

我已经添加了一个视口标题，并且可以使用我在网络上找到的每个值组合。但页面仍然可扩展。我怎么能阻止它？

这是一个失败的最小测试页面：

<!doctype html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<style type="text/css">
body
{
    font: 16pt sans-serif;
}
</style>
</head>
<body>
This is a test page. It should not be scalable by the user at all. Not with the two-pinger pinch gesture and even less with a double-tap on the text.
</body>
</html>

添加initial-scale = 1，maximum-scale = 1和各种target-whateveritwas-dpi不会改变任何东西。我已重新启动浏览器（Dolphin HD和股票浏览器）并已清除缓存。我在Android 2.2上，手机是HTC Desire。

Answer 1

这适用于所有Android浏览器：

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

一个常见的错误是人们使用2个元视口标签：

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />

第二个元视口标记覆盖了某些浏览器中的第一个（例如 - 用于android的chrome）。没有理由有两个元视口标记，因为第二个包含在第一个视图标记中。

有关详细信息，请参阅This answer

Answer 2

这是Android浏览器中的已知错误：http://code.google.com/p/android/issues/detail?id=11912

Answer 3

我尝试了所有这些但不适合我。我发现这个确实有效。

     <!-- set viewport to native resolution (android) - disable zoom !-->
   <meta 
       name="viewport" 
       content="target-densitydpi=device-dpi; width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" 
    />

来自http://andidittrich.de/index.php/2012/02/disable-zoom-function-of-android-browser-force-native-resolution/

Answer 4

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

“user-scalable = no”对我来说从未起作用，相反，我使用“user-scalable = 0”，这似乎是一种享受。

Answer 6

使用以下代码行：

检查应用程序三星Galaxy S它支持。但是当我在Galaxy Ace中打开相同的链接时，关闭缩放不支持。

请检查您的应用程序其他移动设备并检查。请通过以下链接获取您的想法：

http://garrows.com/?p=337

Answer 7

同时尝试所有这些（从here中提取）：

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />

然后告诉我们您的经历

如何禁用Android上的网页缩放/缩放？

7 个答案: