禁用 Android 网页中输入焦点的缩放

Posted 2023-03-05

【中文标题】禁用 Android 网页中输入焦点的缩放

【英文标题】：Disable zoom on input focus in Android webpage

【发布时间】：2011-10-27 18:05:27

【问题描述】：

这是两难境地，我有一个网页（仅适用于 android 设备），在该页面中我有一个输入框（特别是一个文本框），当它获得焦点时，浏览器会放大。我不希望它放大in - 听起来很简单，对吧？

这就是有趣的地方：我必须能够放大，所以不要说

<meta name='viewport' content='user-scalable=0'>

这对我不起作用。

另外，输入框不接收点击事件。当单击另一个按钮时，它会以编程方式获得焦点。

这是我尝试过的方法，但到目前为止都失败了：

jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=no" />');
jQuery("#locationLock input").focus();
jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=yes" />');

这也失败了：

<input type='text' onfocus="return false">

还有这个：

jQuery("#locationLock input").focus(function(e)e.preventDefault(););

有什么想法吗？

【问题讨论】：

因此 Chrome 浏览器仅在输入字段中已有内容时才会缩放，因此您可以尝试完善删除内容，设置超时，然后稍后再添加内容，大约（150 毫秒）。第一次长时间关注输入字段仍然存在一些问题。 IMO，如果您想这样做，请保持超时时间短，出于 UX 原因添加一点 jQuery 加载效果，并回退到简单地为输入使用 18px 字体大小。缩放在那里，因此用户可以更轻松地更改插入符号的位置，所以也考虑一下。

在此处为问题加注星标：code.google.com/p/chromium/issues/detail?id=181560

版主注意：随着时间的推移，这个问题已经积累了 30 多个答案。在添加新答案之前，请确保您的解决方案尚未提供。

【参考方案1】：

将此元标记添加到您的 html 文件中，它将解决问题。

<meta name="viewport" content="width=device-width, user-scalable=no" />

添加此行解决了我在 HTC 渴望 816 和 SAMSUNG GALAXY S5 中的问题。

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。

现在检查答案 SVMRAJESH 它会解决因为它已经为我解决了

请检查时间。我在2小时前提到过。但是在看到我的评论后，只有您在此处添加的代码。如果它解决了问题，那么好的。但不要像过去一样简单地给出文本。

酷哥们。没有问题

【参考方案2】：

尝试使用它，这将适合设备尺寸并避免放大/缩小

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

【参考方案3】：

根据我的尝试，最有效的方法是将输入内的字体设置为 16 像素或更多。绝对适用于 chrome 上的最新版本。

【参考方案4】：

这可能是解决这类问题的方法

<meta name="viewport" content="user-scale=no"/>
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="width=device-width, maximum-scale=0.9"/>

【讨论】：

请参阅***.com/a/26153083/1589379 第 2 节，“元标签规模修复的神话。”

【参考方案5】：

我的建议是查看best practices for android web development。更具体地说，您可能需要在元标记中包含更多内容以防止发生缩放。例如：

<!-- set the screen width to the device width -->
<!-- set the viewport to be non-zoomable -->
<!-- fix the initial zoom to be 1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

【讨论】：

这没有回答问题...我说我需要能够缩放，我只是想防止放大输入框...这段代码仍然放大输入框并防止缩放，所以我不能缩小。

这个答案还不够接近。

【参考方案6】：

这对我很有用。

input[type='text'],input[type='number'],textarea font-size:16px; !important

【讨论】：

将内容强制为特定的字体大小不是可接受的解决方案，因为在高清分辨率屏幕上为 16 像素，将难以阅读，除非您还强制使用 css 进行一定程度的缩放。这将使它成为一个非常糟糕的 css hack，在其他系统上无法正常工作。

...此外，这通常是由不正确的尺寸/缩放窗口/主体引起的。

【参考方案7】：

找到解决方案！！！！！！！！！！！！！！！

至少对于使用 Phonegap/Cordova 的人来说

我正在使用带有 Android Froyo (2.2) 的 Galaxy Tab pc1010 我正在使用 Cordova 2.4.0

将这些漂亮的线条添加到您的 HTML 头部元素中：

<meta name="viewport" content="user-scale=no"/>
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="width=device-width, maximum-scale=0.9"/>

分别键入它们并使用 0.9 的最大比例。我在选择一个输入字段时遇到了这个问题，我的布局从顶部和左侧稍微调整了一下，尝试使用 javascript 元素样式修改来修复它，但它很糟糕。感谢上帝，我在一个旧的移动网站项目中找到了这个配置，这个项目是使用一些教程和这个技巧创建的。

【参考方案8】：

如果有人想知道您实际上可以通过将输入设置为只读来绕过整个输入框缩放（当然是在 iTouch 上，因为这是我必须测试的全部内容）。

$("#your-input").focus(function(event)
event.preventDefault();
$(this).prop( readOnly: true );
/*
Do your magic

*/
$(this).prop(readOnly:false);
);

---

我真的很惊讶没有人尝试过这个！

【讨论】：

这不会阻止用户在输入框中输入内容吗？