logo标签列表

如何在安卓设备上禁用网页缩放？

androidhtmlscalingviewport
26

我编写了一个小型Web应用程序来收集数据并将其存储在中央数据库中。我正在走动，读取值并将其输入到我安卓智能手机上的网站中。这仅适用于我自己，因此此次不存在公共可用性问题。

现在我想添加一个按钮以使读数增加一，并且我需要能够多次按下该按钮。但是，如果我按得太快，浏览器会识别出双击并缩放/放大页面。

我已经添加了视口头并尝试了在网上找到的每种值组合。但页面仍然可缩放。我该如何停止它？

这是一个最简测试页，无法解决问题：

<!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和各种目标-dpi不会改变任何东西。我已经重新启动了浏览器（Dolphin HD和库存浏览器）并清除了缓存。我使用的是Android 2.2，手机是HTC Desire。

你找到解决方案了吗？我在三星设备和HTC上遇到了同样的问题。元标签不起作用。 - Renato H.
这个评论提出了一个非常相似的问题，答案显然是你必须接受它：https://dev59.com/Z2w05IYBdhLWcg3wuUAL - hotshot309
7个回答
48

这在所有安卓浏览器中都对我有效：

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

一个常见的错误是人们使用两个meta viewport标签，如下所示：

<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" />
第二个meta视口标签会在某些浏览器中覆盖第一个标签（例如：安卓Chrome浏览器）。没有必要使用两个meta视口标签，因为第二个标签已包含在第一个标签内。 更多细节请参考这个答案。
13
这听起来非常合理。考虑到其他有用答案的数量很少，我接受了。 - ygoe
7
“user-scalable=no” 对我来说从未起作用，相反我使用“user-scalable=0”，这似乎非常有效。 - davidford.me
@dvdfrddsgn 那可能行得通，但我认为基于 user-scalable API 它是无效的。 - JohnnyQ
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/

这篇文章介绍了如何禁用安卓浏览器的缩放功能并强制使用本机分辨率。在移动设备上，网页通常会根据屏幕大小进行缩放，但这可能会导致页面布局混乱或字体过小。通过禁用缩放功能并强制使用本机分辨率，可以解决这些问题。

我曾经遇到过同样的问题，这是唯一适用于Android浏览器、Chrome和iPhone的解决方案。 - Ronny Sherer
1
<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存在一个奇怪的问题，在方向更改时，meta标签将被重置，您可以再次缩放或缩小页面。
为了解决这个问题，在Android监视方向更改并在每个方向更改事件上设置meta viewport标签。
以下是带有代码片段的链接 http://moduscreate.com/orientation-change-zoom-scale-android-bug/。
-1
"

user-scalable=no

" 对我从来没有起作用，相反我使用 "user-scalable=0"，这似乎非常有效。
我也无法使用。即使使用那个设置，我仍然可以缩放。似乎Android（2.2）根本无法实现它。 - ygoe
-2
请使用以下代码行：

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

请检查您的应用程序是否支持其他移动设备。请查看下面的链接，您将了解更多信息：

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

-4

同时尝试以下所有操作（摘自此处）：

<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" />

那么请告诉我们您的经验

抱歉回复晚了，Stackoverflow的通知过去效果更好。您提供的代码并没有改变任何东西。我仍然可以缩放页面。 - ygoe
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接