判断浏览器用户端是PC还是移动设备的方法

本文介绍了一种客户端和服务器端判断用户使用的是PC还是移动设备的方法。客户端通过JavaScript检测用户代理来识别不同类型的移动设备和PC;服务器端则通过ASP.NET进行判断。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

客户端判断用户端是PC还是移动设备的方法:

 

<script type="text/javascript">
  var browser={
    versions:function(){
            var u = navigator.userAgent, app = navigator.appVersion;
            return {         //移动终端浏览器版本信息
                 trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
            };
         }(),
         language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
 document.writeln("语言版本: "+browser.language);
document.writeln(" 是否为移动终端: "+browser.versions.mobile);
document.writeln(" ios终端: "+browser.versions.ios);
document.writeln(" android终端: "+browser.versions.android);
document.writeln(" 是否为iPhone: "+browser.versions.iPhone);
document.writeln(" 是否iPad: "+browser.versions.iPad);
document.writeln(navigator.userAgent);
  </script>   

Server端(ASP.NET)判断用户端是PC还是移动设备的方法
  If Request.Browser.IsMobileDevice Then
        Response.Write("Request.Browser.IsMobileDevice")
    Else
        Response.Write("Not Request.Browser.IsMobileDevice")
    End If

asp:
set regex = new regexp 
regex.ignorecase = true 
regex.global = true 
regex.pattern = "mini 9.5|vx1000|lge |m800|e860|u940|ux840|compal|wireless| mobi|ahong|lg380|lgku|lgu900|lg210|lg47|lg920|lg840|lg370|sam-r|mg50|s55|g83|t66|vx400|mk99|d615|d763|el370|sl900|mp500|samu3|samu4|vx10|xda_|samu5|samu6|samu7|samu9|a615|b832|m881|s920|n210|s700|c-810|_h797|mob-x|sk16d|848b|mowser|s580|r800|471x|v120|rim8|c500foma:|160x|x160|480x|x640|t503|w839|i250|sprint|w398samr810|m5252|c7100|mt126|x225|s5330|s820|htil-g1|fly v71|s302|-x113|novarra|k610i|-three|8325rc|8352rc|sanyo|vx54|c888|nx250|n120|mtk |c5588|s710|t880|c5005|i;458x|p404i|s210|c5100|teleca|s940|c500|s590|foma|samsu|vx8|vx9|a1000|_mms|myx|a700|gu1100|bc831|e300|ems100|me701|me702m-three|sd588|s800|8325rc|ac831|mw200|brew |d88|htc\/|htc_touch|355x|m50|km100|d736|p-9521|telco|sl74|ktouch|m4u\/|me702|8325rc|kddi|phone|lg |sonyericsson|samsung|240x|x320vx10|nokia|sony cmd|motorola|up.browser|up.link|mmp|symbian|smartphone|midp|wap|vodafone|o2|pocket|kindle|mobile|psp|treo|iris|3g_t|windows ce|opera mobi|windows ce; smartphone;|windows ce; iemobile|ipod|iphone|android|opera mini|blackberry|palm os|palm|hiptop|avantgo|fennec|plucker|xiino|blazer|elaine|iris|3g_t|windows ce|opera mobi|windows ce; smartphone;|windows ce; iemobile" 
 
agent = request.ServerVariables("HTTP_USER_AGENT") & "" 
if agent <> "" then 
     
    if   regex.test(agent) then 
     response.write "是从手机"
    else
        response.write "不是从手机"
    end if 
end if 

 

### 判断浏览器运行设备类型的解决方案 在 JavaScript 中可以通过 `navigator.userAgent` 属性获取用户的代理字符串,从而判断当前设备是移动设备还是 PC 设备。以下是几种常见的实现方式: #### 方法一:基于正则表达式的通用判断 可以使用正则表达式匹配常见移动设备的关键字来区分设备类型。 ```javascript function isMobileDevice() { const userAgent = navigator.userAgent || navigator.vendor || window.opera; return /iPhone|iPad|iPod|Android|BlackBerry|IEMobile|Opera Mini|Windows Phone/i.test(userAgent); } ``` 如果返回值为 `true`,表示当前设备为移动端;反之,则为 PC 端[^3]。 --- #### 方法二:遍历关键字列表的方式 通过定义一个包含移动设备关键词的数组,逐一检查这些关键词是否存在于 `userAgent` 字符串中。 ```javascript function isPC() { const userAgentInfo = navigator.userAgent; const mobileKeywords = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; let isPcFlag = true; for (let i = 0; i < mobileKeywords.length; i++) { if (userAgentInfo.indexOf(mobileKeywords[i]) > -1) { isPcFlag = false; break; } } return isPcFlag; } ``` 此函数会返回布尔值,用于指示当前环境是否PC 环境[^1]。 --- #### 方法三:React 应用中的状态管理 对于 React 开发者来说,可以在组件初始化时动态检测设备类型并存储到状态变量中。 ```javascript import { useState, useEffect } from 'react'; const useIsMobile = () => { const [isMobile, setIsMobile] = useState(false); useEffect(() => { const userAgent = navigator.userAgent.toLowerCase(); const mobileAgents = ['iphone', 'ipad', 'ipod', 'android', 'linux', 'windows phone']; for (let i = 0; i < mobileAgents.length; i++) { if (userAgent.includes(mobileAgents[i])) { setIsMobile(true); break; } } }, []); return isMobile; }; // 使用自定义 Hook const App = () => { const isMobileDevice = useIsMobile(); return ( <div> {isMobileDevice ? <p>这是移动端</p> : <p>这是PC端</p>} </div> ); }; ``` 上述代码展示了如何利用 React 的 Hooks 功能,在应用加载时自动完成设备类型的检测[^4]。 --- #### 方法四:针对 Unity WebGL 场景下的特殊处理 当涉及 Unity 游戏引擎导出至 WebGL 平台时,可以直接在 Unity 编辑器内部配置脚本来支持多平台适配逻辑,而无需依赖外部 HTML 修改。 例如: ```csharp using UnityEngine; public class DeviceChecker : MonoBehaviour { void Start() { bool isMobile = Application.isMobilePlatform; Debug.Log(isMobile ? "Running on Mobile" : "Running on Non-Mobile"); } } ``` 这种方式适用于需要更深层次集成的应用场景[^5]。 --- ### 总结 以上提供了多种技术手段帮助开发者根据不同框架或工具链的需求灵活选择适合自己的方案。无论是简单的前端网页项目还是复杂的跨平台游戏开发,都可以找到对应的解决办法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值