search.html

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    display: grid;
    margin: 8px;
    height: calc(100vh - 16px);
    grid-template: 
        "content"  1fr
        "search"   auto
        "keyboard" calc(env(keyboard-inset-bottom, 0px) - env(keyboard-inset-top, 0px));
}
input[type=search]::placeholder {
    color: #444;
}
input[type=search] {
    padding: 10px;
    font-size: 24px;
    border: 4px solid black;
    border-radius: 4px;
    background-color: #86DBF6;
    justify-self: center;
}
</style>
<div id="content">...</div>
<input type="search" placeholder="search...">
<script>
    if ("virtualKeyboard" in navigator) {
        navigator.virtualKeyboard.overlaysContent = true
    }
    navigator.virtualKeyboard.addEventListener("geometrychange", e => {
        console.log(e)
    })
</script>