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中文網其他相關文章!