移动端H5避坑指南

一、移动端1px实现

1、利用边框的小数点写法

border-width: 0.5px 这个简单，但是有兼容性问题，安卓与低版本IOS不适用（希望以后适配更多机型）

2、利用元素的:before、:after、transform

构建1个伪元素, 将它的长宽放大到2倍, 边框宽度设置为1px, 再以transform缩放到50%

s-1px-radius {
  position: relative;
}
s-1px-radius:before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  border: 1px solid #999;
  color: #999;
  padding: 1px;
  height: 200%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  border-radius: 0px; // 控制圆角
}

二、ios和android下触摸元素时出现半透明灰色遮罩

-webkit-tap-highlight-color: rgba(255,255,255,0)

三、去除input、teatarea默认样式

{
  border: 0;
  outline: none;
  -webkit-appearance: none;
}

四、IOS端不支持new Date("2019-01-01") 中间带有横线这种格式

ios解析这种格式也不会报错，很难发现，解决方法就是用正则替换掉 "2019-01-01".replace(/\-/g, '/')

五、微信端多个二维码如何指定识别

解决方案是，长按某张图片的时候，把其他的img转为背景图片。

六、ios软键盘撑起页面下不来

// scrollElement: 滚动元素
function focus () {
  this.scrollTop = scrollElement.scrollTop || 0;
}
function blur () {
  if (isWechat) {
    scrollElement.scrollTop = this.scrollTop - 1;
  }
}