仮想キーボードを使用して Mobile Safari で固定要素がジャンプしないようにするにはどうすればよいですか?

仮想キーボードを使用した Mobile Safari のバグのある固定要素

Mobile Safari での固定要素の処理は、特に仮想キーボードを使用する場合に困難になることがあります。が開かれます。一般的な問題は、ナビゲーション内の入力フィールドがフォーカスを取得したときに、固定ナビゲーション要素が予期せずジャンプするときに発生します。

原因と解決策

この動作は、既知のエラーが原因である可能性があります。モバイルSafariの問題。提案されたソリューションには、固定要素の位置を動的に変更することが含まれます。

• 入力要素がフォーカスを取得し、仮想キーボードが表示されたら、固定要素の位置プロパティを絶対に切り替えます。
• 入力要素がフォーカスを失い、キーボードが非表示になったら、元の固定位置を復元します。

コード スニペット

次のコード スニペットは、この解決策を示しています。

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

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 サイトの他の関連記事を参照してください。