日常问题（不同浏览器的兼容性问题、知识点记录等）_苹果手机浏览器 includes不支持?-CSDN博客

本文链接：https://blog.csdn.net/weixin_39579517/article/details/99623032

移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
原因：preventDefault会阻止默认事件，包括点击和浏览器默认的滚动等
解决办法：在QQ和微信（当然还包括其他浏览器，不过我没测试过）中如果有需要用到touch事件做的特效一定要在touchstart或者touchmove中添加event.preventDefault()方法。
在touchstart中如果有event.preventDefault()方法，将不会触发click事件和a标签方法。在这里可以使用tap代替click，但是a标签的话就不太方便了。
如果在touchmove中有event.preventDefault()方法，最好加上方向判断，当然如果你页面内容不需要滚动条就不需要加判断了。 https://www.cnblogs.com/lvmingyin/p/5372678.html
下载gulp报错

Local gulp not found in

解决办法：npm link gulp

Module build failed: Error: Couldn’t find preset “es2015”
解决办法：
我是直接执行下面的命令，目录是自己放项目的地方，安装下就行了：
npm install --save-dev babel-cli
npm install --save-dev babel-preset-es2015
iphoneX适配，刘海适配

<metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">

width: 750px;
  text-align: center;
  //font-size: 0;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  z-index: 350;
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;

发票页底部确认按钮点不动，ios移动端软键盘收起后，页面内容不下滑
解决办法：

varinputScroll=function(){
varinputBlur=[].slice.call(document.querySelectorAll('.input-blur'));
 inputBlur.forEach((item)=>{
  item.addEventListener('blur',()=>{
  window.scroll(0,0);
  })
 })
}

在ios,qq内置浏览器处理键盘弹出，fix按钮上漂
解决办法：

vItem.addEventListener('click',function(){
clearTimeout(timerFcus);
timerFcus=setTimeout(function(){
makeSureBox.style.display="none";
},300)
})

vItem.addEventListener('blur',function(){
clearTimeout(timerBlur);
timerBlur=setTimeout(function(){
makeSureBox.style.display="block";
},200)

})

List item

如何用正则表达式删除字符串中不需要的部分？
解决办法
pureYearCard->pureYear

'pureYearCard'.replace(/Card/ig,'')

权限不够
permission denied, open '/Users/
解决办法

sudo chmod 777 /Users/xxxx/.babel.json

然后删除项目重新下载

EACCES: permission denied, mkdir ‘/Users/2444544964qq.com/www/iplus-new/deer-hooks/node_modules/.cache’
解决办法：


sudo chmod -R 777 deer-hooks

前端hash路由，java后台拿不到锚点，因为浏览器请求后台时会自动过滤锚点
解决办法：目前最好的解决办法，?+参数的方式，告诉后台要跳转的路由，后台根据url+参数，再跳转。
在ios下面，点击一个连接或者按钮的时候，会出现一个半透明的灰色背景
解决办法：-webkit-tap-highlight-color:rgba(0,0,0,0); 即可
setStorage,safar无恒模式下回报错
解决办法：可以忽略，如果要解决就用cookie代替
伪数组forEach遍历在ios8不支持
解决办法：[].slice.call() //数组序列化一下
[].includes(‘jt’) ,在ios8不兼容
0.1+0.2 != 0.3
https://www.cnblogs.com/lonelyxmas/p/9223480.html
安卓，键盘出现，页面没有上移，导致一些输入框不能输入

 function blurAdjust( e ){
	setTimeout(()=>{
		if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
			return
		}
		let result = 'pc';
	    if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
	        result = 'ios'
	    }else if(/(Android)/i.test(navigator.userAgent)) {  //判断Android
	        result = 'android'
	    }
 
	    if( result = 'ios' ){
			document.activeElement.scrollIntoViewIfNeeded(true);
	    }
	},400)
}
@vue方法：
监听input失去焦点事件
   @blur(){
       window.scrollTo(0, 0)
}

Android部分机型中给img设置border-radius失效

//结构
<div>
    <img src="">
</div>
//样式
div{
    display: inline-block;
    border-radius: 50%;
    border: 4px solid #FF7000;
}
img{
    vertical-align: top;
}

ios键盘弹起，fix会失效
解决办法：键盘弹起的时候（focus）变成absolute，键盘收起是（blur）变灰fix

$(function () {
    if (Modernizr.touch) {
        $(document).on('focus', 'input', function () {
            $(".navbar-fixed-top").addClass('fixfixed');
        });

        $(document).on('blur', 'input', function () {
            $(".navbar-fixed-top").removeClass('fixfixed');
        });
    }
});

最近在做一个计算器，发现0.1+0.2!=0.3(参考文章)
解决办法：
使用github上的库：BigDecimal.js或bignumber.js
小数点后面有6个或以上的0或9，就四舍五入

function fixFloatCalcRudely(num){
    if(typeof num == 'number'){
        var str=num.toString(),
            match=str.match(/.(d*?)(9|0)2{5,}(d{1,5})$/);
        if(match != null){
            return num.toFixed(match[1].length)-0;
        }
    }
    return num;
}

使用简单点四舍五入方法，其实跟上面的方法差不多，只不过取了一个10位小数。

function numTofixed(num) {
    if (typeof num == 'number') {
        num = parseFloat(num.toFixed(10))
    }
    return num;
}
numTofixed(0.1 + 0.2);

CSS overflow-x与overflow-y不同的兼容（参考链接）
解决方案：
.同时设置 ‘overflow-x’ 和 ‘overflow-y’ 的值，不要出现其中之一为 ‘hidden’ 时，而另一个是 ‘visible’ 的情况； 2.避免编写依赖指定值为 ‘visible’ 的 ‘overflow-x’ 和 ‘overflow-y’ 特性的计算值的代码。
replaceAll低版本不兼容，
解决方案：replace+/g
contentEditable=true 富文本编辑器
在火狐和chrome标注颜色，底层实现不一致，我觉得是火狐的一个bug(更过问题自己去试试吧)
以上只是我遇到的
replaceAll，可以使用replace和正则来代替
window.open 在ajax回调里面执行，会被浏览器（目前发现的有火狐,safari）禁止,因为原因
现在的浏览器默认设置是，window.open()方法只能在click事件的程序线程中执行。
也就是必须触发click事件，如果事件中用ajax之类，就必须是同步模式。让代码都在同一个线程中执行。
使用正在匹配，str.replace() //str必须是字符串