Mobile Safari で仮想キーボードがアクティブになると固定ナビゲーションがジャンプするのはなぜですか?

仮想キーボードのアクティブ化中に固定ナビゲーションがジャンプしないようにする方法

Mobile Safari で仮想キーボードが表示されるときに、固定ナビゲーション要素が予期しない動作を示す場合があります。これにより、ナビゲーションがページの中央の望ましくない位置にジャンプする可能性があります。

問題

ユーザーは、次の場合に固定ナビゲーション要素の位置が突然移動することがあります。固定ナビゲーションのテキスト入力フィールドにフォーカスすると、仮想キーボードが表示されます。これは、ナビゲーション要素がページの下部に配置されている場合に特に顕著です。

解決策

このバグに対処するには、次の CSS および JavaScript コードの使用を検討してください。 :

CSS:

.header {
    position: fixed;
}

.footer {
    position: fixed;
}

.fixfixed .header,
.fixfixed .footer {
    position: absolute;
}

JavaScript:

if ('ontouchstart' in window) {
    /* Cache DOM references */
    var $body = $('body');

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

次の場合に、fixfixed クラスを本文に追加します。入力要素がフォーカスされており、入力がぼやけているときにそれを削除すると、固定要素をposition:Absoluteに切り替えてから、必要に応じてposition:fixedにリセットできます。このソリューションは、キーボードのアクティブ化中にナビゲーション要素がジャンプするのを効果的に防ぎます。

以上がMobile Safari で仮想キーボードがアクティブになると固定ナビゲーションがジャンプするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。