仮想キーボードを使用してMobile Safariでのナビゲーションのズレを修正する方法?

仮想キーボードを使用した Mobile Safari でのナビゲーションの移動を修正しました

Mobile Safari では、特に仮想キーボードがナビゲーションの入力フィールドをオーバーレイする場合に、固定要素による複雑な問題が発生することがよくあります。観察されたとおり、ナビゲーションが予期しない場所に突然移動し、意図した動作が中断されます。

この問題を解決するには、次の解決策を検討してください。

1.固定から絶対への切り替え

このメソッドは、入力がフォーカスを獲得すると固定要素の位置を絶対に動的に切り替え、フォーカスを失うと固定要素に戻します。

<code class="CSS">.header { 
    position: fixed; 
} 
.footer { 
    position: fixed; 
} 
.fixfixed .header, 
.fixfixed .footer { 
    position: absolute; 
} </code>

<code class="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');
    });
}</code>

代替ソリューション:

以下のリンクで提供されるソリューションを確認してください。これらの提案は、この特定のモバイル Safari のバグに対する潜在的な解決策を提供します。

[モバイル Safari で位置を修正](http://dansajin.com/2012/12/07/fix-position-fixed/)

以上が仮想キーボードを使用してMobile Safariでのナビゲーションのズレを修正する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。