H5微信打开后引导用户去浏览器

最新推荐文章于 2023-06-09 10:05:30 发布

常同學

最新推荐文章于 2023-06-09 10:05:30 发布

阅读量4.8k

点赞数 8

分类专栏： H5 文章标签： javascript css html5 vue.js

本文链接：https://blog.csdn.net/weixin_43382386/article/details/111276032

版权

H5 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

效果图

素材1+素材2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <title>H5引导页</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    body {
        width: 100%;
        height: 100%;
        background: #FFFFFF;
    }
    
    .bg {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        background: rgba(0, 0, 0, 0.9);
        text-align: end;
        overflow: hidden;
        padding: 1rem 5px 0 1rem;
    }
    
    .bg img {
        width: 93%;
        height: auto;
    }
</style>

<body>
    <div class="app">
        <div class="bg"><img src="https://i-blog.csdnimg.cn/blog_migrate/6e5cef3f1c57859374a76ee1815c41d2.png" alt=""></div>
        <h2>内容</h2>
    </div>
    <script>
        window.onload = function() {
	        var fontSize = $(window).width() / 18.75; //屏幕的宽
	        $("html").css("font-size", fontSize + "px");
	        if (IsWeixinOrAlipay() == 13) {
	                $(".bg").css('display', 'block')
	            } else {
	                console.log(IsWeixinOrAlipay())
	            }
        }

        function IsWeixinOrAlipay() {
            var ua = window.navigator.userAgent.toLowerCase();
            //判断是不是微信
            if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                return 13;
            }
            //判断是不是支付宝
            if (ua.match(/AlipayClient/i) == 'alipayclient') {
                return 12;
            }
            //哪个都不是
            return 0;
        }
    </script>
</body>

</html>

常同學

关注

8
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
H5微信打开后引导用户去浏览器

效果图素材1+素材2<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"> <script sr
复制链接

扫一扫