如何通过JavaScript检测iOS和Android平台的WebView与浏览器访问？

一、后端PHP检测方式 #

通过解析$_SERVER['HTTP_USER_AGENT']（用户代理字符串）区分，不同平台的WebView和浏览器UA有明显特征差异：

Android平台检测 #

Android系统中，WebView的UA通常包含wv（WebView缩写），而Chrome浏览器会明确带有Chrome标识：

function isAndroidWebView() {
    $ua = $_SERVER['HTTP_USER_AGENT'];
    return strpos($ua, 'Android') !== false 
        && strpos($ua, 'wv') !== false 
        && strpos($ua, 'Chrome') === false;
}

iOS平台检测 #

iOS的Safari浏览器UA会带有Safari字符串，而WKWebView/UIWebView则不包含该标识：

function isiOSWebView() {
    $ua = $_SERVER['HTTP_USER_AGENT'];
    return strpos($ua, 'AppleWebKit') !== false 
        && strpos($ua, 'Safari') === false 
        && (strpos($ua, 'iPhone') !== false || strpos($ua, 'iPad') !== false);
}

二、前端JavaScript检测方式 #

利用navigator.userAgent读取UA，针对iOS和Android分别做判断：

function detectWebView() {
    const ua = navigator.userAgent;
    const result = {
        isWebView: false,
        platform: null // 'android' / 'ios' / null
    };

    // Android WebView检测
    if (/Android/.test(ua) && /wv/.test(ua) && !/Chrome/.test(ua)) {
        result.isWebView = true;
        result.platform = 'android';
    }

    // iOS WebView检测
    if (/iPhone|iPad|iPod/.test(ua) && /AppleWebKit/.test(ua) && !/Safari/.test(ua)) {
        result.isWebView = true;
        result.platform = 'ios';
    }

    return result;
}

// 使用示例
const webViewInfo = detectWebView();
console.log('是否为WebView:', webViewInfo.isWebView);
console.log('平台:', webViewInfo.platform);

说明：iOS的WKWebView和UIWebView都不会在UA中携带Safari，而Safari浏览器必然包含该字段；Android系统WebView的核心标识是wv，可直接与Chrome浏览器区分。

三、Vue框架中的集成方法 #

可以将检测逻辑封装为工具函数，在组件中灵活调用：

1. 新建工具文件utils/webViewDetect.js，导出检测函数：

export function detectWebView() {
    // 同上的检测逻辑
}

2. 在Vue组件中使用（以App.vue为例）：

<template>
  <div id="app">
    <!-- 页面内容 -->
  </div>
</template>

<script>
import { detectWebView } from './utils/webViewDetect';

export default {
  name: 'App',
  mounted() {
    const webViewInfo = detectWebView();
    if (webViewInfo.isWebView) {
      console.log(`当前为${webViewInfo.platform} WebView访问`);
      // 可在此处执行WebView专属逻辑，比如调用后端接口记录设备类型
    }
  }
}
</script>

也可以挂载到Vue原型实现全局调用：

// main.js
import { detectWebView } from './utils/webViewDetect';

Vue.prototype.$detectWebView = detectWebView;

// 在任意组件中调用
this.$detectWebView();

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