android 正则提取内容

• 正则匹配安卓机

//移动端样式会出现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("键盘收起")  
})

• 适配图片展示
  需求:移动端一般由于屏幕限制,在排版上需要考虑,图片太大但是容器太小的情况,这里一般有两种处理方式,第一种比较简单,把需要呈现的图片当成背景图片,使用背景图片的 background-size: cover; 属性,让图片自动适应,铺满全部盒子;另一种就是使容器超出隐藏,每部图片等比缩放,垂直居中与容器中央.对比上面两种方法,很显然第一种比较方便且便捷,效果也会比第二种好,但是由于是背景图片,没有办法点击小图查看大图了.第二种方式可以解决这个问题,唯一难以确定的是这个缩放比,所以效果没有第一种好,但是两种均能解决这问题



• 小程序内嵌H5页面刷新问题
  苹果机执行window.location.reload()，安卓机不执行，如果需要刷新H5页面，需要在原有地址上添加参数，不同地址请求才会刷新
  注:微信一波小程序缓存的清除方式，退出(切换)账号，重新登录即可，一定要是完全退出后才行
• 部分苹果机点击事件失效
  苹果机在微信浏览器中打开时，部分机型没有document，点击事件可能失效，最好采用类名或者id名
• 移动端安全距离

padding: .4rem .32rem;
padding: .4rem .32rem calc(0.4rem + env(safe-area-inset-bottom)); // ios底部添加安全距离

• 弹出蒙层后移动端滚动事件穿透

<div @touchmove.prevent>我是弹出蒙层的盒子</div>

• 清洗公众号文章展示微信公众号文章图片

// 在模版文件中添加这个meta属性
// 网站防止盗图时会开启http-referrer，可以在页面文件中加入这个meta属性，可是会导致添加页面无法进行跨域请求了
<meta name="referrer" content="never">

• 父元素使用border-radius后overflow:hidden失效

// 造成原因
// 1.父元素使用了border-radius
// 2.子元素使用了transform属性
// 解决方法
// 1.给父元素添加定位,修改层级(z-index)
// 2.或者直接给父元素添加一个transform属性

• 音频文件苹果兼容问题
  音频文件地址: 域名/isales-archer/wxwork-session-archive/chatMsg/file/mp4?id=6205c320ff89ca5e7b05414e
  需要设置如下响应头即可



• vue使用replace路由跳转导致重复入栈的ios兼容问题
  出现场景:
  编辑页面a跳转到下级编辑操作页面b,编辑完成后返回编辑页面a,编辑页面a中的跳转操场非常多,且返回跳转,流程图如下:
  
  使用replace之后,页面a push的新页面会没有,但是安卓机以外的其他运行环境会出现replace后的页面a返回入栈,导致操作返回机制的时候,出现返回多次当前页面的情况
  解决方案:

this.$router.replace({
  name: 'EditPage'
})
!this.android && this.router.go(-1) // 非安卓应用返回时删除掉上上次栈内存储值

• replaceAll兼容问题出现场景:
  使用日期组建和后台约定上送日期为-链接,需要把所有的/转换为-
  解决方案:

startTime && startTime.replaceAll('/','-') // 此方法有兼容问题,且不在控制台报错,直接导致js阻塞
// 修改为正则+replace的方式
startTime && startTime.replace(/\//g, '-')