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

IT技术 javascript jquery android html
2021-03-08 17:07:20

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

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

<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();});

有任何想法吗？

6个回答

以下对我有用（Android Galaxy S2）：

<meta name="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, user-scalable=no;user-scalable=0;"/>
这绝对应该是当前的正确答案！
2021-05-15 17:07:20
适用于 iPhone X。这应该是正确答案
2021-05-17 17:07:20
这有效。但是，您应该使用 , 而不是 ; 我也猜想关于可用性的评论可能会被忽略，因为我们可能都在这里是因为在某些情况下糟糕的可用性体验，我们明确希望防止这种行为。
2021-05-18 17:07:20

不可能！

我有一些坏消息要告诉你们。现在已经6个月了，没有人正确回答这个问题。

我也已经完成了那个项目和雇主的工作。

我不敢说出来，但正是我所要求的，这是不可能的。对不起人民。但是我要保留这个问题，以便人们可以看到其他选项。

一年后有什么解决办法吗？
2021-04-21 17:07:20
解决方案有很多，最好是确保您的文档正文不超过原生屏幕尺寸。
2021-04-26 17:07:20
实际上，最大的问题不是缩放本身 - 为用户提供更好的选择来查看他们正在键入的内容是很好的 - 但事实上，在完成键入并关闭键盘后，页面不会像原来那样缩放。所以，我们只希望 Android 4.1 设备上的每个人都将他们的浏览器升级到最新的 Chrome……即使是那些仍在使用默认 Android 浏览器的人。
2021-04-30 17:07:20
在此处为 Chromium 问题报告添加一颗星，以便 Google 注意到这一点：code.google.com/p/chromium/issues/detail?id=181560
2021-05-01 17:07:20
现在是正式的：这个烦人的功能现在终于在新版本的 Chrome 中删除了！请参阅code.google.com/p/chromium/issues/detail?id=181560#c28和codereview.chromium.org/196133011。
2021-05-13 17:07:20

缩放问题导致输入焦点放大

针对不同的屏幕分辨率和尺寸调整内容大小非常困难，这最终是导致此缩放问题的原因。

大多数移动浏览器在输入焦点上有一个触发器（你不能毫无困难地覆盖）：

if (zoom-level < 1)
   zoom to 1.5
   center focused input relative to screen

*是的，这过于简化了。

元标记规模修复的神话。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">如果您缩小， 所有此类视口设置都不会阻止输入焦点缩放。这些也不会覆盖任何其他 html、body 或元素大小，这些都会将窗口推到比屏幕更宽的宽度。

主要原因

使用大于设备屏幕尺寸的窗口或主体尺寸。

考虑大多数 Galaxy 系列 Android 智能手机的标准屏幕尺寸：360 x 650。如果您的文档正文或窗口被定义为大于此尺寸（假设为 1024 宽以使其更明显），则可能有一些事情发生：

  1. 浏览器可能会自动缩小，以适应屏幕的宽度。
    1. 用户可以进行上述操作。
    2. 您可能已经完成了上述操作。
  2. 浏览器将在后续访问页面时恢复缩放级别。
  3. 您现在正在以 ~0.35 倍的缩放比例查看内容。

初始状态 1x

加载后，页面将不适合。一些浏览器可能会缩小以适应窗口，但用户肯定会这样做。此外，如果您在此页面上缩小一次，浏览器将存储缩放级别。

缩小以适合 0.35 倍

缩小后，宽度会很好地适应，并且具有更多垂直区域的页面会很好地填满屏幕......但是......

请注意，浏览器现在处于文本和输入（正常 1 倍缩放的大小）太小而无法阅读的状态，因此在输入字段获得焦点时会触发缩放输入字段的可用性行为。

放大输入焦点 1.5 倍

上述情况下的典型行为是缩放到 1.5 倍，以确保输入可见性。结果（如果您将所有内容都设置为在缩小时看起来更好，或者对于更大的屏幕）并不理想。

方案一

使用 css 媒体规则、设备检测或任何最适合您情况的组合。将窗口和主体设置为填充屏幕空间的大小，但不超过它。

  • 这就是为什么这么多人成功将输入文本大小强​​制为 16px 的原因；
    • 一旦你这样做了，很明显你已经缩小了。
    • 它还具有诱使浏览器允许稍微缩小的窗口不触发焦点缩放的额外好处。

解决方案2

使用元视口，但要注意 css 宽度。

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  • 使用此方法时，您必须执行以下操作之一：
    • 仅对宽度使用百分比。
    • 定义一个 em 宽度，并且只使用 em 和 % 作为宽度。
    • 有关使用 px 宽度的信息，请参阅解决方案 1。

解决方案3

jQuery.mobile $.mobile.zoom.disable();

只要确保你从一开始就使用它进行开发，而不是从中间开始。

我不确定这是否是最好的方法，但这对我在 android 和 iphone 上都有效。

input:focus { font-size: 16px!important}

您只能使用媒体查询来定位移动设备。

您不能使用媒体查询仅定位移动设备的宽度或高度。许多触摸设备与桌面设备一样大。触摸或非触摸设备检测是脚本或服务器端。
2021-04-22 17:07:20
...此外，这通常是由不正确大小/缩放的窗口/主体引起的。
2021-05-07 17:07:20
我认为这甚至不是一个正确的答案。自动缩放的问题不仅在于“小字体”，还在于元素定位不当的错觉。例如，在我的情况下，输入被放大而不是在屏幕上居中，所以当用户不知道这个“自动缩放”时，我被报告为“错误的对话位置”
2021-05-14 17:07:20

是的，有可能

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

在 Android 4.2 浏览器和 Android Chrome 中测试。

https://stackoverflow.com/a/6394497/4264

我发现它保持缩放的唯一情况是在 Chrome 中设置 -> 辅助功能 -> 文本缩放高于 100%。

其它你可能感兴趣的问题
上一篇如何告诉 Google 翻译不要翻译网站的某个部分？ 下一篇如何使用 jQuery 禁用粘贴 (Ctrl+V)？