惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

MongoDB | Blog
MongoDB | Blog
罗磊的独立博客
美团技术团队
B
Blog
量子位
The Cloudflare Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
aimingoo的专栏
aimingoo的专栏
The GitHub Blog
The GitHub Blog
博客园 - 聂微东
P
Proofpoint News Feed
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
D
DataBreaches.Net
博客园 - 三生石上(FineUI控件)
Y
Y Combinator Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
Vercel News
Vercel News
Blog — PlanetScale
Blog — PlanetScale
云风的 BLOG
云风的 BLOG
Microsoft Azure Blog
Microsoft Azure Blog
有赞技术团队
有赞技术团队
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
阮一峰的网络日志
阮一峰的网络日志
S
SegmentFault 最新的问题

拓源网

[反调试]审查元素清空页面或重定向 - 拓源网 批量替换文件名的powershell脚本 - 拓源网 使用Python移除PDF编辑权限密码 - 拓源网 写一款《PPT将指定页面另存为》小工具 - 拓源网 让jquery代码只能在指定域名下运行的三种方法 - 拓源网 PPT拼图批量生成工具 - 拓源网 Deepseek微信聊天机器人 - 拓源网 使用Python自动抓取zblog文章到腾讯云大模型知识引擎LKE,投喂数据专属化自己的知识库 - 拓源网 deepseek生图指令 - 拓源网
微信和QQ访问页面提示使用右上角浏览器打开 - 拓源网
2025-09-28 · via 拓源网

实现思路:判断微信与QQ的userAgent进而在右上角显示“使用浏览器打开”的提示。

CSS:
<style>
    .overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:1000; }
    .tip-box { position:fixed; top:20px; right:20px; background-color:#fff; padding:10px; border-radius:5px; box-shadow:0 2px 4px rgba(0,0,0,0.3); z-index:1001; display:none; }
    .tip-box .tiparrow { display:block; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #fff; position:absolute; top:-10px; right:10px; }
</style>
HTML:
<div class="overlay"></div>
<div class="tip-box">
    <div class="tip-content">点击右上角“...”使用浏览器打开</div>
    <div class="tiparrow"></div>
</div>
jQuery:
<script>
    $(document).ready(function () {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) || ua.match(/QQ/i)) {
            $('.overlay').show();
            $('.tip-box').show();
        }
    });
</script>

效果截图: