ホームページ >ウェブフロントエンド >CSSチュートリアル >仮想キーボードを使用して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 サイトの他の関連記事を参照してください。