微信是提供内置浏览器的。
照理说这个腾讯美其名曰X5内核的其实就是WebKit内核,应该没问题啊。
然而,网页在微信内置的上面总是显示不正常,简直神坑。腾讯你改人家的开源代码能不能省点心?
于是,我就需要实现一种禁止微信访问我网站的方案(并指导用户用自带浏览器打开)。
Step1:微信的User-Agent
查询资料得到了微信的UA字符串:
安卓微信内置浏览器UA:
Mozilla/5.0 (Linux; Android 5.0; SM-N9100 Build/LRX21V) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile Safari/537.36 MicroMessenger/6.0.2.56_r958800.520 NetType/WIFI
IOS微信内置浏览器UA:
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D257 MicroMessenger/6.0.1 NetType/WIFI
那这样,思路就很清晰了,直接判断UA就行了。
Step2:怎么判断
很明显,这种在客户端进行处理的应该选用javascript来判断(php也可以,这里不做说明了)。
js获取UA可以这样:
var ua = window.navigator.userAgent.toLowerCase();
而判断则可以使用正则判断忽略大小写:
ua.match(/MicroMessenger/i)
再来个判断,如果判断为微信的就跳转。
if(ua.match(/MicroMessenger/i) == 'micromessenger'){ location.replace("wechat.php"); }
大功告成。
Step3:代码摆放的正确姿势
附上一分钱助学的快速答题模式的页面结构。
<!DOCTYPE html> <?php session_start(); ?> <html> <head lang="zh-cn"> <meta charset="UTF-8"> <title>快速模式 | 一分钱助学</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="renderer" content="webkit"> <meta http-equiv="Cache-Control" content="no-siteapp"/> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> <META HTTP-EQUIV="Expires" CONTENT="0"> <link rel="alternate icon" type="image/png" href="assets/i/favicon.png"> <link rel="stylesheet" href="assets/css/amazeui.min.css"/> <link rel="stylesheet" href="assets/css/ocf.css"/> </head> <body> ...... </body>
可见,像以往一样在body标签最后加载js会使得dom框架加载出来后过一会儿才跳转,降低用户体验。
于是,这段代码得在页面开头加载。
我选则紧跟title标签后面插入,当然,还可以再前面一点。
插入后是这样的:
<!DOCTYPE html> <?php session_start(); ?> <html> <head lang="zh-cn"> <meta charset="UTF-8"> <title>快速模式 | 一分钱助学</title> <script> var ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i) == 'micromessenger'){ location.replace("wechat.php"); } </script> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="renderer" content="webkit"> <meta http-equiv="Cache-Control" content="no-siteapp"/> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> <META HTTP-EQUIV="Expires" CONTENT="0"> <link rel="alternate icon" type="image/png" href="assets/i/favicon.png"> <link rel="stylesheet" href="assets/css/amazeui.min.css"/> <link rel="stylesheet" href="assets/css/ocf.css"/> </head> <body> ...... </body>
大功告成,就是这样。
Step4:忘了还有万恶的IE了
对啊,IE呢?
于是,我又修改了代码:
var ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i) == 'micromessenger'){ location.replace("wechat.php"); } if(ua.match(/MSIE 9.0/i) == 'msie 9.0'){ location.replace("unsupported.php"); } else if(ua.match(/MSIE 8.0/i) == 'msie 8.0'){ location.replace("unsupported.php"); } else if(ua.match(/MSIE 7.0/i) == 'msie 7.0'){ location.replace("unsupported.php"); } else if(ua.match(/MSIE 6.0/i) == 'msie 6.0'){ location.replace("unsupported.php"); } else { //alert('OK'); }
这下,完美了。