Mobile Safari でキーボードが表示されたときに固定されたナビゲーション要素を修正する方法

Mobile Safari での固定ナビゲーション要素の修正

Mobile Safari で仮想キーボードが開いたときに、固定ナビゲーション要素が確実に所定の位置に残るようにするのは困難な場合があります。この問題は、Mobile Safari の固定要素の処理における既知のバグが原因です。

dansajin によって提案された解決策の 1 つは、入力フィールドがフォーカスを受け取ったときに固定要素の位置を切り替えることです。フォーカスが設定されると、固定要素はposition:absoluteに設定され、フォーカスが失われると、position:fixedに戻ります。

このアプローチを実装するには、次の 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');
    });
}

以上がMobile Safari でキーボードが表示されたときに固定されたナビゲーション要素を修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。