javascript - 动态更改文本框焦点上的视口可防止 Android 键盘显示

Question

我们在响应式站点中有一个文本框，当聚焦时，我们希望防止在移动浏览器中自动缩放。

我们目前正在使用以下 javascript 片段来实现这一点。

$(document).ready(function() {
    var metaViewport = $('head').find('meta[name=viewport]');
    $('input[type="textbox"]')
    .on('focus', function () {
            metaViewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no');
    })
    .on('blur', function () {
            metaViewport.attr('content', 'width=device-width, initial-scale=1, maximum-scale=2, user-scalable=yes');
    });
});

但是，这会破坏使用股票浏览器的 Android 设备上的屏幕键盘，文本框获得焦点后不会显示键盘。这已经在 Android 版本 2.3.5 和 4.1 上进行了测试和验证

同样，这是在股票浏览器中，在 Chrome 中它工作正常。

这里的任何人都知道是否有某种解决方法，或者我们是否只需要为 Android 浏览器禁用此功能？

这是一个演示此行为的实时链接http://creamdog.se/meta/

Answer 1

have you tried –</p>

input[type="textbox"] {
    font-size: 1em;
}

in your CSS?

Similar to this - Disable Auto Zoom in Input "Text" tag - Safari on iPhone ?