一般而言,兼容手机浏览器的网站有两种形式。一种就是我们把PC网站内容做成自适应手机内容,这样共享一个数据库和框架就可以实现PC和手机端的访问,这类对于大数据或者结构复杂的网站来说有点困难,毕竟在手机端我们有些行业获取的信息不需要这么多,只需要集中主要的信息展现就可以,第二种就是有些行业使用的独立WAP网站,制作一个单独的WAP网站,适应手机的宽度和访问,内容也是经过筛选的主要信息,没有PC端多。
问题出来了,如果第一种自适应那就简单根据手机来调整前端框架,如果第二种,那对于访问PC网站的来说,如果手机网站访问到PC网站信息(比如搜索到某个信息点击后),会根据手机客户端然后跳转到手机WAP网站。
这里我们只需要用简单的JS判断就可以实现跳转,下面2个方法是蜗牛以前有用过的,有需要的朋友可以参考加入到网站中使用。
第一种:
function uaredirect(murl){
try {
if(document.getElementById(\”bdmark\”) != null){
return;
}
var urlhash = window.location.hash;
if (!urlhash.match(\”fromapp\”)){
if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i))) {
location.replace(murl);
}
}
} catch(err){}
}
上面的文件保存到shouji.js文件中,然后在需要调用的网站中引用。
<script src=\”shouji.js\” type=\”text/javascript\”></script>
<script type=\”text/javascript\”>uaredirect(\” https://www.itbulu.com/\”);</script>
红色网址部分换成我们的WAP站点网址。
第二种:
<script type=\”text/javascript\”>
try {
var urlhash = window.location.hash;
if (!urlhash.match(\”fromapp\”))
{
if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i)))
{
window.location=\” https://www.itbulu.com/\”;
}
}
}
catch(err)
{
}</script>
直接一个JS文件加入到需要的页面中,网址部分换成我们的。这一种我们也可以封装到JS文件中,然后调用,对于一些已经发布的站点信息,可以起到重新调整作用。第一种是直接需要加入到所需站点中的。
总结,以上两种手机浏览器判断跳转WAP网站JS文件方法都测试过可以的,一般是没有问题的。