13

私は一番下に固定された一番下の引き出しを持っています。タップすると、ドロワーが上にスライドして、より多くのコンテンツが表示されます。iOS 7 で、ユーザーが入力タグまたはテキストエリア タグをタップすると、仮想キーボードがポップアップします。ただし、キーパッドがポップアップすると、引き出しが一番下にくっつくのではなく、ページ上で跳ね上がります。下の図を参照してください。 ここに画像の説明を入力

私は最初にSafariでも問題に遭遇しましたが、次のコードを追加して、キーパッドが開いているときに固定位置を絶対位置に変更しました。

// Apple.Device detects if it is an apple device
if (Modernizr.touch && Apple.Device) {
    /* cache dom references */ 
    var $body = jQuery('body'); 

    /* bind events */
    $(document)
    .on('focus', 'input, textarea', function(e) {
        $body.addClass('fixfixed');
    })
    .on('blur', 'input, textarea', function(e) {
        $body.removeClass('fixfixed');
    });
} 

CSS コード:

.fixfixed #drawer {
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    left: 0;
    right: 0;
}

この修正は、iOS 7 の Safari では機能しますが、Chrome では機能しません。また、奇妙な動作があります。

ページに入力タグがあり、iPad でそれをタップすると、仮想キーボードが開き、ドロワーがジャンプします。ドロワーがたまたまクリックした場所を覆っている場合、クリックイベントは実際にドロワーで発生します。何故ですか?

この問題を解決するにはどうすればよいですか? (しばらく探していましたが、iOS で Chrome をデバッグするにはどうすればよいですか?)

助けてくれて本当にありがとうございます!

アップデート

次のコードを使用して、iOS 7 の Chrome であるかどうかを検出しました。そうであれば、仮想キーボードがアップしているときにドロワーを非表示にし、仮想キーボードがダウンしているときにドロワーを再表示します。

function iOSversion() {
    if (/iP(hone|od|ad)/.test(navigator.platform)) {
        // supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
        var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
        return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
    }
}

var iosVersion = iOSversion();

if (navigator.userAgent.match('CriOS') && iosVersion[0] == '7') {
   $(document).hammer().on('tap', 'input, textarea', function(e) {
            $('body').addClass('chromefixfixed');
        })
            .on('blur', 'input, textarea', function(){
                body.removeClass('chromefixfixed');
            })
}

CSS コード:

.chromefixfixed #drawer {
    display: none;
}

まだ問題が残っています: どうすれば iOS 7 の Chrome を Android の Chrome のように動作させることができますか?

助けてくれてありがとう!

4

1 に答える 1