導播臺移動端開發碰見的問題總結

前言：移動端導播臺採用 WebRtc 進行通訊，系統要求版本 ios:11.2+

css

一、使用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...

二、阻止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)

三、單位vh vw

用了vh vw，在 safari 中是不包括底部按鈕框的高度，作單頁應用時要注意元素是否被遮蓋。

四、視頻旋轉

ios系統，js是沒法阻止橫屏時視頻播放器不發生旋轉的，須要從新設置樣式。

@media all and (orientation: portrait) { //這裏是豎屏
 
}
@media all and (orientation: landscape) {  //這裏是橫屏
   
}

---

JS

一、判斷系統類型

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*斜體文字*
           
    }