app和浏览器兼容性问题总结

一、app兼容性处理。

①、ios12以后软键盘弹起以后，软盘原占用空白位置遗留，界面不能归位问题。

document.body.addEventListener('focusin', () => {
  // 软键盘弹出
  this.isReset = false
})
document.body.addEventListener('focusout', () => {
  // 软键盘收起
  this.isReset = true
  setTimeout(() => {
    // 当焦点在弹出层的输入框之间切换时先不归位
    if (this.isReset) {
     window.scroll(0, 0) // 失焦后强制让页面归位
    }
  }, 300)
})
//几乎所有的浏览器都支持focus和blur事件，但对于focusin和focusout 就不是这样理想了。
// Firefox中不支持focusin和focusout事件；
// chrome和safari中只有通过addEventListener方式绑定事件才能正常使用
// ，其他方式绑定都不行；

// 面对这样的浏览器支持似乎很头痛，庆幸的是jQuery对focusin和focusout做了兼容，
//使用$.focusin和$.focusout实现事件绑定，在所有浏览器中都支持；

②、debugger调试，javascript逆向和javascript反逆向的安全维护。

import { addListener, launch } from 'devtools-detector';//反调试工具
import eruda from 'eruda';//h5内嵌时候本地调试工具

③阻止默认行为

const _onChange = async (e) => {
    e.preventDefault();//浏览器默认行为
  };
  const _onClick = async (e) => {
    e.preventDefault();
    e.stopProgation()//阻止冒泡
  }；
  

④ css滚动条

div::-webkit-scrollbar{
	display:none;
}