在制作网页时，有时候我们需要判断当前打开网页的设备是什么类型，是移动端打开，还是PC端打开，微信浏览器打开等！

那如何判断呢？一起来探讨探讨！

方法一 js中的navigator.userAgent

     const machineType =
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
          navigator.userAgent
        );
        // 判断当前设备是移动端还是pc端
        if (machineType === "Mobile") { // 移动端
        
        }else{ // pc端
        
     }

判断当前网页是否为微信浏览器打开，判断微信浏览器、pc或h5打开网页。

    // 在移动端在做一个判断，是否为微信浏览器打开！
    var ua = navigator.userAgent.toLowerCase();
    var isWeixin = ua.indexOf("micromessenger") != -1;
    if (isWeixin) { // 微信浏览器
    
    }else{ //普通浏览器
    
    }
    
    // 判断微信浏览器在判断pc、h5案例
    if (/(micromessenger)/i.test(navigator.userAgent)) {
        alert("微信浏览器");
      } else {
        alert("普通浏览器");
        // 判断h5还是pc true就是h5
        let machineType =
          /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
            navigator.userAgent
          )? "Mobile"
          : "Desktop";
        if (machineType === "Mobile") {
          alert("移动端");

        } else {
          alert("pc");
        }
      }

判断当前手机端是ios，还是Android。

    // 判断当前是ios 还是android
    let system = navigator.userAgent.toLowerCase();
    if (/(iPhone|iPad|iPod|iOS)/i.test(system)) {
         alert("iOS");
    }
    if (/(Android|Adr)/i.test(system)) {
         alert("安卓");
    }

方法二 使用css来判断屏幕大小，确认是否手机端或PC端

css里的@media属性来判断当前屏幕该显示多大。

// CSS样式与DOM/JS一样，从前往后加载，后面的代码覆盖前面的代码。
// 当 min-width 和 max-width 混用时，一定要注意前后顺序。
@media (min-width: 750px) { /*当屏幕尺寸大于750px时，应用下面的CSS样式*/
	image{
            width: 300px;
            height: 300px;
        }
}
@media (max-width: 750px) { /*当屏幕尺寸小于750px时，应用下面的CSS样式*/
	image{
            width: 100px;
            height: 100px;
        }
}

/*当页面宽度大于1000px且小于1200px的时候执行，1000-1200*/
@media screen and (min-width:1000px) and (max-width:1200px){
    body{
        font-size:16px;
    }
}
/*当页面宽度大于1280px且小于1366px的时候执行,1280-1366*/
@media screen and (min-width:1280px) and (max-width:1366px){
    body{
        font-size:18px;
    }
}

知识扩展 @media only screen and

• only：限定某种设备。
• screen：彩色电脑屏幕，是媒体类型里的一种。
• and：关键字，连接多个表达式。
• not：关键字，排除不支持的媒体类型。
• 其他媒体类型：all（所有设备）、braille（盲文）、embossed（盲文打印）、print（文档打印或打印预览模式）、projection（项目演示，比如幻灯）、speech（演讲）、tv（电视）。

有问题的话，欢迎补充~~~