jquery判断微信客户端,下载页面微信内显示使用浏览器打开浮层遮罩

jquery判断微信客户端显示指引浮层原理

html中有浮层的结构和样式,默认隐藏,js判断如果是微信中打开,将本来隐藏的浮层改为显示状态,引导用户使用流器打开。

查看demo,请使用微信扫码

jquery判断微信客户端弹浮层

css样式

.weixin-tip{ position: fixed; display: none; left:0; top:0; bottom:0; background: rgba(0,0,0,0.9); filter:alpha(opacity=90);  height: 100%; width: 100%; z-index: 100; }
.weixin-tip p{ text-align: center; margin-top: 10%; padding:0 5%; }
.weixin-tip img{ width: 100%; height: auto; }

html结构

参考图片:https://huaban.com/pins/2226483540/

    <div class="weixin-tip">
        <p>
            <img src="static/tip-android-wx.png" alt="微信打开"/>
        </p>
    </div>
    <!-- /.weixin-tip -->

js 代码

<script src="https://cdnjs.loli.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
    $(window).on("load",function(){
        var winHeight = $(window).height();
        function is_weixin() {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                return true;
            } else {
                return false;
            }
        }
        var isWeixin = is_weixin();
        if(isWeixin){
            $(".weixin-tip").css("height",winHeight);
            $(".weixin-tip").show();
        }
    })
</script>

代码出处(两个出处严重雷同,结构、图片,这里都是混合引用!)
58二维码应用分发
微信扫码提示在浏览器中打开的遮罩代码解决方式

历史内容

2015-11-18 多说《最近访客》调用代码设置头像大小的方法 view 3,484
六月读文摘要 view 489

Relay Tips: 一极乐https://yijile.com/log/490/