javascript - 动态更改文本框焦点上的视口(viewport)会阻止显示 Android 键盘

Question

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

我们目前正在使用以下 javascript fragment 来实现这一目标。

$(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

你试过吗-

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

在你的 CSS 中？

与此类似 - Disable Auto Zoom in Input "Text" tag - Safari on iPhone ？