如何检测应用当前运行的平台属于移动端还是web端？

以下是几种不同场景下可用的识别方案，可根据你的技术栈和业务需求选择：

方案1：前端原生UA检测（无框架依赖） #

这是适用范围最广的通用方案，不需要引入额外依赖，直接通过浏览器内置属性判断：

• 核心逻辑：匹配用户代理字符串中的移动端特征，快速区分平台类型
• 示例代码：

function detectPlatform() {
  const userAgent = navigator.userAgent.toLowerCase();
  // 可根据业务覆盖的设备类型自定义关键词列表
  const mobileKeywords = ['android', 'iphone', 'ipad', 'ipod', 'windows phone'];
  const isMobile = mobileKeywords.some(keyword => userAgent.includes(keyword));
  return isMobile ? 'mobile' : 'web';
}

• 注意事项：UA支持用户手动篡改，适合对识别精度要求不高的场景，若有强校验需求可搭配其他方案组合使用

方案2：跨端框架内置API识别 #

如果使用主流跨端框架开发，优先用框架自带的识别能力，精度远高于原生UA检测：

• Taro：调用Taro.getEnv()，返回WEB对应web端，返回WEAPP/RN等对应移动端场景
• uni-app：调用uni.getSystemInfoSync().platform，返回ios/android对应移动端，返回h5/devtools对应web端场景
• React Native + Web：直接调用Platform.OS，返回ios/android对应移动端，返回web对应web端

方案3：响应式断点辅助判断 #

如果仅需要做UI层面的小幅适配，不需要逻辑层差异处理，可直接用CSS断点实现，维护成本最低：

• 核心逻辑：设定移动端通用宽度阈值，行业通用阈值为768px，小于阈值应用移动端样式，大于阈值应用web端样式
• 示例代码：

/* 移动端样式 */
@media (max-width: 767px) {
  .container {
    padding: 10px;
  }
}
/* web端样式 */
@media (min-width: 768px) {
  .container {
    padding: 24px;
  }
}

• 注意事项：仅适合UI适配场景，若涉及逻辑层差异（比如web端用网页支付、移动端唤端支付）需要搭配前两种方案使用

选型建议 #

• 仅UI适配：优先选响应式断点方案
• 有逻辑层差异、使用跨端框架开发：优先选框架内置API方案
• 原生开发无跨端框架依赖：优先选UA检测方案

内容的提问来源于stack exchange，提问作者Nimal suresh