微信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的