前端基础（三十七）：移动端页面闪烁、设备识别、全屏切换

解决移动端开发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();
    }
}