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

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

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

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

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

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

  1. #search {
  2.     displayblock;
  3.     height48px;
  4.     z-index: 10;
  5.     positionfixed;
  6.     bottom: 0
  7.     left: 0;
  8. }

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

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

 

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

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

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

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

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

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

ennnnnnnn,这次,,,算是完美了。各种浏览器测试没问题。哦对了,补充下,我换安卓了。自然上面是兼容安卓的:QQ、微信、QQ浏览器、UC浏览器、夸克浏览器、谷歌浏览器、系统浏览器。至于IOS嘛,嗯,,要找下身边的人借一台看看了。如有后续再补充。

另外附上一个如何判断夸克浏览器的标识信息方法,自己打印出来的。上图有判断方法,光标位置上就是,有需要可以记录下来。

最后附上完美解决的截图:

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

 

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

目前评论:2   其中:访客  0   博主  0

  1. avatar 养肝护肝 0

    写得很棒,对于APP是现在的趋势,但是对于更擅长网站的人,我选择H5网站

  2. avatar 梁兴健 0

    写的不错

评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情