经验分享-移动端固定输入框到底部兼容问题

很久没写教程啦，说好的手机模板开发也拖到前天才开始（虽然核心之前写了），可想而知不是一般的忙。至于赚了多少钱嘛就不提了，都是泪。所以还是分享下这次的经验吧。由于需要开发手机模板，把搜索和菜单做成一个类似微信的模式，于是乎如下图。

是不是很棒棒，感觉自己帅帅哒。点搜索会进入输入框，也可以切换回来。但是，，，点击输入框后会弹出输入法，如果用微信，QQ浏览器发现没问题，可是夸克浏览器（UC旗下）就有问题了。出现如下图界面。。。

一看就知道兼容问题啦。我先贴一下样式代码。大概如下：

#search {
display: block;
height: 48px;
z-index: 10;
position: fixed;
bottom: 0
left: 0;
}

可是这种兼容问题挺尴尬的，一方面我越来越少写前端了，另一方面这种在手机上才能模拟的现象一时半会不知道怎么调试，由于周末出差，于是搁置先忙其他。今天下午想着不行啊这个必须解决才有动力继续下去。搜索了很多资料，方法都试了不可行。不过有一个方案倒是不错。如下：

但是我发现这一样行不通，于是我在想，能不能判断下，来定义bottom？ennnnnn，不对，定义top？于是乎：

<script type="text/javascript">
var winHeight = $(window).height(); //获取当前页面高度
$(window).resize(function() {
var thisHeight = $(this).height();
if (winHeight - thisHeight > 50) {
$('#search').css('top', '0');
} else {
$('#search').css('top', 'auto');
}
});
</script>

这样成了，点击输入框它跑置顶上面去了，这不是和前面搜索到的不喜欢的方案一个道理了嘛？要么，展开一个阴影层，然后顺便加点关键词上去？感觉是下下策。既然可以重新获得屏幕高度，那么屏幕高度减去底部高度48不就可以了？

<script type="text/javascript">
var winHeight = $(window).height(); //获取当前页面高度
$(window).resize(function() {
var thisHeight = $(this).height();
newHeight = thisHeight - 48; //屏幕高度减去48得到的高度
if (winHeight - thisHeight > 50) {
$('#search').css('top', newHeight);
} else {
$('#search').css('top', 'auto');
}
});
</script>

感觉就是棒棒哒的思路有没有？可是现实是，不行，而且，可笑的事实是 +48！！！而不是 -48 ？？？这哪根葱的道理哇？？？不合理但是就是解决了问题了。。。于是乎QQ和微信看了下，确实不对，再改回去-48的话，嗯，就没毛病了。。。所以一个+一个-？那，判断下浏览器就好了？然后我想了个问题，我好像始终只测试了QQ、微信、夸克？然后测试了谷歌浏览器、QQ浏览器、UC浏览器、发现-48是对的。唯独夸克奇葩。。那好吧，我，，，最终这样。。。