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

推荐订阅源

The Cloudflare Blog
U
Unit 42
F
Fortinet All Blogs
雷峰网
雷峰网
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
月光博客
月光博客
Y
Y Combinator Blog
罗磊的独立博客
V
Visual Studio Blog
大猫的无限游戏
大猫的无限游戏
J
Java Code Geeks
量子位
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
爱范儿
爱范儿
B
Blog RSS Feed
aimingoo的专栏
aimingoo的专栏
有赞技术团队
有赞技术团队
T
Tailwind CSS Blog
Microsoft Security Blog
Microsoft Security Blog
L
LangChain Blog
I
InfoQ
博客园 - 叶小钗
博客园 - 聂微东
Last Week in AI
Last Week in AI

拓源网

[反调试]审查元素清空页面或重定向 - 拓源网 批量替换文件名的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>

效果截图: