js判断浏览器是否手机端PC端 (补充是否微信浏览器支付宝浏览器其他浏览器)
效果图如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"><title>Brave</title></head><body><div id="nav-index"><img class='imgH' img src="/group1/M00/07/73/CgAGcmIVm2eAStCPAAK2jebw96U645.png"alt="" srcset=""><span class="openRight">请在默认浏览器中打开</span><p class="sanjiao"></p></div><div class="body-box"><div class="ts"><div class="btn-phone" onclick="myFunction()"><div class="iphone"><img src="/group1/M00/07/74/CgAGcWIVm52AQoBFAAAFzICG2MU691.png" alt=""srcset=""><span>iPhone下载</span></div></div><div class="btn-anriod" onclick="isAndroidshop()"><div class="android"><img src="/group1/M00/07/73/CgAGcmIVm3-Acvt0AAAFPQWALG8814.png" alt=""srcset=""><span>Android下载</span></div></div></div></div><div class="dialgBox" style="position: fixed; top: 30%;background-color: #FFFFFF;width: 76%;left: 12%;"><div style="height: auto;margin: 0 auto;text-align: center;line-height: 18px;padding-top: 14px;"><pstyle="font-size: 18px;font-weight: bold;color: #2F354D;line-height: 22px;display: block;padding-bottom: 6px;">下载BRAVE</p><p style="padding-bottom: 24px;font-size: 13px;font-weight: 400;color: #9095A7;line-height: 24px;">是否确定下载BRAVE</p><div><span onclick="isNoandroid()"style="float: left; width: 50%;color: #5F697D;border-top: 1px solid #D4D6DD;border-right: 1px solid #D4D6DD;height: 50px;display: flex;justify-content: center;align-items: center;">取消</span><span onclick="isAndroidgo()"style="float: left; width: 49%;color: #4B84FF;border-top: 1px solid #D4D6DD;height: 50px;display: flex;justify-content: center;align-items: center;">确定</span></div></div></div></body><script>// ANDROIDURLconst androidIdurl = ''// IOSURLconst appldIdurl = ''// --------------/02/23---------------------// 禁止点击事件function clickDisabled() {var btn_phone = document.getElementsByClassName('btn-phone')[0]btn_phone.style.pointer - events == 'none'var btn_anriod = document.getElementsByClassName('btn-anriod')[0]btn_anriod.style.pointer - events == 'none'}// 判断系统var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端// alert('是否是Android：' + isAndroid);// alert('是否是iOS：' + isiOS);//直接用正则，i是忽略大小写function checkPlatform() {if (/android/i.test(navigator.userAgent)) {// alert("Android");//AndroidisAndroidshop()}if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {// alert("iOS");//iOSwindow.location.href = appldIdurl}}// 判断手机还是PCif (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {// window.location.href = "";} else if (/(Android)/i.test(navigator.userAgent)) {// window.location.href = "";} else {// window.location.href = "";var openRight = document.getElementsByClassName('openRight')[0]openRight.remove()var sanjiao = document.getElementsByClassName('sanjiao')[0]sanjiao.remove()};// 跳转appStorefunction myFunction() {if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {window.location.href = appldIdurl } else {return false}}// 跳转Android确认信息function isAndroidshop() {if (/android/i.test(navigator.userAgent)) {let android = document.getElementsByClassName('dialgBox')[0]android.style.display = 'inline-block'} else {return false}}// 确认跳转Androidfunction isAndroidgo() {if (/android/i.test(navigator.userAgent)) {// window.location.href = androidIdurllet android = document.getElementsByClassName('dialgBox')[0]android.style.display = 'none'} else {return false}}// 取消跳转Androidfunction isNoandroid() {let android = document.getElementsByClassName('dialgBox')[0]android.style.display = 'none'}window.onload = function () {checkPlatform()// 获取浏览器的宽var clientW = document.documentElement.clientWidth// 获取图片的高var clientH = (clientW / 6)var imgH = clientW + clientH// 给图片设置高度var imgStyle = document.getElementById('nav-index')imgStyle.style.height = imgH + 'px'// alert(imgStyle.style.height = imgH + 'px')// alert(clientH)var calcH = imgStyle.style.height = imgH + 'px'// body-box给图片设置高度var imgStyle = document.getElementsByClassName('body-box')[0]imgStyle.style.height = 'calc(100% - ' + calcH + ')'// console.log('calc(100% - '+calcH)'// 操作nav-index DOM获取节点var div = document.getElementById("nav-index");// 返回元素的总高度var h = window.getComputedStyle(div).height;// console.log(h);// // 禁止双指放大// document.documentElement.addEventListener('touchstart', function (event) {//if (event.touches.length > 1) {// event.preventDefault();//}// }, false);// // 禁止双击放大// var lastTouchEnd = 0;// document.documentElement.addEventListener('touchend', function (event) {//var now = Date.now();//if (now - lastTouchEnd <= 300) {// event.preventDefault();//}//lastTouchEnd = now;// }, false);// 是否支付宝或者微信浏览器 其他浏览器if (/MicroMessenger/.test(window.navigator.userAgent)) {console.log('微信客户端');} else if (/AlipayClient/.test(window.navigator.userAgent)) {console.log('支付宝客户端');} else {var openRight = document.getElementsByClassName('openRight')[0]openRight.remove()var sanjiao = document.getElementsByClassName('sanjiao')[0]sanjiao.remove()}}</script><style>* {padding: 0;margin: 0;}html,body {/* background-color: #2F354D; */height: 100%;}.dialgBox {display: none;border-radius: 10px;}#nav-index {width: 100%;height: auto;position: relative;}.sanjiao {position: absolute;right: 22px;top: 6px;width: 0;height: 0;border-left: 4px solid transparent;border-right: 4px solid transparent;border-bottom: 8px solid #FFFFFF;}#nav-index>img {width: 100%;height: 100%;}#nav-index>span {display: flex;justify-content: center;align-items: center;width: 128px;height: 45px;background: #FFFFFF;box-shadow: 0px 4px 10px 0px rgba(52, 68, 132, 0.15);font-size: 13px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #2F354D;line-height: 18px;position: absolute;right: 13px;top: 12px;border-radius: 8px;}.body-box {display: flex;justify-content: center;align-items: center;background: linear-gradient(180deg, #FFFFFF 0%, #F4F8FD 100%);/* height: calc(100% - 956.667px); */}.btn-phone {display: flex;justify-content: center;}.iphone {display: flex;justify-content: center;align-items: center;width: 214px;height: 44px;background: linear-gradient(90deg, #6F9CFF 0%, #4B84FF 100%);box-shadow: 0px 6px 20px -2px rgba(75, 132, 255, 0.3);border-radius: 22px;}.iphone>img {width: 18px;height: 18px;}.iphone>span {font-size: 15px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #FFFFFF;line-height: 22px;letter-spacing: 1px;padding-left: 12px;}.btn-anriod {display: flex;justify-content: center;margin-top: 24px;}.android {display: flex;justify-content: center;align-items: center;width: 214px;height: 44px;background: linear-gradient(90deg, #4CDDE3 0%, #1CCADC 100%);box-shadow: 0px 6px 20px -2px rgba(40, 212, 229, 0.3);border-radius: 22px;}.android>img {width: 18px;height: 18px;}.android>span {font-size: 15px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #FFFFFF;line-height: 22px;letter-spacing: 1px;padding-left: 12px;}</style></html>
如果觉得《手机端PC端判断 微信浏览器支付宝浏览器判断》对你有帮助，请点赞、收藏，并留下你的观点哦！
