最近遇到了一個小bug，在ipad上編輯word文件的虛擬鍵盤收回時，會導致頁面的導航條隱藏，且頁面的下面會出現一塊空白
自己嘗試的解決方案
通過focusin和focusout對虛擬鍵盤的彈入彈出進行監聽，但發現基本沒什麼用。我的理解是：focusin和focusout比較適合於監聽對於文本輸入框的鍵盤事件。
通過比較screen.availHeight和screen.height進行比較。如果在虛擬鍵盤彈出時元素的高度等有變化，那麼可以嘗試通過這種方式判斷虛擬鍵盤是不是彈出來了.
另一種方法是：監聽一個事件，比如我監聽的就是scroll事件，對會發生隱藏的元素設置scrollIntoView或者scrollIntoViewIfNeeded,通過設置不同的參數，可以使得作用的元素與視口的上面或下面對齊。
resizeObserver
MutationObserver 用來監聽DOM的變化，包括結構，屬性這些。
後來發現，是css屬性值的問題。
`<style>`
`#container {`
`display: flex;`
`width: 100vh;`
`height: 100vw;`
`}`
`#child {`
` flex: 1;`
` position: absolute;`
` top: 0;`
` left: 0;`
` right:0 ;`
` height: 100%;`
` overflow: hidden;`
`}`
`</style>`
`<div id = "container">`
`<div id = "child">`
`</div>`
`</div>`
這裏主要有兩點需要注意：
在移動端設備中，尤其是ipad和iOS，100vh其實是比視口大，即100vh包含了下面的狀態欄的高度。
另外，如上面的代碼所示，父元素設置了display:flex， 子元素設置了flex: 1，按理說，子元素設置了這個屬性之後，就和父元素的寬高相同了，但是要注意，在這裏，子元素還設置了position: absolute。我們看一下W3C的文檔怎麼說
即，flex容器中的絕對定位子元素會脫離flex佈局流，也就是說flex: 1對子元素來說已經失效了。因此他的高度爲絕對定位中的100%設置的高度，但是又設置了overflow:hidden，因此纔會在虛擬鍵盤隱藏時出現一部分空白，從而導致了導航條的隱藏。