微信开发时遇到底部遮挡输入框的解决方案

在开发微信公众号功能时，页面底部一般会声明一些公司的版权之类的。但是如果用户需要在页面输入内容时，底部会漂浮在输入法的上面，甚至有的时候不是紧贴着输入法，而是有一小段间距。既影响用户输入又影响页面美观。截图是出现问题的页面：





解决问题的方案是，将如下的js放入出现此问题的页面中。js源码如下：

//解决输入被遮挡问题
        window.onresize = function() {
            var top = $("#footer").offset().top;
            var user_message_box = $('#footer');
            top > 400 ? user_message_box.hide() : user_message_box.show();
        };

其中#footer是底部div的id值，进过多次测试发现无论屏幕大小，系统不同（android或ios）用此js都可以解决底部遮挡输入框的问题。而且经过多次测试发现在手机上400高度是个合适的数值。下图是解决之后的效果图（当输入发弹起时，底部声明不见了，当输入法消失时底部又自动出现）：



1、有人会说底部的div是不是没有固定死，其实不是的。底部就是用css固定了，但是在手机上，如果调用了输入法，底部就会出现。初步怀疑屏幕大小就是整个屏幕高度减去输入法框占用的高度。

2、可能还有人说为什么不把底部声明信息去掉呢？去掉底部会显得页面光秃秃的，而且主要是领导不同意去掉底部！所以就得解决掉。

$(“#footer”).offset().top;取值示意图：