<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>请在微信外打开此链接</title> </head> <style type="text/css"> *{ margin:0; padding:0; } a{ text-decoration: none; } img{ max-width: 100%; height: auto; } .weixin-tip{ display: none; position: fixed; left:0; top:0; bottom:0; background: rgba(0,0,0,0.8); filter:alpha(opacity=80); height: 100%; width: 100%; z-index: 100; } .weixin-tip p{ text-align: center; margin-top: 10%; padding:0 5%; } </style> <body> <div class="weixin-tip"> <p> <img src="https://s1.ax1x.com/2020/07/09/UmomPf.png" alt="微信打开"/> </p> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(window).on("load",function(){ var winHeight = $(window).height(); function is_weixin() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { return true; } else { return false; } } var isWeixin = is_weixin(); if(isWeixin){ $(".weixin-tip").css("height",winHeight); $(".weixin-tip").show(); }else{ window.location.href="/"; } }) </script> </body> </html>
不多啰嗦，直接上源码。由于微信封域名实在厉害，不得已的办法，却是很有效的办法！效果自己测试
如果代码中的外链图片地址失效，这里有备用下载地址: