笔者在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: