前端碰到的兼容性问题（不定时更新）

前端碰到的兼容性问题总结

IOS new Date()参数参数带时分秒不兼容问题

问题：

1
var date =new Date();

上面这段代码是获取当前日期，这段代码在Firefox、Chrome、Safari浏览器中都可以运行。但是如果我想根据字符串获取日期，问题就来了。看下面代码。

1
var date =new Date("2020-05-31 08:00:00");

这段代码是获得字符中指定的日期，它Firefox、Chrome中就能运行，但是放在Safari就会报错，错误是NaN，意思是Not a Number。就是因为这个错，苹果手机不能正常运行开发的这个界面。

但是如果不带时分秒就可以

1
var date =new Date("2020-05-31");

解决方案：
在网上找了一下，将代码这样写就好了，年月日尽量以斜杠隔开，如果非要以横杠隔开，就不能带时分秒：

1
var date =new Date("2020/05/31 08:00:00");

或者对时间数据处理一下，也可以：

1
startTime = startDiffTime.replace(/\-/g, "/");

H5移动端form表单输入键盘和滚动问题的兼容性处理

问题描述：

  • 安卓获得焦点时键盘遮挡输入
  • ios失去焦点后底部空白，页面无法归位

解决方案：
通过点击事件强制操作dom

directives.js(这里是封装在vue指令里面的)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 需要引入tools判断是安卓还是IOS
import tools from '@utils/tools';
/*
用法：在标签中 v-指令名（驼峰变： -小写）
 */
/**
 * directives
 * @param Vue
 */
function directives(Vue) {
    //form表单输入键盘和滚动问题的兼容性处理
    Vue.directive('compatible', (el, binding) => {
        el.onfocus = () => {
            //安卓获得焦点时键盘遮挡输入
            // if (tools.isAndroid()) {
            //     window.scrollBy(0, -150);
            // }
            if (tools.isAndroid()) {
                window.addEventListener('resize', function() {
                    if(document.activeElement.tagName=='INPUT' || document.activeElement.tagName=='TEXTAREA') {
                        window.setTimeout(function() {
                            document.activeElement.scrollIntoViewIfNeeded();
                        },0);
                    }
                });
            }
        };
        el.onblur = () => {
            //IOS 6s键盘收回时强制置顶
            if (!tools.isAndroid()) {
                setTimeout(() => {
                    //失焦后强制让页面归位
                    //修复填完第一个输入框后立即点击第二个输入框后页面提前归位的bug
                    const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                    window.scrollTo(0, Math.max(scrollHeight - 1, 0));
                }, 100);
            }
        };
    });
}

export default directives;

utils/tools.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class Utils{
    constructor(){}
    /**
     * isAndroid 判断是否是安卓
     * @returns {boolean}
     * @private
     */
    isAndroid() {
        let u = navigator.userAgent;
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
        return isAndroid === true;
    }
    /**
     * 判断是否是ios
     */
    isIos() {
        let u = navigator.userAgent;
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        return isiOS === true;
    }
}
export default new Utils()