前端页面嵌入二维码，微信扫出现“请点击右上角，选择“在浏览器中打开“的解决方法

admin 管理员组

文章数量: 887021

    </div>
</div>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    body, html {
        width: 100%;
    }

    a {
        text-decoration: none;
    }

    .t-bg-2 {
        width: 100%;
        height: 130px;
        background: #2698ff;
    }

    @media (min-width: 1700px) {
        .container {
            width: 1700px;
        }
    }

    // 适应不同的页面
    @media (min-width: 1170px) {
        .container

    {
        padding-left: 0;
        padding-right: 0;
    }

    }

    //适应不同的页面
    .template-2 .content {
        margin-top: -90px;
    }

    .content {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .template-common .t-icon {
        background-color: #fff;
        width: 170px;
        height: 170px;
        border-radius: 25px;
        box-shadow: 0 0 10px rgba(0,0,0,.2);
        display: flex;
        //弹性和布局，适应手机端页面,同时适应pc端页面 align-items: center;
        margin: 0 auto;
    }

        .template-common .t-icon img {
            width: 120px;
            height: 120px;
            border-radius: 30px;
            border: 1px solid #e5e5e5;
            margin: 0 auto;
        }

    .template-common .t-icon1 {
        width: 150px;
        height: 150px;
        display: flex;
        align-items: center;
        margin: 0 auto;
    }

        .template-common .t-icon1 img {
            margin: 0 auto;
            width: 140px;
            height: 140px;
            border: 1px solid #e5e5e5;
        }

    .template-common .t-name {
        color: #333;
        text-align: center;
        margin-bottom: 20px;
        margin-top: 20px;
    }

        .template-common .t-name .tit {
            font-size: 20px;
            margin-bottom: 5px;
            margin-top: 10px;
        }

        .template-common .t-name .name-info {
            margin-bottom: 20px;
            margin-top: 10px;
        }

            .template-common .t-name .name-info span {
                margin-right: 10px;
                color: #666;
                font-size: 13px;
            }

    .template-common .template-btn-wrap {
        text-align: center;
        margin-bottom: 20px;
    }

    .template-common .template-btn {
        color: #fff;
        background-color: #157df1;
        height: 40px;
        padding: 0 38px;
        line-height: 40px;
        font-size: 18px;
        display: inline-block;
        border-radius: 30px;
    }

    .fl {
        float: left;
        _display: inline;
        *zoom: 1;
    }

    img {
        max-width: 100%;
        height: auto;
    }

</style>

<script>
    function is_weixin() {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            return true;
        } else {
            return false;
        }
    }// 这个实现是否是在微信打开的，如果是返回true，如果不是，返回false
    $(function () {
        var isWeixin = is_weixin();//调用is_weixin函数；获取到值
        var winHeight = typeof window.innerHeight != 'undefined' ?
            window.innerHeight : document.documentElement.clientHeight;
        var weixinTip = $('<div id="weixinTip"><div class="test"><p>请点击右上角,选择"在浏览器中打开"</p><img src="这里可填写相对路径，可填写绝对路径"/></div></div>');
        if (isWeixin) {
            $("body").append(weixinTip);
        }
        $("#weixinTip").css({
            "position": "fixed",
            "left": "0",
            "top": "0",
            "height": winHeight,
            "width": "100%",
            "z-index": "1000",
            "background-color": "rgba(0,0,0,0.8)",
            "filter": "alpha(opacity=80)",
            "float": "left"
        });
        $("#weixinTip div p").css({
            "text-align": "right",
            "width": "85%",
            "margin-top": "10%",
            "color": "#fff",
        });
        $("#weixinTip div").css({
            "display": "flex",
            "justify-content": "space-around",
            "align-items": "center",
            "padding-left": "4%",
            "padding-right": "4%"

        })
        $("#weixinTip div img").css({
            "text-align": "left",
            "width": "7%",
            "height": "7%",
            "margin-top": "7%",
            "padding-left": "4%",
            "padding-right": "4%"
        })
    })

</script>

本文标签： 请点击 解决方法 器中 页面 二维码