码迷,mamicode.com
首页 > 移动开发 > 详细

ionic (webApp)软qv键盘打开时视口高度变小导致样式问题的解决方案

时间:2020-04-30 19:22:55      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:http   文字   bsp   mamicode   pre   nic   one   电脑   解决   

用ionic开发的页面,如下图

技术图片

这是正常时候的样式,但当点击用户名或密码(文本框)时,手机上的软键盘就会打开,导致视口的高度变小,我chrome上的开发ft者工具,模拟了一下这个场景如下:

技术图片

如图可见,下方的页脚版本信息的文字跑到上面,我给这个页脚信息的CSS用的是绝对定位 、margin-bottom,但正因为这样,当视口变小时,它就跟页面上的别的元素重叠了。我的解决方法是在CSS中加入以下样式:

@media only screen and (max-height: 574px) {
  // 当调试小于530时,执行当前的css
  .footer {
    position: relative !important;
    bottom: 0 !important;
    margin-top: 72px !important;
  }
}

其实就是利用媒体查询特性,解决了当软键盘弹出时视口高度变小时,给.footer应用另一种样式。这里max-height: 574px,是根据我的页面内容确定的,如下图:

技术图片

也就是说,当视口的高度达到这个高度时,页脚信息的样式还是正常的,再小的话就要出问题了(因为它现在是绝对定位),所以小于574px时就应用了上面的媒体查询样式,这个问题就完美解决了。

 

另外,在电脑上开发时,我发现点那个记住密码的复选框时,页面会向上移,(手机上不会,手机上点用户名和密码会),因为ion-content自动加了

--padding-bottom,但这个如果人为给设成了0的话,那在手机上点用户名和密码时弹出的软键盘有可能盖住用户名或密码输入框。

ionic (webApp)软qv键盘打开时视口高度变小导致样式问题的解决方案

标签:http   文字   bsp   mamicode   pre   nic   one   电脑   解决   

原文地址:https://www.cnblogs.com/johnjackson/p/12810710.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!