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

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

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

查看demo,请使用微信扫码

jquery判断微信客户端弹浮层

css样式

1
.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; }
2
.weixin-tip p{ text-align: center; margin-top: 10%; padding:0 5%; }
3
.weixin-tip img{ width: 100%; height: auto; }

html结构

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

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

js 代码

1
<script src="https://cdnjs.loli.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
2
<script>
3
    $(window).on("load",function(){
4
        var winHeight = $(window).height();
5
        function is_weixin() {
6
            var ua = navigator.userAgent.toLowerCase();
7
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
8
                return true;
9
            } else {
10
                return false;
11
            }
12
        }
13
        var isWeixin = is_weixin();
14
        if(isWeixin){
15
            $(".weixin-tip").css("height",winHeight);
16
            $(".weixin-tip").show();
17
        }
18
    })
19
</script>

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

旧文

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