导播台移动端开发遇见的问题总结

前言：移动端导播台采用 WebRtc 进行通信，系统要求版本 ios:11.2+

css

1、使用outline:none去除轮廓外框

div{

    outline:none;

    -webkit-tap-highlight-color:rgba(0,0,0,0);

}

当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。

该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。

参考地址：https://www.cnblogs.com/Allen...

2、阻止ios 10的缩放功能

<meta>标签的方法已经失效，只能暂时用js阻止事件

 document.addEventListener('touchstart',function (event) {  
        
        if(event.touches.length>1){  

            event.preventDefault();  

        }  

    })  

    var lastTouchEnd=0;  

    document.addEventListener('touchend',function (event) {  

        var now=(new Date()).getTime();  

        if(now-lastTouchEnd<=300){  

            event.preventDefault();  

        }  

        lastTouchEnd=now;  

    },false)  

3、单位vh vw

用了vh vw，在 safari 中是不包括底部按钮框的高度，做单页应用时要注意元素是否被遮盖。

4、视频旋转

ios系统，js是无法阻止横屏时视频播放器不发生旋转的，需要重新设置样式。

@media all and (orientation: portrait) { //这里是竖屏
 
}
@media all and (orientation: landscape) {  //这里是横屏
   
}

---

JS

1、判断系统类型

var isMobile = {
    Android : function() {
    return navigator.userAgent.match(/Android/i) ? true : false;
    },
    BlackBerry : function() {
    return navigator.userAgent.match(/BlackBerry/i) ? true : false;
    },
    iOS : function() {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
    },
    Windows : function() {
    return navigator.userAgent.match(/IEMobile/i) ? true : false;
    },
    any : function() {
    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
    }
};

 if (isMobile.iOS()) {//ios*斜体文字*
           
    }