如何使用虚拟键盘修复 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中文网其他相关文章！