检测当前屏幕是手机，pc电脑还是平板

检测当前屏幕是手机，pc电脑还是平板

以下是vue3的示例代码：

setup(){

     const type = ref()

     const getDeviceInfo = () => {
                const ua = navigator.userAgent;
                const isWindowsPhone = /(?:Windows Phone)/.test(ua);
                const isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone;
                const isAndroid = /(?:Android)/.test(ua);
                const isFireFox = /(?:Firefox)/.test(ua); // 注意：这里检测的是浏览器，而不是操作系统
                const isChrome = /(?:Chrome|CriOS)/.test(ua); // 同上
                const isIPad = /(?:iPad)/.test(ua); // 单独检测iPad，因为iPad是平板
                const isPlayBook = /(?:PlayBook)/.test(ua); // 单独检测PlayBook，因为PlayBook是平板
                const isTablet = isIPad || isPlayBook || (isAndroid && !/(?:Mobile)/.test(ua)) ||
                    (isFireFox && /(?:Tablet)/.test(ua));
                const isIPhone = /(?:iPhone)/.test(ua); // 单独检测iPhone
                const isPhone = isIPhone && !isTablet; // 这里的逻辑可能需要根据实际情况调整
                const isPc = !isPhone && !isAndroid && !isSymbian && !isTablet; // 排除手机、安卓、塞班、平板

                // return {
                //     isTablet: isTablet,
                //     isPhone: isPhone,
                //     isAndroid: isAndroid,
                //     isPc: isPc
                // };
                if (isAndroid || isPhone) {
                    // 手机
                    type.value = "手机"
                    // console.log("---------手机");
                } else if (isTablet) {
                    // 平板
                    type.value = "平板"
                    // console.log("---------平板");
                } else if (isPc) {
                    // 电脑
                    type.value = "电脑"
                    // console.log("---------电脑");
                }
            }


 // 更新窗口尺寸的函数
            const updateWindowSize = () => {
                windowWidth.value = window.innerWidth; // 更新窗口宽度
                windowHeight.value = window.innerHeight; // 更新窗口高度
                screenWidth.value = window.screen.width
                screenHeight.value = window.screen.height
                getDeviceInfo()
                if (type.value == "电脑") {
                    // console.log(windowWidth.value,"电脑",windowHeight.value)
                    if (1200 <= windowWidth.value <= 769) {
                        cols.value = 4
                        // console.log("电脑----769---1200")
                    }
                } else if (type.value == "手机") {
                    // console.log("手机",screenWidth.value,screenHeight.value)
                    cols.value = 2
                    // console.log("手机----")
                } else if (type.value == "平板") {

                }
            };
//添加事件
 onMounted(() => {
                window.addEventListener('resize', updateWindowSize);
            });

      return {
                screenWidth,//手机
                screenHeight,//
                windowWidth,//电脑
                windowHeight,//
              }
    }