大家好,又见面了,我是你们的朋友全栈君。
最近遇到了一个小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,因此才会在虚拟键盘隐藏时出现一部分空白,从而导致了导航条的隐藏。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/142793.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...