ipad上100vh和100%踩坑记「建议收藏」

ipad上100vh和100%踩坑记「建议收藏」最近遇到了一个小bug,在ipad上编辑word文件的虚拟键盘收回时,会导致页面的导航条隐藏,且页面的下面会出现一块空白自己尝试的解决方案通过focusin和focusout对虚拟键盘的弹入弹出进行监听,但发现基本没什么用。我的理解是:focusin和focusout比较适合于监听对于文本输入框的键盘事件。通过比较screen.availHeight和screen.height进行比较。如果在虚拟键盘弹出时元素的高度等有变化,那么可以尝试通过这种方式判断虚拟键盘是不是弹出来了.另一种方法

大家好,又见面了,我是你们的朋友全栈君。

最近遇到了一个小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的文档怎么说

image

即,flex容器中的绝对定位子元素会脱离flex布局流,也就是说flex: 1对子元素来说已经失效了。因此他的高度为绝对定位中的100%设置的高度,但是又设置了overflow:hidden,因此才会在虚拟键盘隐藏时出现一部分空白,从而导致了导航条的隐藏。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/142793.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • spring 4 泛型注入

    spring 4 泛型注入最近对系统进行改造,发现在泛型实例初始化的时候,得不到想要的泛型。或者需要强制转换。spring4开始支持泛型对象初始化,初始化方法如下:注:使用配置文件的方法暂时还没有发现,下面是使用javaannotation的方法:packagecom.mitchz..toolkit.chain;importjava.util.List;importjava.util.M

  • Attributable_文件属性里没有自定义

    Attributable_文件属性里没有自定义在做项目的时候,用没人写的代码和看Android源码时,经常看attr.xml的使用,每次都不知道是什么意思,今天网上查了些资料,终于明白了,这里做一个笔记,方便以后使用这里与一个关于AttributeSet的应用场景:一个自定义控件的有些属性内容是随着外部条件而动态改变的,forexample:一个自定义的ListView控件,需要在底部添加一个View,而这个View在不同的模块使用

    2022年10月26日
  • datagrip 激活码-激活码分享

    (datagrip 激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html…

  • nodejs安装淘宝镜像(淘宝 nodejs)

    设置淘x,宝的是:npmconfigsetregistryhttps://registry.npm.taobao.org不想用他们的,再设置回原来的就可以了:npmconfigsetregistryhttps://registry.npmjs.org

  • mpvue还能用吗(mpvue的性能问题)

    在newvue()的时候不能加入store,否则在App.vue文件中onLaunch(){}失效正确的使用姿势:importstorefrom’@/store’Vue.prototype.$store=store

  • 大数据计算框架有哪些_高中物理知识框架图

    大数据计算框架有哪些_高中物理知识框架图前言大家好,我是土哥写文章整整五个月了,在这期间写了很多篇高质量文章,每一篇都在1000+阅读以上,为了让各位小伙伴更好的学习和面试,我将自己发表的文章以及未发表的文章全部汇总成一个文档,里面包含了全部的无水印高清图片,具体内容如下:关注公众号:【3分钟秒懂大数据】,回复关键字:【大数据】,进群领取下文全部PDF文件。1、大数据学习路线文章硬不硬核,你说了算,土哥怒肝大数据学习路线一条龙!(万字长文+资源分享)上述文章将所有组件的安装包全部都收集好,版本

    2022年10月25日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号