手机端PC端判断 微信浏览器支付宝浏览器判断
元元没饭吃
帮助5人
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="https://obs.genetroncare.com/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="https://obs.genetroncare.com/group1/M00/07/74/CgAGcWIVm52AQoBFAAAFzICG2MU691.png" alt=""
srcset="">
<span>iPhone下载</span>
</div>
</div>
<div class="btn-anriod" onclick="isAndroidshop()">
<div class="android">
<img src="https://obs.genetroncare.com/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;">
<p
style="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>
// ANDROIDURL
const androidIdurl = ''
// IOSURL
const appldIdurl = ''
// --------------2022/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");//Android
isAndroidshop()
}
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
// alert("iOS");//iOS
window.location.href = appldIdurl
}
}
// 判断手机还是PC
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
// window.location.href = "https://app.genetroncare.com";
} else if (/(Android)/i.test(navigator.userAgent)) {
// window.location.href = "https://app.genetroncare.com";
} else {
// window.location.href = "https://app.genetroncare.com";
var openRight = document.getElementsByClassName('openRight')[0]
openRight.remove()
var sanjiao = document.getElementsByClassName('sanjiao')[0]
sanjiao.remove()
};
// 跳转appStore
function 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
}
}
// 确认跳转Android
function isAndroidgo() {
if (/android/i.test(navigator.userAgent)) {
// window.location.href = androidIdurl
let android = document.getElementsByClassName('dialgBox')[0]
android.style.display = 'none'
} else {
return false
}
}
// 取消跳转Android
function 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>
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhehkiii
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01
