遇到的一些兼容问题

一. 隐藏滚动条

.scroll-box {
    overflow: auto;
    /*隐藏滚动条 - 兼容ie*/
    -ms-scroll-chaining: chained;
    -ms-overflow-style: none;
    -ms-content-zooming: zoom;
    -ms-scroll-rails: none;
    -ms-content-zoom-limit-min: 100%;
    -ms-content-zoom-limit-max: 500%;
    -ms-scroll-snap-type: proximity;
    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
    -ms-overflow-style: none;
    overflow: auto;
}

/*-webkit-*/
.scroll-box::-webkit-scrollbar {
    display: none;
    width: 0;
}

/*-o-*/
.scroll-box::-o-scrollbar {
    -moz-appearance: none !important;
    background: rgba(0,255,0,0) !important;
}
.scroll-box::-o-scrollbar-button {
    background-color:rgba(0,0,0,0);
}
.scroll-box::-o-scrollbar-track {
    background-color:rgba(0,0,0,0);
}
.scroll-box::-o-scrollbar-track-piece {
    background-color:rgba(0,0,0,0);
}
.scroll-box::-o-scrollbar-thumb{
    background-color:rgba(0,0,0,0);
}
.scroll-box::-o-scrollbar-corner {
    background-color:rgba(0,0,0,0);
}
.scroll-box::-o-scrollbar-resizer  {
    background-color:rgba(0,0,0,0);
}

二. 图片下载

//判断浏览器类型
function checkBrowser() {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1;
    if (isOpera) {
        return "Opera"
    }; //判断是否Opera浏览器
    if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
    } //判断是否Firefox浏览器
    if (userAgent.indexOf("Chrome") > -1){
        return "Chrome";
    }
    if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
    } //判断是否Safari浏览器
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
        return "IE";
    }; //判断是否IE浏览器
    if (userAgent.indexOf("Trident") > -1) {
        return "Edge";
    } //判断是否Edge浏览器
}

//IE
function ieSavePic(data, filename) {
    var bstr = atob(data.split(',')[1]);
    var n = bstr.length;;
    var u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    var blob = new Blob([u8arr]);
    window.navigator.msSaveOrOpenBlob(blob, filename);
}

// chrome, 360
function savePic(data, filename) {
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
};

$('#saveImg').on('click', function () {
    var imgData = $('#img').attr('src');
    var filename = '测试.png';

    if (checkBrowser()==="IE" || checkBrowser()==="Edge"){

       ieSavePic(imgData, filename);

    }else{

       savePic(imgData, filename);
    }

三. 移动端android和ios日期处理差异

在ios系统中使用new Date():

var d = new Date('2018-10-15 08:00:00'); // 返回valid Date

// ios识别不了'-'
// 处理
var str = '2018-10-15 08:00:00';

var d = new Date(str.replace(/-/g,"/"));
// 或者
str = str.split(/[- : \/]/);
var d = new Date(str[0], str[1]-1, str[2], str[3], str[4], str[5]);

四.  移动端常见问题及解决方案

1. h5页面窗口自动调整到设备宽度,  并禁止用户缩放移动端字体:

<meta name=“viewpoint” content=“width: device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 

2. 如果只需要适配手机设备, 使用px即可, 如果需要适配各种移动设备, 使用rem

3. 当用户手指放在移动设备的屏幕上滑动时会触发touch事件

    触发顺序: touchstart->touchmove->touchend->touchcancel

4. 移动端click点击事件会产生200-300ms的延迟响应

    移动设备上的浏览器默认会在用户点击屏幕大约延迟300ms后才会触发点击事件, 这是为了检查用户是否在做双击,

可使用fastclick解决

 

5. 事件

// window.orientation, 取值: 正负90表示横屏模式, 0和180表现为竖屏模式
window.onorientationchange = function() {
    switch(window.orientation) {
        case -90: 
        case 90: 
            console.log(‘横屏’ + window.orientation);
        case 0:
        case 180: 
            console.log(‘竖屏’ + window.orientation);
        break;
    }
}

6. 样式

    竖屏时使用的样式:   @media all and (orientation: portrait) {}

    横屏时使用的样式:   @media all and (orientation: landscape) {}

7. audio元素和video元素在ios和andriod中无法自动播放

    应对方案: 触屏即播   

$(‘html’).one(‘touchstart’, function() {
    audio.play();
})