使用虛擬鍵盤的Mobile Safari 中的錯誤固定元素
處理Mobile Safari 中的固定元素可能是一項挑戰，尤其是在使用虛擬鍵盤時被開啟。當導航中的輸入欄位獲得焦點時，固定導航元素意外跳轉時會出現一個常見問題。
原因和解決方案
此行為可能是由於已知的移動 Safari 中的問題。建議的解決方案涉及動態更改固定元素的位置。
程式碼片段
以下程式碼片段示範了此解決方案：
.header {
position: fixed;
}
.footer {
position: fixed;
}
.fixfixed .header,
.fixfixed .footer {
position: absolute;
} 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');
});
}透過新增此程式碼，即使使用者與輸入欄位互動並且出現虛擬鍵盤，導航元素也將保持固定在頁面底部。
以上是如何使用虛擬鍵盤防止移動 Safari 中固定元素跳躍？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
