正则匹配安卓机和ios && 适配

• 正则匹配安卓机

//移动端样式会出现ios兼容问题,所以接触到了适配设备问题,具体问题如下:
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isiOS){
 //苹果机执行部分   
}else{
 //安卓机执行部分   
}

• 屏幕适配

//原生匹配
<script>
  var html = document.getElementsByTagName("html")[0];
  var width = window.innerWidth;
  var fontSize = (100 / 750) * width;
  if (fontSize > 100) {
   fontSize = 100;
  }
  html.style.fontSize = fontSize + "px";
  window.onresize = function() {
   var html = document.getElementsByTagName("html")[0];
   var width = window.innerWidth;
   var fontSize = (100 / 750) * width;
   if (fontSize > 100) {
     fontSize = 100;
   }
   html.style.fontSize = fontSize + "px";
  };
</script>

• 1px问题

.border{
	positon:relative
}
.border:after{
   content: " ";
   width: 200%;
   height: 200%;
   position: absolute;
   top: 0;
   left: 0;
   border: 1px solid rgba(0,0,0,.2);
   -webkit-transform: scale(.5);
   transform: scale(.5);
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
   box-sizing: border-box;
   border-radius: 10px;
}

• 输入数字

<input name="member_phone" type="number" pattern='[0-9]*'>//安卓机使用type=number只能输入数字,ios需要添加pattern='[0-9]*'
// type="number" 有默认样式,所以需要使用一下css去除
<style>
    /* 谷歌 */
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
   	-webkit-appearance: none;
   }
   /* 火狐 */
   input[type="number"]{
   	-moz-appearance: textfield;
   }
</style>

• 绑定事件

//使用jQuery获取元素添加绑定事件,如果是绑定body(document),ios有兼容问题,需要添加穿透样式
<style>
   body{
		cursor:pointer;
   }
</style>

• ios键盘监听事件

document.body.addEventListener('focusin', () => {  //软键盘弹起事件
  console.log("键盘弹起")  
})
document.body.addEventListener('focusout', () => { //软键盘关闭事件
  console.log("键盘收起")  
})