3

レスポンシブ サイトにテキスト ボックスがあり、フォーカスされているときに、モバイル ブラウザーでの自動ズームを防止したいと考えています。

現在、これを実現するために次の 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/

4

1 に答える 1

3

試してみましたか?</p> 

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

あなたのCSSで？

これに似ています-入力「テキスト」タグで自動ズームを無効にします-iPhoneのSafari？

于 2013-01-21T15:51:22.327 に答える