js判断是在移动端还是在pc端

本文介绍了一种方法,通过检测用户代理来判断当前设备是移动设备还是PC,从而自动跳转到适合的QQ聊天链接。这种方法可以确保用户在不同设备上都能获得良好的聊天体验。
 function chatQQ3(){  
                if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
                       //移动端打开
                        window.location.href = "mqqwpa://im/chat?chat_type=wpa&uin=1694208780&version=1&src_type=web&web_src=oicqzone.com";  
                    } else {
                        //pc端打开
                        window.location.href = "tencent://message/?uin=1694208780&Site=qq&Menu=yes";
                    }
            }

 

转载于:https://www.cnblogs.com/huahua0825/p/9039434.html

### 判断设备类型并实现响应式布局的方案 在前开发中,判断当前设备是移动端还是 PC 通常需要综合使用多种技术手段,以确保准确性和兼容性。一种常见的做法是通过 `navigator.userAgent` 检测用户代理字符串,并结合屏幕宽度进行判断。这种方法可以有效减少误判情况,例如 iPad 可能被错误识别为 PC 。 ```javascript function isMobileDevice() { const ua = navigator.userAgent; const isMobile = ua.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i); const isSmallScreen = window.innerWidth <= 768; return !!isMobile || !isSmallScreen; } if (isMobileDevice()) { console.log("当前设备为手机/平板"); } else { console.log("当前设备为 PC"); } ``` 上述代码通过正则表达式匹配常见的移动端设备关键字,并结合屏幕宽度判断设备类型[^1]。这种双条件验证方式可以有效提升判断的准确性。 ### 实现响应式布局的方案 对于实现响应式布局,通常可以采用以下几种方式: 1. **CSS 媒体查询**:这是实现响应式布局的基础。通过媒体查询,可以根据不同的屏幕宽度应用不同的样式规则。这种方式适用于简单的布局调整。 ```css @media (max-width: 768px) { /* 移动端样式 */ body { font-size: 14px; } } @media (min-width: 769px) { /* PC 样式 */ body { font-size: 16px; } } ``` 2. **REM 自适应布局**:通过 JavaScript 动态设置 `html` 元素的 `font-size`,使页面元素能够根据屏幕宽度进行缩放。这种方法适用于需要高度自适应的设计场景。 ```javascript function setRem() { const deviceWidth = document.documentElement.clientWidth; if (deviceWidth <= 768) { // 手机 document.documentElement.style.fontSize = deviceWidth / 3.75 + 'px'; } else { // 电脑 document.documentElement.style.fontSize = deviceWidth / 14.4 + 'px'; } } setRem(); window.addEventListener('resize', setRem); ``` 3. **视口单位 (vw/vh)**:使用 `vw` 和 `vh` 作为单位可以让元素根据视口大小进行缩放。这种方式适合需要与视口大小保持比例的设计。 ```css .box { width: 50vw; /* 视口宽度的一半 */ height: 30vh; /* 视口高度的 30% */ } ``` 4. **Vue 项目中的适配方案**:在 Vue 项目中,可以通过引入 `postcss-pxtorem` 插件,将 `px` 单位自动转换为 `rem` 单位。这种方式可以减少手动计算 `rem` 的复杂性。 ```javascript // vite.config.js import vue from '@vitejs/plugin-vue'; import { defineConfig } from 'vite'; import postcss from './postcss.config'; export default defineConfig({ plugins: [vue()], css: { postcss } }); ``` ```javascript // postcss.config.js module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 37.5, // 设计稿宽度 / 10 propList: ['*'] } } }; ``` ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值