兼容性ios、安卓值input 以及fixed

 1.好久没解决兼容性的问题了。

研究了ios系统的上滑机制和安卓的上滑机制他是不一样的；

ios：是可视窗口向上顶上去了。

安卓：是可视窗口缩小了。

fixed定位ios只能依靠客户端了。这里不想多说啥。js解决不了。除非改造系统去吧。

 首先判断ios安卓机型代码如下：

var ua = window.navigator.userAgent.toLocaleLowerCase();

var isIOS = /iphone|ipad|ipod/.test(ua);

var isAndroid = /android/.test(ua);

ios存在问题：场景：一个页面有好多个input框；input拉起软键盘 - 收起的时候，input框会被遮挡。

 经过反复自测：得出的结论

下面的$input是document.querySelectorAll('.ininput');
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
 
var oldh = 0;//初始化scrollTop位置
if (!isAndroid) {
 // IOS 键盘弹起：IOS 和 Android 输入框获取焦点键盘弹起
  $input.addEventListener('focus', function () {
      console.log('IOS 键盘弹起啦！');
      oldh = document.documentElement.scrollTop || document.body.scrollTop || 0;//
 }, false)

 // IOS 键盘收起：IOS 点击输入框以外区域或点击收起按钮，输入框都会失去焦点，键盘会收起，
 $input.addEventListener('blur', () => {
    console.log('IOS 键盘收起啦！'); 
    // IOS 键盘收起后操作
    setTimeout(() => { 
         const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
        var jp = scrollHeight-oldh;
        window.scrollTo(0, document.documentElement.scrollTop-jp);
    }, 500); 
  })
 }

 

微信ios中：拉起软键盘回复到原位置的问题网络上是这么描述的我这里不是很赞同，这里其实是解决当软键盘收起之后输入框下面的留白用这个可以解决：

$("input,select").blur(function(){

  setTimeout(function(){ 
    
  const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;

      window.scrollTo(0, Math.max(scrollHeight - 1, 0));

    }, 100
 );

})

 

接下来说说安卓的，安卓：键盘拉起可视窗口会变小。

场景：拉起输入框的时候会被遮挡。

查看了网上的说法也是用：document.activeElement.scrollIntoViewIfNeeded();

 还是可用的，但是针对一些特殊的场景还是需要根据实际情况加工一下的。

​