笔者在demo里使用的样式文件是w3.css,支持响应式,但笔者前端能力有限,并不能一次编写统一使用,于是对访问作了判断,并删减了移动端页面的部分内容。
一、判断是移动端还是PC端的请求:
package com.gcc.modules.untils;
/**
* Created by gcc on 2018/5/4.
*/
public class IsMobileUtil {
private final static String[] agent = { "Android", "iPhone", "iPod","iPad", "Windows Phone", "MQQBrowser" }; //定义移动端请求的所有可能类型
/**
* 判断User-Agent 是不是来自于手机,false则是web
* @param ua
* @return
*/
public static boolean checkAgentIsMobile(String ua) {
boolean flag = false;
if (!ua.contains("Windows NT") || (ua.contains("Windows NT") && ua.contains("compatible; MSIE 9.0;"))) {
// 排除 苹果桌面系统
if (!ua.contains("Windows NT") && !ua.contains("Macintosh")) {
for (String item : agent) {
if (ua.contains(item)) {
flag = true;
break;
}
}
}
}
return flag;
}
}
二、判断后,修改view
/**
* 首页
* @param model
* @return
*/
@RequestMapping("index")
public String index(Model model, HttpServletRequest request){
String userAgent = request.getHeader("User-Agent");
String view = "modules/frontstage/index";
if(IsMobileUtil.checkAgentIsMobile(userAgent)){
view="modules/frontstage/mobile/indexMobile";
}
String typeId = request.getParameter("typeId");
// String id = request.getParameter("id");
String pagination = request.getParameter("pagination");
String flag = request.getParameter("flag");
Map<String,Object> commentMap=indexService.getList(typeId,pagination,flag);
model.addAttribute("articleList",commentMap.get("articleList"));
model.addAttribute("pagination",commentMap.get("pagination"));
List<ArticleType> articleTypeList=articleTypeService.getTypeList();
model.addAttribute("articleTypeList",articleTypeList);
model.addAttribute("typeId",typeId);
return view;
}
注:userAgent值示例:
三、微调页面比例,结果如下:
web:
mobile: