今天开发前端遇到客户需要用主页面判断访问的是否是电脑端和手机端进入不同的页面,根据不同客户端显示不同的页面。废话不说直接上代码。
js版本
html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title>手机端PC端验证</title>
<script >
if(IsPC()){
alert("电脑端");
}else{
alert("手机端");
}
function IsPC()
{
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }
}
return flag;
}
</script>
</head>
<body >
</body>
</html>
主要js代码
java版本
封装调用类
package com.tgb.util;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
/**
* 检测是否为移动端设备访问
*/
public class CheckMobile {
// \b 是单词边界(连着的两个(字母字符 与 非字母字符) 之间的逻辑上的间隔),
// 字符串在编译时会被转码一次,所以是 "\\b"
// \B 是单词内部逻辑间隔(连着的两个字母字符之间的逻辑上的间隔)
static String phoneReg = "\\b(ip(hone|od)|android|opera m(ob|in)i"
+"|windows (phone|ce)|blackberry"
+"|s(ymbian|eries60|amsung)|p(laybook|alm|rofile/midp"
+"|laystation portable)|nokia|fennec|htc[-_]"
+"|mobile|up.browser|[1-4][0-9]{2}x[1-4][0-9]{2})\\b";
static String tableReg = "\\b(ipad|tablet|(Nexus 7)|up.browser"
+"|[1-4][0-9]{2}x[1-4][0-9]{2})\\b";
//移动设备正则匹配:手机端、平板
static Pattern phonePat = Pattern.compile(phoneReg, Pattern.CASE_INSENSITIVE);
static Pattern tablePat = Pattern.compile(tableReg, Pattern.CASE_INSENSITIVE);
/**
* 检测是否是移动设备访问
*
* @Title: check
* @Date : 2014-7-7 下午01:29:07
* @param userAgent 浏览器标识
* @return true:移动设备接入,false:pc端接入
*/
public static boolean check(String userAgent){
if(null == userAgent){
userAgent = "";
}
// 匹配
Matcher matcherPhone = phonePat.matcher(userAgent);
Matcher matcherTable = tablePat.matcher(userAgent);
if(matcherPhone.find() || matcherTable.find()){
return true;
} else {
return false;
}
}
}
调用封装类
/**
* 检查访问方式是否为移动端
* @Title: check
* @param request
* @throws IOException
*/
public boolean check(HttpServletRequest request,HttpServletResponse response) throws IOException{
boolean isFromMobile=false;
HttpSession session= request.getSession();
//检查是否已经记录访问方式(移动端或pc端)
if(null==session.getAttribute("ua")){
try{
//获取ua,用来判断是否为移动端访问
String userAgent = request.getHeader( "USER-AGENT" ).toLowerCase();
if(null == userAgent){
userAgent = "";
}
isFromMobile=CheckMobile.check(userAgent);
//判断是否为移动端访问
if(isFromMobile){
System.out.println("移动端访问");
session.setAttribute("ua","mobile");
} else {
System.out.println("pc端访问");
session.setAttribute("ua","pc");
}
}catch(Exception e){}
}else{
isFromMobile=session.getAttribute("ua").equals("mobile");
}
return isFromMobile;
}
在登录的时候,或者在action的execute中调用这个方法,不用改动原先的业务逻辑,即可判断请求的是否为移动端,然后再根据结果去做相应处理,应该就简单多了。