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

发布于 2024-12-10 03:45:50 字数 882 浏览 0 评论 0原文

我编写了一个小型网络应用程序来收集一些数据并将其存储在中央数据库中。我四处走动，读取数值并将其输入到我的 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。

原文

I have written a small web app to collect some data and store it in a central database. I'm walking around, reading values and typing them into a web site on my Android smartphone. It's just for me, so no public usability concerns apply this time.

Now I want to add a button to increment a reading by one, and I need to be able to push that button several times. But if I do it too fast, the browser recognises a double-tab and scales/zooms into the page.

I have added a viewport header already and played with every value combination I could find on the web. But the page remains scalable. How can I stop that?

Here's a minimal test page that fails for me:

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

Adding initial-scale=1, maximum-scale=1 and all sorts of target-whateveritwas-dpi doesn't change a thing. I have restarted the browser (Dolphin HD and the stock browser) and cleared the cache already. I'm on Android 2.2, the phone is an HTC Desire.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无需解释 2024-12-17 03:45:50

这在所有 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 worked for me in all android browsers:

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

A common mistake is that people use 2 meta viewport tags like this:

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

The second meta viewport tag overrides the first one in some browsers (for example - chrome for android).
There is no reason to have two meta viewport tags, as the second one is contained within the first one.

See This answer for more details

回复收藏 0 原文

初雪 2024-12-17 03:45:50

这是 Android 浏览器中的一个已知错误：http://code.google.com/p/android/问题/详细信息？id=11912

回复收藏 0 原文

半窗疏影 2024-12-17 03:45:50

我已经尝试了所有这些，但对我不起作用。我发现这个确实有效。

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

I have tried all of them but not work for me. And I found this one really work.

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

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

回复收藏 0 原文

固执像三岁 2024-12-17 03:45:50

<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width">

元视口标签确实解决了大多数情况下的问题。但 Android 有一个奇怪的问题，即方向更改时元标记会重置，您可以再次缩放或缩放页面。

为了修复 Android 中的此问题，请监视 orientaionchange 并在每个orientationchange 事件上设置元视口标记。

这是带有代码片段的链接 http://moduscreate.com/orientation-change -zoom-scale-android-bug/

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

回复收藏 0 原文

情深如许 2024-12-17 03:45:50

“user-scalable=no”从来没有对我有用，相反，我使用“user-scalable=0”，这似乎很有效。

回复收藏 0 原文

游魂 2024-12-17 03:45:50

使用以下代码行：

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

请在其他手机上检查您的应用程序并检查。请通过以下链接您将获得想法：

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

回复收藏 0 原文

请爱~陌生人 2024-12-17 03:45:50

同时尝试所有这些（摘自此处)：

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

然后告诉我们您的经历

Try all of this at the same time (extracted from 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" />

Then tell us your experience

回复收藏 0 原文

~没有更多了~