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

Question

这是困境,我有一个网页(仅适用于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();});

有任何想法吗？

Answer 1

以下对我有用(Android Galaxy S2):

<meta name="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, user-scalable=no;user-scalable=0;"/>

Answer 2

不可能!

我为你们所有人带来了一些坏消息.现在已经6个月了,没人能正确回答这个问题.

我也完成了该项目和雇主的工作.

我不敢这么说,但我所要求的确实是不可能的.对不起人民.但是我要把这个问题保留下去,以便人们可以看到其他选择.

Answer 3

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

在调整不同屏幕分辨率和大小的内容时存在很大的困难,这最终导致了这种缩放问题.

大多数移动浏览器都会在输入焦点上触发(您不能轻易超越):

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

*是的,这是过度简化的.

meta-tag scale的神话修复.

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

主要原因

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

考虑大多数Android系列Android智能手机的标准屏幕尺寸:360 x 650.如果您的文档正文或窗口被定义为大于那个(让我们说1024宽以使其显而易见),可能会有一些事情发生:

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

初始状态1x

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

缩小至适合0.35x

一旦缩小,宽度将很好地适应,并且具有更多垂直区域的页面将非常好地填充屏幕......但是......

请注意,浏览器现在处于一种状态,其中文本和输入(大小为正常的1倍缩放)太小而无法读取,从而触发在获得焦点时缩放输入字段的可用性行为.

放大输入焦点1.5倍

在上述情况下的典型行为是缩放到1.5倍,以确保输入可见性.结果(如果您在缩小时或者对于较大的屏幕时将所有内容设置为更好的样式)都不太理想.

解决方案1

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

• 这就是为什么这么多人成功将输入文本大小强​​制为16px;
  • 一旦你这样做,很明显你已经缩小了.
  • 它还有一个额外的好处,就是欺骗浏览器允许稍微缩小的窗口不会触发焦点缩放.

解决方案2

使用元视口,但请注意css宽度.

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

• 使用此方法时,必须执行以下操作之一:
  • 仅使用宽度百分比.
  • 定义em宽度,仅使用em和%作为宽度.
  • 请参阅解决方案1以了解使用px宽度.

解决方案3

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

只要确保从一开始就开始使用它,而不是从中间开始.

Answer 4

我不确定这是不是最好的方法,但这对我和android和iphone都适用.

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

您可以使用媒体查询仅定位移动设备.

Answer 5

CSS有一个解决方案： input{ touch-action: none; }

Answer 6

是的，有可能

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

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

/sf/answers/447614821/

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