恼人的微信内置浏览器(附检测IE方法)

微信是提供内置浏览器的。

照理说这个腾讯美其名曰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');
 }

这下,完美了。

留下你的评论呗...

电子邮件地址不会被公开。 必填项已用*标注