正文

pc端移动端页面适配方案(代码片段)

xichji  xichji  2023-05-03  650

关键词：

摘自：https://www.cnblogs.com/huanzi-qch/p/12053799.html

　　前言

　　页面自适应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

移动端页面适配方案及原理(代码片段)

最近要接一个移动端的需求。类似歌曲排行榜的H5页。本人未雨绸缪，学习一波移动端适配方案。0.移动端vsPC端区别1.页面的三个视窗和缩放1.1layoutviewport和visualviewport:1.2idealviewport:1.3页面的缩放2.移动端适配2.1使用meta标签控... 查看详情

移动端页面适配方案及原理(代码片段)

rem,vw,还是...?各凭本事的移动端适配方案(代码片段)

...假期都已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，(没了解过的同学可以参见大漠老师的这两篇文章使用Flexible实现手淘H5页... 查看详情

再聊移动端页面的适配(代码片段)

再聊移动端页面的适配https://www.w3cplus.com/css/vw-for-layout.html 原文网址Flexible承载的使命Flexible到今天也有几年的历史了，解救了很多同学针对于H5页面布局的适配问题。而这套方案也相对而言是一个较为成熟的方案。... 查看详情

移动端页面适配解决方案(代码片段)

一、流体布局所谓的流体布局，就是用百分比来定义宽度，最外层容器的宽度设置为100%，就可以适配不同的屏幕，子元素按照比例来设置百分比，子元素整体的百分比之和就是100%，但是如果有子元素设置了边框，或者padding，那... 查看详情

手淘h5移动端适配方案flexible源码分析(代码片段)

移动端适配一直是一个值得探讨的问题，在业余时间我找了一些页面，查看了一些厂商对于移动端H5页面的适配方案，看到了几个典型的例子，今天就来记录一下我看到的第一个典型的例子，也是我们公司目前普通H5项目正在使... 查看详情

前端移动端适配-媒体查询适配方案(代码片段)

背景工作中难免会有写静态页面的需求，有时候移动端适配真的是做的心累，如果自己新做一个页面倒还好，整体布局会按照自己习惯来，但有时候不得不修改别人的代码，尤其是别人没适配好的代码，找... 查看详情

移动端开发适配的2中方案(代码片段)

原文地址：http://www.cnblogs.com/tugenhua0707/p/5568734.html针对移动端适配的方案~一：第一种方案是：所有的单位使用rem来适配；首先在页面上设置html的font-size的大小；如下我项目中的设置：htmlfont-size:100px;@media(min-width:320px)htmlfont-size:10... 查看详情

rem实现移动端适配(代码片段)

移动端适配web页面跑在手机端（h5页面）跨平台基于webview（）基于webkit常见适配方法pc端采用display：inline-block，让div盒子横着排移动web：采用定高，宽度百分比，flex弹性布局，meDIAQUERY媒体查询；媒体查询结合css，通过媒体类型... 查看详情

rem移动端适配方案(代码片段)

一、remvsem　　单位定义特点remfontsizeoftherootelement以根元素字体大小为基准emfontsizeoftheelement以父元素字体大小为基准二、js计算为了避免造成因为动态设置<html>元素的font-size而造成页面抖动，一般这部分代码我... 查看详情

移动端适配方案总结(代码片段)

目录一、背景介绍1.1为什么要进行移动端适配1.2移动端适配方案二、rem方案2.1什么是rem2.2怎么根据屏幕尺寸设置根元素html的font-size2.3postcss-pxtorem三、viewport方案3.1什么是viewport方案3.2postcss-px-to-viewport四、总结（如果只想看实... 查看详情

前端移动端适配-媒体查询适配方案(代码片段)

vue解决移动端和pc端适配(代码片段)

//App.vuemounted()if(this._isMobile())alert("手机端");//this.$router.replace(‘/m_index‘);elsealert("pc端");//this.$router.replace(‘/pc_index‘);,methods://App.vue_isMobile()letflag=navigator.userAg 查看详情

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

由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。1.常见的适配方案百分比+固定高度布局方案固定屏幕为理想视口宽度少许的媒体查询设置... 查看详情

移动端rem计算(代码片段)

移动端适配的总结(代码片段)

说起移动端页面也是老生常谈了，最近正好在做金融商城移动端的开发，正好梳理下这一块的知识点，提炼和总结。一什么是移动端页面首先不扯那些长篇大论，常见的移动端页面主要就三种，即H5页面、... 查看详情

转：如何在vue项目中使用vw实现移动端适配(代码片段)

https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多... 查看详情

h5-移动端适配(代码片段)

　　之前写H5页面也会遇到适配问题,是通过媒体查询一点一点调整,始终觉得很繁琐,但一直也没去想想解决的办法. 　　今天专门花了一上午的时间来去研究. 小生只是刚踏入前端路的小白,对于网上各位大佬的讲解适配理... 查看详情