Question

我们在一个resonsive网站上有一个文本框，当我们关注时，我们希望阻止移动浏览器中的自动缩放。

我们目前正在使用以下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

你尝试过吗？

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

在你的CSS中

？

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

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

1 个答案: