h5获取手机设备信息及浏览器版本信息（vue3实现） 例如荣耀90-微信内核浏览器

在Vue 3中，获取H5页面中的浏览器版本和设备信息通常通过JavaScript完成。以下是一个简单的示例，展示了如何利用浏览器提供的navigator对象获取相关信息：

<template>
  <div>
    <p>浏览器信息:</p>
    <pre>{{ browserInfo }}</pre>
    <p>设备信息:</p>
    <pre>{{ deviceInfo }}</pre>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';

async function getBrowserAndDeviceInfo() {
  const userAgent = navigator.userAgent;
  const isMobile = /Mobi|Android/i.test(userAgent) || /iPhone|iPod|iPad|Android/i.test(navigator.platform);

  let browserVersion;
  try {
    browserVersion = parseInt(navigator.appVersion.split('.')[0], 10);
  } catch (err) {
    browserVersion = 'Unknown';
  }

  const deviceInfo = isMobile ? `移动设备，可能型号: 荣耀90 | 微信内核浏览器, 用户代理: ${userAgent}` : `桌面设备, 浏览器版本: ${browserVersion}`;

  const browserInfo = `浏览器名称: ${navigator.appName}, 版本: ${browserVersion}`;

  onMounted(() => {
    setProperties({ browserInfo, deviceInfo });
  });
}

function setProperties(obj) {
  Object.assign(this, obj);
}

getBrowserAndDeviceInfo();
</script>

在这个例子中，我们首先检查了userAgent字符串，通过正则表达式判断是否是移动设备。然后尝试从userAgent中提取浏览器版本，如果无法确定就标记为未知。最后将浏览器和设备信息设置到组件的属性上，以便在模板中显示。

需要注意的是，微信内核浏览器可能有一些特殊的行为，比如userAgent可能会有特定的格式。此代码仅供参考，实际获取结果可能因浏览器的不同而有所差异。