h5页面用js判断机型是安卓还是ios，判断有app安装没app跳转应用商店app stroe或者安卓应用商店

用vue3写的wep页面。亲测好使。
疑惑：
微信跳转和浏览器跳转不一样，需要控制定时器的时间，android在没下载的情况下点击没反应，ios在没下载的情况下会跳404，就是定时器2000，不知道有没有别的办法，用iframe嵌套ios的跳转在没下载的情况下是404，2000是刚好的时间点，有点刚刚好，不是特别完美。有大佬会的可以交流。

<template><div><div class="bottom_button"><div class="downloadapp" @click="downloadApp">下载客户端</div><div class="openapp" @click="openApp">已下载APP 立即打开</div></div></div>
</template>

<script setup>// 检测是哪个客户端const detectDevice = () => {/*** navigator.userAgent用户浏览器相关信息的只读属性* window.opera JavaScript语言，是opera5开始有的一个脚本object，一个boolean的值，用来检察浏览器是否是opera*/var userAgent = navigator.userAgent || navigator.vendor || window.opera;if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/iPod/i)) {return 'iOS';} else if (userAgent.match(/Android/i)) {return 'Android';} else {return 'unknown';};};// 打开appconst openApp = () => {let deviceType = detectDevice();if (deviceType === 'Android') {console.log('安卓用户在没安装的情况下点击没反应,有的话在跳转');try {const appURL = "跳转地址"; // 替换成你的应用的URL Scheme或Universal Linkwindow.location.href = appURL;} catch (error) {// 如果捕获到错误，通常意味着应用没有安装console.error("应用未安装或无法打开", error);downloadApp();}};if (deviceType === 'iOS') {console.log('苹果用户,在没安装的情况下会跳转到一个404页面。需要做一个处理');const appURL = "跳转地址"; // 替换成你的应用的URL Scheme或Universal Linklet loadDateTime = new Date();window.setTimeout(function() {let timeOutDateTime = new Date();console.log(timeOutDateTime, 'timeOutDateTime', timeOutDateTime - loadDateTime < 5000, timeOutDateTime - loadDateTime);if (timeOutDateTime - loadDateTime < 5000) {downloadApp();} else {window.close();}}, 2000);window.location = appURL;}};// 下载appconst downloadApp = () => {let deviceType = detectDevice();if (deviceType === 'Android') {console.log('下载');const downloadURL = "下载地址";window.location = downloadURL;} else if (deviceType === 'iOS') {// 跳转到应用商店下载应用的URLconst downloadURL = "下载地址"; // 替换成你的应用下载链接window.location = downloadURL;} else {console.log('其他');}}
</script>