信息

【技术分享】QQ里提示使用浏览器打开网站代码-QQ内网站访问优化

【技术分享】QQ里提示使用浏览器打开网站代码-QQ内网站访问优化 建站优化 第1张

安鹿分享在 QQ 中提示用户使用浏览器打开网站的技术方案。通过 PHP 代码检测用户代理(QQ / 微信),触发包含响应式设计的 HTML 页面,引导用户点击右上角用浏览器打开,并利用 Clipboard.js 实现网址复制功能。代码可嵌入网页头部或底部,帮助站长解决 QQ 内置浏览器的访问限制,提升移动端用户体验。

【技术分享】QQ里提示使用浏览器打开网站代码-QQ内网站访问优化 建站优化 第2张

QQ里打开网站的时候,不会直接打开,而是提示使用浏览器打开,很多人可能需要或想要!

直接把以下代码加上head或者footer即可。

<?php if ((strpos($_SERVER['HTTP_USER_AGENT'], 'QQ/') || strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== false)) : ?>
    <?php $siteurl = ($_SERVER['SERVER_PORT'] == '443' ? 'https://' : 'http://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>
        <meta charset="UTF-8">
        <title>使用浏览器打开</title>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
        <style>
            body,html{width:100%;height:100%}*{margin:0;padding:0}body{background-color:#fff}.top-bar-guidance{font-size:15px;color:#fff;height:70%;line-height:1.8;padding-left:20px;padding-top:20px;background:url(//cdn.jsdelivr.net/gh/HaoOuBa/BlogStatic/usr/uploads/2021/05/4203917515.png) center top/contain no-repeat}.top-bar-guidance .icon-safari{width:25px;height:25px;vertical-align:middle;margin:0 .2em}.app-download-btn{display:block;width:214px;height:40px;line-height:40px;margin:18px auto 0 auto;text-align:center;font-size:18px;color:#2466f4;border-radius:20px;border:.5px #2466f4 solid;text-decoration:none}
        </style>
    </head>
    <body>
        <div class="top-bar-guidance">
            <p>点击右上角<img src="//cdn.jsdelivr.net/gh/HaoOuBa/BlogStatic/usr/uploads/2021/05/183124684.png" class="icon-safari"> <span id="openm">Safari打开</span></p>
            <p>可以继续浏览本站哦~</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
        <a data-clipboard-text="<?php echo $siteurl; ?>" class="app-download-btn">点此复制本站网址</a>
        <script type="text/javascript">
            new ClipboardJS(".app-download-btn");
            document.querySelector(".app-download-btn").onclick = function () {
                alert("复制成功!")
            }
        </script>
    </body>
    </html>
    <?php exit; ?>
<?php endif; ?>
© 版权声明
THE END
感谢支持啦!୧( ⁼̴̶̤̀ω⁼̴̶̤́ )૭
点赞9
快来说两句( ˃̶̤́ ꒳ ˂̶̤̀ ) 抢沙发
头像
良言一句三冬暖,恶语伤人六月寒|禁止纯数字、字母、符号、表情
提交
头像

昵称

取消
昵称表情快捷回复

    请登录后查看评论内容