移动端问题总结

微信110问题：可能网页路径被举报：

android不响应input['type=file']的change事件的机型：

魅蓝note5：

华为mate10

 

pc上的富文本到了移动端做rem适应解决：

function pxToRem(content = ''){ // 先styles，后:16px
  let styleReg = /style="(.*?)"/g, pxReg = /(:|: )+(\d)+(px)/gi;
  try{
    let newStyle = content.replace(styleReg, (stylesStr, style)=>{
      stylesStr = stylesStr.replace(pxReg, (pxStr)=>{
        pxStr = pxStr.replace(/(:|: )/,'').replace(/px/i,'');
        return ':' + parseFloat(pxStr) / 100 * window.devicePixelRatio + 'rem';
      })
    })
    return newStyle;
  }catch(e){
    return content;
  }
}

 

-webkit-tap-highlight-color不生效？

都说ios如果不设置这个就会在可点击的元素点击的时候出现背景灰色蒙层，但是在这种情况下：

点击到了html外的元素就会出现灰色蒙层，即：

html, body {
    -webkit-tap-highlight-color:  rgba(0,0,0,0);
    // height: 100%; // 问题处
  }

我的理解是：html外或者未定义的区域ios强制要给你加上交互效果并且想表达：是的你点击了我

 

 

 

background-image
border-radio
组合问题

在测试机oppo R11T android7.1（webview）版本发现，只要这两个遇到了一起，背景图便变成了空白：

在pc端表现：

在oppor11表现：

解决：

记得加background-color默认的底色 

 

.a {
            width: 120px;
            height: 120px;
            background-color: aquamarine;
            border-radius: 10px; // 只要去掉这行代码，在oppo R11就可以出现背景图，坑得一。。
   }    

<div class="a"></div>
        <script>
        setTimeout(function() {
            document.querySelector('.a').style.backgroundImage = 'url(https://oss-uat.xuebangsoft.net/4475ff70-3c41-409c-8d81-3a8783ab3bd6.jpg)'
        }, 2000)
    </script>

oppo R9 (webview)不支持Object.assign 或者拓展符 {...}

 

 

webview下，三星s9&&android9在带有translate3d样式的元素下会渲染ui失败而隐藏（translate3d会调起硬件加速功能，具体让源生同志解释下）

强行解决：

1：开启cpu渲染（做css动画的时候会掉帧，卡顿略严重）

办法:等android9系统开发者在开硬件加速的时候修复ui渲染失败功能

 

 

字体问题： 

ios系统在增大字体后不会影响app和h5，默认是不会改变app和h5的字体
android系统在增大字体后会影响app和h5，默认是会改变app和h5的