微信是提供内置浏览器的。
照理说这个腾讯美其名曰 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');
}
这下，完美了。