微信和QQ访问页面提示使用右上角浏览器打开

实现思路：判断微信与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>

效果截图：