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

开发者
浏览 loading

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

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

查看demo，请使用微信扫码

jquery判断微信客户端弹浮层

css样式

1
2
3
.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/

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

js 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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/ ）