js 移动端解决input focus后键盘弹出，高度被挤压页面边形的问题

页面样式是采用的百分比布局，宽高都是百分百，测试的移动端设备是华为平板，当点击input框弹起键盘，页面样式高度会被压缩挤压变形，解决代码：

    //解决弹出键盘页面高度变化bug

    var viewWidth = window.innerWidth; //获取可视区域宽度
    var viewHeight = window.innerHeight; //获取可视区域高度
    if (viewWidth > viewHeight) {
        horizontalScreen = true; // 横屏 判断横竖屏，需要的时候用
    } else {
        horizontalScreen = false; // 竖屏
    }
    $("input").focus(function () { // 监听获取焦点事件
        $("body").css("height", viewHeight); //键盘弹起的时候把body高度设置可视高度
    }).blur(function () {
        $("body").css("height", "100%");
    });

浏览器初始化进来是竖屏，旋转屏幕至横屏以后，点input框的时候还会变形，所以我监听了浏览器窗口大小变化，可视高度重新赋值。

window.addEventListener('resize', function () {
    // 变化后需要做的事
    console.log("bianhuale==============");
    viewHeight = window.innerHeight; //获取可视区域高度
    viewWidth = window.innerWidth; //获取可视区域高度
})