题记

------觉得自己做得到和做不到,其实只在一念之间。

每天站在高楼上,看着地上的小蚂蚁,他们的头很大,腿很细。他们拿着苹果手机,他们穿着耐克阿迪,上班就要迟到了,他们很着急。最近发生了滴滴事件,总感觉小编像失踪了一样,总算还好,忙里偷闲,不知道见过多少次凌晨四点的上海的男人又回归了。

今天小编想来讲一讲上周项目开发中遇到的一个小问题,但是大家开发过程中可能经常遇到的问题,input输入框兼容性。

其实这个问题已经不是第一次遇到,之前移动端开发过程中遇到在安卓手机点击输入框时会把后面的背景以及底部导航给挤压上去,不但影响输入,而且特别特别特别的丑,完全影响了正好页面。上周开发过程中,同样的问题又出现了,请看下面截图,ios是完美适配,但是安卓。。。。。。惨不忍睹。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

遇到问题,解决问题。于是小编就上网搜索了一些关键词,但是发现,基本都是一些。。。。。。哈哈哈,是的,吃瓜群众比较多。无奈,只能另想途径,然后就开始布局,测试,关于底部导航用浮动元素的,的确会遮挡输入框,会被挤压上去,最后一方法,虽然不治本,但是还是能完美解决。

打开网易新闻 查看精彩图片

贴上代码:

$(function () {

var u = navigator.userAgent, app = navigator.appVersion;

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g

var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

if (isAndroid) {

//这个是安卓操作系统

var wHeight1 = window.innerHeight; //获取初始可视窗口高度

$(window).resize(function(){

var wHeight3 = window.innerHeight;

if(wHeight3 < wHeight1){

$(".phoneBox,.subBtn,.return,.makeSure").hide();

}else if(wHeight3 == wHeight1){

$(".phoneBox,.subBtn,.return,.makeSure").show();

}

})

}

if (isIOS) {

//这个是ios操作系统

}

});

就是获取初始可视窗口的高度,然后点击输入框时再次获取可视窗口高度,通过控制底部导航的显隐,来控制界面的元素。对,就是这几行代码,完美解决,当然,你有更好的方法,欢迎留言分享奥。

你的支持和鼓励,是我最大的动力。如果感觉是干货,欢迎收藏和分享。