前端（四）：移动端页面闪烁、设备识别、全屏切换

解决移动端开发H5页面点击按钮后出现闪烁或黑色背景

*{
   
    -webkit-tap-highlight-color:transparent;
}

设备识别

// 判断pc端还是移动端
function isPC() {
   

    var userAgentInfo = navigator.userAgent;

    var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];

    var flag = true;

    for (var i = 0; i < Agents.length; i++) {
   

        if (userAgentInfo.indexOf(Agents[i]) > 0) {
   

            flag = false;

            break;

        }

    }

    return flag;

}

// 判断用户移动端使用的系统平台
function isMobile() {
   

    var u = navigator.userAgent;

    if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
   

        return "Android!"; // 安卓手机

    } else if (u.indexOf('iPhone') > -1) {
   

        return "iPhone!"; // 苹果手机

    } else if (u.indexOf('iPad') > -1) {
   

        return "iPad!"; // iPad手机

    } else if (u.indexOf('Windows Phone') > -1) {
   

        return "Windows Phone!"; // winphone手机

    } else {
   

        return false;

    }

}

// 判断用户是否在微信中打开

function isWeChat() {
   

    // toLowerCase() 方法用于把字符串转换为小写。
    var ua = navigator.userAgent.toLowerCase();

    if (ua.indexOf('micromessenger') != -1) {
   

        return true;

    } else {
   

        return false;

    }

}

alert(`是否PC: ${isPC()} \n是否移动端: ${isMobile()} \n是否微信: ${
     isWeChat()}`);

全屏非全屏互切

// 进入全屏
function requestFullScreen() {
   
    const {
    documentElement } = document;
    if (documentElement.requestFullscreen) {
   
        documentElement.requestFullscreen();
    } else if (documentElement.mozRequestFullScreen) {
   
        documentElement.mozRequestFullScreen();
    } else if (documentElement.webkitRequestFullScreen) {
   
        documentElement.webkitRequestFullScreen();
    }
}

// 退出全屏
function exitFullscreen() {
   
    if (document.exitFullscreen) {
   
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
   
        document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
   
        document.webkitCancelFullScreen();
    }
}