PC端、移动端页面适配方案

  前言

  页面自适应PC端、移动端大体上可以分为两种:

  1、在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现

  2、两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面

  本文记录在java后端进行PC端、移动端页面适配的方案

  工程结构

  想要实现后端统一适配,首先要规范好工程结构

  后端代码,跟之前差不多,响应的viewName路径,直接从业务模块开始,适配工作交给aop;两套页面,对应的业务模块,分别放在两个目录下面

  

  aop适配器

  统一的适配工作交由aop环绕切面进行,思路如下:

  1、首先切入点是所有模块的controller

  2、if判断,方法返回值为ModelAndView才需要进行处理

  3、获取浏览器UA进行判断,修改返回值ModeAndView的viewName

    PC端ua:windows nt、macintosh

    移动端ua:iphone、ipod、android

  现在的UA标识判断还过于简单,并没有完全覆盖市面上所有的PC端、移动端,这个需要自行补充

/**
 * PC端、手机端页面适配器
 */
@Aspect
@Component
@Slf4j
public class ComputerOrMobileAdapterAspect {

    /**
     * Pointcut 切入点
     * 匹配controller包下面的所有方法
     */
    @Pointcut(value = "execution(public * cn.huanzi.qch.springbootuniappmui.*.controller.*.*(..))")
    public void pointcut() {
    }

    /**
     * 环绕通知
     */
    @Around(value = "pointcut()")
    public Object around(ProceedingJoinPoint pjp) {
        //request对象
        HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.currentRequestAttributes()).getRequest();

        try {
            //获取返回值
            Object o = pjp.proceed();

            //拦截返回值为ModelAndView即可
            if("org.springframework.web.servlet.ModelAndView".equals(o.getClass().getName())){
                 /*
                PC端ua:windows nt、macintosh
                移动端ua:iphone、ipod、android
             */
                String adapter;
                String ua = request.getHeader("user-agent").toLowerCase();
                if (ua.contains("iphone") || ua.contains("ipod") || ua.contains("android")) {
                    adapter = "mobile";
                } else {
                    adapter = "computer";
                }
                log.info("PC端、手机端页面适配器:" + adapter);

                //强势修改
                ModelAndView modelAndView = (ModelAndView) o;
                String viewName = modelAndView.getViewName();
                modelAndView.setViewName(adapter + "/" + viewName);
                o = modelAndView;
            }

            return o;
        } catch (Throwable throwable) {
            //返回统一错误页面
            log.error(throwable.getMessage());
            return new ModelAndView("common/error/500");
        }
    }
}

  测试与效果

  由于我们已经规范了工程结构,HTML文件的存放路径是先分PC端、移动端两个大目录,每个大目录下面才是具体的业务模块目录,因此我们的controller中设置的viewName直接从业务模块目录开始就可以了,前面的两个大目录又aop去适配统一添加

@RestController
@RequestMapping("/index/")
public class IndexController {

    @GetMapping("index")
    public ModelAndView index(){
        return new ModelAndView("index/index");
    }

    @GetMapping("getData")
    public String getData(){
        return "获取数据接口";
    }
}

  效果演示

  可以看到,已经能根据不同的UA响应不同的HTML页面,同时,只有controller中,响应值为ModeAndView的aop适配器才会进行工作

  同时,浏览器的url是直接从业务模块开始,而不是在aop适配器修改后的路径

  后记

  在java后端进行PC端、移动端页面适配的方案就暂时记录到这,后续再进行补充

  代码开源

  代码已经开源、托管到我的GitHub、码云:

  GitHub:https://github.com/huanzi-qch/springBoot

  码云:https://gitee.com/huanzi-qch/springBoot

原文地址:https://www.cnblogs.com/huanzi-qch/p/12053799.html

时间: 12-15

PC端、移动端页面适配方案的相关文章

移动webapp页面适配方案

Viewport(视口) 概念 In web browsers, the viewport is the visible portion of the entire document. 移动端浏览器在一个通常比屏幕更宽的虚拟”窗口“(视口)中渲染页面,从而无需将所有页面都压缩进小屏幕里(那样会把很多没有针对移动端进行优化的站点打乱).用户可以通过平移和缩放来浏览页面的不同区域.大部分的移动端浏览器使用一个默认的视口宽度,这意味着视口将会用这个尺寸放大页面,使所有的元素放进这个视口,从而渲染整个页

懒人必备的移动端定宽网页适配方案

如今移动设备的分辨率纷繁复杂.以前仅仅是安卓机拥有各种各样的适配问题,如今 iPhone 也拥有了三种主流的分辨率,而未来的 iPhone 7 可能又会玩出什么新花样.如何以不变应万变,用简简单单的几行代码就能支持种类繁多的屏幕分辨率呢?今天就给大家介绍一种懒人必备的移动端定宽网页适配方法. 首先看看下面这行代码: <meta name="viewport" content="width=device-width, user-scalabel=no">

移动端Web页面适配方案

概念理解 viewport视口 visual viewport 可见视口,设备屏幕的宽度  windw.innerWidth/Height layout viewport 布局视口,DOM宽度 document.documentElement.cliendWidth/Heig ideal viewport 理想视口:目标是让把默认的layout viewport宽度设置为移动设备的屏幕宽度 visual viewport = layout viewport * scale <meta name=

移动端高清屏适配方案

结论: 用户体验要求很高的页面,如UV较高的页面,活动页这些应该以用户体验优先,应用flexiable方案 在其它页面,固定视口,不缩放,使用rem做布局适配,js添加屏幕标识以便调整字体大小(即布局使用rem,字体使用百分比),使用@2x图片,只做ios8+的1px处理 面临的问题: 在不同大小和高清的屏幕下: 如何保证 界面布局 一致性:不错乱,不变形 如何保证 字体大小 一致性:大屏显示更大,小屏显示更小或更多 如何保证 1px边框 一致性:不同的高清屏也在正常显示1px的高度大小 如何保

移动端H5页面高清多屏适配方案

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:

解惑好文:移动端H5页面高清多屏适配方案 (转)

转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makegrid.js https://segmentfault.com/a/1190000006839117 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:原先的375×667,就会变成750×1334).

基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.com/v/53039.html 原文地址:https://www.cnblogs.com/bydzhangxiaowei/p/9536126.html

移动端适配方案研究

初次接触移动端的时候,以为终于可以不用像pc那样考虑令人头疼的ie浏览器兼容问题,有强大的css3的帮助,可以随心所欲..可是后来才发现原来移动端各种层次不齐的终端更会让人抓耳挠腮,同样的页面在不同的手机上显示的完全不一样的效果,于是抛开功能,页面适配性也成了一个大的课题. 说到移动端,下面这一行代码大家一定不陌生: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-s

08-移动端开发教程-移动端适配方案

由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案. 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值:根据页面的dpr动态改变 Rem的取值: 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px(会被重置为12px) 固定设计稿的宽度开发