全面屏时代-移动端(仅记录)

小序

由小米mix首发，紧接着全面屏时代来临，本人是米粉入手小米mix2，用户体验贼拉好，渐渐的全面屏手机漫步市场... (跑题了)

在做公众号时，用全民屏手机发现了一个问题，当时定位问题就花费了三天时间，各种调试，最后终于定位问题，并解决。过程如下:

问题解析

在移动端时点击input框，调起键盘弹出,此时！！！出问题了

使用chrome调试注意观察可视窗口的大小

还未点击时

唤起输入法软键盘

放开软键盘

放开后可视窗变大， 造成的问题

1. 下拉到底分页阻塞无法运行

2. 弹出框的位置

3. 整体页面定位错位

解决问题

在使用正常安卓手机时 不会出现这种问题

现在全面屏来临对全面屏也会有兼容问题

用小米mix2 将虚拟键盘隐藏 在进行项目时 输入input框调起软键盘 这时虚拟键盘会出现

并 将你整个可视窗口撑大 然后你对这种问题进行定位

1. 手机需要有虚拟键盘

2. 将手机的虚拟键盘隐藏

3. 虚拟键盘唤醒时是浮在窗口上 而不是顶到窗口下

4. 调起软键盘

5. 如果有个性手势操作则不会触发

极少数的手机会发生这种情况

在将前面几项定位了之后

在进入项目时 将初始的可视窗口记录 使用sessionStroage存储

if (!sessionStorage.getItem('height')) {
    let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    sessionStorage.setItem('height', Number(height))
}
// 使用resize监控页面可视窗口
window.onresize = function temp () {
    // 如果可视窗口大于咱们的初始值 那么 就是这种情况发生了 (一般不可能发生)进行弹框
    if (window.innerHeight > sessionStorage.getItem('height')) {
        alert('您是否隐藏虚拟键？隐藏虚拟键页面可能会出现界面布局，点击相应错位等问题, 非常抱歉, 如果不是请联系客服')
    }
}

因为发生的情况很少，但是还是尽量提高用户体验,所以选择这种解决办法。

困扰几天的问题，问题不大，仅记录

嗖嗖嗖~ 原文地址