모바일 Safari에서 가상 키보드가 활성화될 때 고정 탐색이 점프하는 이유는 무엇입니까?

가상 키보드 활성화 중 고정 탐색이 점프하는 것을 방지하는 방법

가상 키보드가 Mobile Safari에 나타날 때 수정 탐색 요소가 예기치 않은 동작을 나타낼 수 있음 . 이로 인해 탐색이 페이지 중앙의 바람직하지 않은 위치로 이동할 수 있습니다.

문제

사용자는 다음과 같은 경우 고정 탐색 요소의 위치가 갑자기 이동하는 것을 경험합니다. 고정 탐색의 텍스트 입력 필드에 초점을 맞추고 가상 키보드가 나타납니다. 이는 탐색 요소가 페이지 하단에 위치할 때 특히 두드러집니다.

해결책

이 버그를 해결하려면 다음 CSS 및 JavaScript 코드를 사용하는 것이 좋습니다. :

CSS:

.header {
    position: fixed;
}

.footer {
    position: fixed;
}

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

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');
    });
}

Fixfixed 클래스를 본문에 추가하는 경우 입력 요소에 초점이 맞춰져 있고 입력이 흐릿해지면 고정 요소를 위치: 절대로 전환한 다음 필요할 때 위치: 고정으로 재설정할 수 있습니다. 이 솔루션은 키보드 활성화 중에 탐색 요소가 점프하는 것을 효과적으로 방지합니다.

위 내용은 모바일 Safari에서 가상 키보드가 활성화될 때 고정 탐색이 점프하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!