精华内容
下载资源
问答
  • 多终端适配
    2021-08-24 13:51:05

    emoji表情多终端适配解决方案

    参考文章:

    (1)emoji表情多终端适配解决方案

    (2)https://www.cnblogs.com/gaogaoyanjiu/p/11780653.html


    备忘一下。


    更多相关内容
  • 对比基于浏览器的响应式设计方案,因为绝大部分终端探测和渲染逻辑迁移到了服务端,所以在 NodeJS 层进行适配无疑带来了更好的性能和用户体验;另外,相对于一些所谓的「云适配」方案带来的转换质量问题,在基于前后...
  • 前端在构建页面时与PC端和移动端都要打交道,在PC端开发的时候关注的问题主要是兼容性问题,宽度高度之类的问题很自然的以浏览器宽度...要如何去实现移动端网页展示达到理想效果涉及到很因素,但主要包括三个方面:.

    前端在构建页面时与PC端和移动端都要打交道,在PC端开发的时候关注的问题主要是兼容性问题,宽度高度之类的问题很自然的以浏览器宽度做为标准,开发没啥障碍。但这一套在PC端展示的网页放到移动端的浏览器上看就会发现并不是预期的那样,比如有的可能浏览器自动缩放网页让整个内容能够在可视区域展示,但内容会缩小;有的可能会出现横向滚动条。这些都不是理想的浏览状态,理想的网页展示应该是用户进入页面不需要手动缩放就能够看清页面的内容也没有横向滚动条。要如何去实现移动端网页展示达到理想效果涉及到很多因素,但主要包括三个方面:像素(pixels)、屏幕(screen)、视口(viewport)、缩放(scale)。
    本文试图根据几篇介绍这方面的文章结合自己的理解来阐述移动端网页适配的问题。核心原理很简单,但要把这个问题想通透需要了解一些知识点。本文也是由于用到淘宝的flexible方案引发的探究,其中一些理解或许有误,还请指正。

    一、像素(pixels)

    生活中我们经常说到像素,对像素的概念就好像是一个个“点”,屏幕由不同数量的点排列构成不同的分辨率,一张图片由不同的像素点构成不同的大小,其实在这里像素被泛化了,像素还可以细分下去。同时我们经常将像素说成长度的单位,但实际上我们说1像素其实是一个1 x 1的小方块,它的面积是1。

    设备像素

    设备像素又称物理像素,是显示设备(PC、手机显示屏等)最小的物理部件,设备像素由操作系统控制来发光填色值,来让我们在视觉上看到相应的效果(如50 x 50的红色方块)。设备像素做为物理属性的存在是固定不变的,开发人员不可能通过程序控制设备像素数量上的增加减少。

    CSS像素

    前端在写网页的时候用的长度单位是px,属于CSS像素。CSS像素是抽象的,抽象意味着它没有物理属性的实体依据,它可以收缩放大。简单的理解为CSS像素点是有面积的,一个个CSS像素点铺起来盖在设备的显示屏上,其面积随着浏览器的缩放比例而同步缩放。例如在PC上的浏览器中,定义一100 x 100 的红色方块,缩放比例为100%的情况下,一个CSS像素是与一个设备像素完全重叠的。当缩放比设置为50%即缩小一半,CSS像素会等比缩放一半,那一个CSS像素的面积就只占100%情况下的四分之一了,所以视觉上看到方块变成了50x50的大小(即占了50x50的设备像素)。
    注意:此时浏览器中检查元素大小会发现红色方块的大小仍旧为100x100,只是CSS像素的面积缩小了!
    但是,到了移动终端,由于高密度显示技术出现,比如苹果的Retina显示屏中,当缩放比是100%的时候,一个CSS像素占的面积是4个设备像素的面积,即一个CSS像素横向宽度覆盖了2个设备像素的宽度。缩放比为100%时一个CSS像素占多少个设备像素是由设备像素比(dpr)决定的,dpr为2,则占两个,dpr为3则占三个。dpr的取值可以通过 window.devicePixelRatio 得到。

    二、屏幕(screen)

    屏幕的完整大小用设备像素来衡量,单位是物理属性的单位,做开发的时候也不需要太过关注,我们关注的是CSS像素。一般就可以理解为这个单位和CSS像素的大小在缩放比为100%时是一样大的。我们可以在chrome这类下载浏览器中能够通过 screen.width/height 来得到屏幕高宽的具体值。这个时候你会发现在PC上不管把浏览器窗口调整至多大,返回值总是一致的,移动端上的情况也很明朗,比如iphone6返回的值就是375。
    这里需要提到一下我们构建网页的时候关注的是CSS像素,用户看网页的时候关注的是浏览器宽度内的内容,浏览器宽度决定了用户在视觉上能够看到多少东西。所以我们开发的时候关注的也就是浏览器视觉宽度下,里面的CSS像素的数量多少。这个浏览器尺寸内的CSS像素多少可以通过 window.innerWidth/Height 来获取。由于CSS像素会缩放,所以同一个浏览器宽度下这个取值是可能不同的。

    三、视口(viewport)

    我们进行网页布局的时候设置html元素宽度为100%,这个100%是依据什么设置的呢?浏览器窗口用CSS像素衡量的宽度(window.innerWidth)还是别的呢?我们可以发现在PC端的浏览器上设置100%,html元素的px宽度就等于浏览器宽度;而在移动端不管是在什么设备上,html设置100%,基本上宽度都等于980px。

    布局视口

    所以这就引出了布局视口的概念。宽度设置是根据布局视口来算的,只是PC端布局视口就等于浏览器宽度,而移动终端由于屏幕宽度较窄,为了显示在PC端网页显示的网页能在移动端基本能看,所以浏览器厂商一般将其设为980px然后进行缩放,让网页在窄屏幕上能够全部显示。布局视口尺寸可以通过document.documentElement.clientWidth/Height 获取。虽然 document.documentElement就是html元素,但是取值却不是取的html元素的宽度。
    同时我们做的媒体查询中判断的max-width也是判断布局视口的宽度

    @media all and (max-width: 400px) {
    	.box{
    		width: 300px;
    	}
    }
    

    视觉视口

    重要!重要!重要!
    视觉视口就是用户能够看到的窗口,单纯的用视觉去描述它就是浏览器屏幕的大小。
    用CSS像素去描述就是:视觉视口的大小就是屏幕大小范围内CSS像素堆积的总面积,不管CSS像素是否缩放。

    移动端布局需要达到的效果

    我们希望一个网页放到移动端的浏览器中不会影响视觉效果,然后又利于开发。所以最好的方法就是设置布局视口的宽度正好等于屏幕的大小(这里的大小是指视觉上的而不是CSS像素单位上的,意思就是比如375的屏幕宽度下,将布局视口设置为屏幕宽度,也就是device-width,CSS像素横向有375个单位,设置375px即可满屏;如果将布局视口设置为设备宽度的两倍即750px,面积增大4倍,同时设置initial-scale为0.5,面积又缩小四分之一正好又是屏幕的大小。),这样的效果就是设置100%的时候保证就是屏幕宽度。(说的比较啰嗦)
    如何设置布局视口呢?

    <!--设置布局视口等于device-width-->
    <meta  name="viewport"   content="width=device-width">
    
    <!-- 只设置缩放值也能将布局视口宽度设置为屏幕宽度,设置为0.5时由于CSS像素缩放了0.5,填到屏幕中的CSS像素数量正好是屏幕宽度 -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    
    <!-- 这是兼容写法 -->
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,user-scalable=no">
    

    四、移动适配方案

    移动多屏幕适配是为了保证各个屏幕上的布局视口都是等于屏幕(视觉上的)宽度。所以就有几种方案可以做到。

    第一种方案

    第一种方案是直接设置width=device-width,这样能够保证宽度一致,但考虑到苹果的Retina屏幕设计师出设计稿的时候都是放大了一倍设计稿,比如640px(基于iphone5)、750px(基于iphone6)。如果我们拿到的设计稿是750px宽,在设置缩放比为100%、布局视口等于屏幕宽度的情况下,我们拿到的设计稿宽度是大了一倍的,(网页中设置375px沾满屏幕,而设计稿切出的图是750px),所以在转换成网页的时候设置宽度需要将设计图的宽度除以2来,如果考虑到iphone6 plus的dpr为3,要保证在6 plus下图片还是高清,就需要将750px的设计稿再放大1.5倍,用@3倍图切出来。以上可以知道这种方案不需要动态的去根据屏幕dpr不同来设置meta标签内容,直接一句话搞定,然后需要调整的地方通过媒体查询来做。

    第二种方案

    第二种方案是固定设置布局视口的宽度,比如设置为640,或750,原理待研究。

    第三种方案

    第三种方案就是淘宝的flexible了。这个解决方案只解决苹果设备上的dpr为2和3的情况,不考虑安卓设备也不考虑pad。做的事情也很简单,就是动态设置meta标签的内容,和第一种方案不同的是没有设置为width=device-width,而是通过设置initial-scale来缩放布局视口,dpr为1,缩放为1;dpr为2,缩放0.5;dpr为3,缩放0.3333;通过这种方法使得布局视口在视觉上还是屏幕大小但CSS像素数量却增加了4倍/9倍。而这样的直接好处就是比如iphone6的视觉视口横向有了750个CSS像素点,和设计图保持一致了,同时CSS像素缩放0.5解决了经典的1px像素问题。
    该方案的核心原理是通过window.navigator.appVersion判断是否是iphone,其他的比如ipad、Android直接设置dpr为1,然后通过 1/ dpr 得到缩放值。

    var isAndroid = win.navigator.appVersion.match(/android/gi);
    /* 判断iphone ipad不考虑*/
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
      // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
        dpr = 3;
      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
        dpr = 2;
      } else {
        dpr = 1;
      }
    } else {
      // 其他设备下,仍旧使用1倍的方案
      dpr = 1;
    }
    /*缩放值*/
    scale = 1 / dpr;
    

    这个解决方案中用的布局单位是rem而不是px,这也是为了等比例缩放的问题。rem单位代表的是根节点也就是html的fontSize的值,html默认为16px,所以默认1rem = 16px。既然开发的设计标注图是750px的,将html设为75px就很方便了,10rem = 750px。
    然后放到所有屏幕情况下:

    function refreshRem(){
      /*获取布局视口宽度,也可用document.documentElement.clientWidth*/
      var width = document.documentElement.getBoundingClientRect().width;
    
      /* 判断屏幕宽度,如果dpr为1且宽度>540 则恒定为540px,dpr为2如果宽度>1080则恒定为1080px*/
    
      if (width / dpr > 540) {
        width = 540 * dpr;
      }
    
      /*将布局视口宽度除以10得到html字体大小*/
      var rem = width / 10;
      document.documentElement.style.fontSize = rem + 'px';
    }
    

    比如iphone5的设备下布局视口是640,所以html的字体大小会设置为64px,而在开发的时候设置的单位为rem,这个时候rem自动根据64px转换,就实现了等比缩放。写rem的时候可以通过CSSREM插件来写,只是后期维护比较麻烦。
    字体不用rem而采用px是因为我们希望一个文本字号不因为Retina显示屏的原因而缩放变小。然后在大屏上也不会放大而能够看到更多的文本。但是不同的dpr下又的确是要分别设置字号的。这个解决方案会在html元素上设置data-dpr属性,然后通过该属性判断来设置字体大小。

    div.box{
      font-size: 12px;
    }
    [data-dpr="2"] div{
      font-size: 24px;
    }
    [data-dpr="3"] div{
      font-size: 36px;
    }
    

    如果觉得麻烦可以用sass来写样式,用@mixin。
    设计稿设计方面要求为750px,如果设计师有做标注就做在这个稿子上,没有标注的话我们开发的时候就依据这个设计稿来量间距之类的。同时将这个稿子放大1.5倍来得到1125px的设计稿,切图用这份设计稿保证dpr为3的屏幕图片显示足够清晰。在iphone6的屏幕下开发然后再向上向下适配。字体也希望不要出现奇数值,我们都知道为什么。

    总结

    移动端适配的原理很简单,各个项目在用的时候也能去选一个适合的方案。在vw和vh单位兼容性不够的时候,要做到设置的单位等比缩放只能用rem。另外现在是不是有更好的适配方案不太清楚,本文主要是对现在我所知道的方案做一个总结,望指正。

    附加部分:… …

    HTML5新增常用新标签:

    header: 定义文档的页眉
    nav: 定义导航链接的部分
    footer: 定义文档或节的页脚
    article: 规定独立的自包含内容
    section: 定义文档中的节
    aside: 定义其所处内容之外的内容
    audio:音频
    video:视频

    HTML5新增常用新属性:

    placeholder: 占位符提供可描述输入字段预期值的提示信息
    autofocus: 规定当页面加载时 input 元素应该自动获得焦点
    multiple: 选择文件多文件上传
    autocomplete: 规定表单是否应该启用自动完成功能
    required: 必填项
    accesskey: 规定激活( 点)元素的快捷键

    新增常用type属性值:

    email: 输入邮箱格式
    tel: 输入手机号码格式
    url: 输入url格式
    number: 输入数字格式
    search: 搜索框
    range: 自由拖动滑块
    time: 时间
    date: 年 /月/日
    datetime: 日期
    month: 年/月
    week: 年/周

    如何处理HTML5新标签的浏览器兼容问题?

    1 . document.createElement()方法即可让浏览器识别新标签,浏览器支持新标签后,还可以为新标签添加CSS样式。

    2 . 使用Google的html5shiv包

     在<head>中调用以下代码:
     <!--[if lt IE 9]>  
        <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>  
     <![endif]--> 	
    

    3 . 使用 kill IE6

    在</body>之前调用以下代码:
    <!--if lte IE 6]>  
        <script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>   
    <![endif]-->  
    
    展开全文
  • jwplaye,自定义视频图片封面,全浏览器兼容、响应式多终端适配视频播放器
  • JEECG BOOT APP移动解决方案,采用uniapp框架,一份代码解决多终端适配(APP,小程序,H5)。 当前最新版本:1.0.0-beta(发布日期:2020-06-08) 项目介绍: JEECG靴子UNIAPP 实现了与JeecgBoot平台完美对接的...
  • 终端适配平台国产化替代解决方案
  • 一个APP如何适配多个Android终端

    千次阅读 多人点赞 2020-10-13 14:01:28
    简介:传统的多终端适配方案,是为大尺寸Pad开发一个特定的HD版本。但是目前支持Android系统的设备类型越来越丰富,不同类型的设备尺寸也越来越多样化,特定的HD版本并不能适配所有设备尺寸。App如何在这么尺寸的...
    简介:传统的多终端适配方案,是为大尺寸Pad开发一个特定的HD版本。但是目前支持Android系统的设备类型越来越丰富,不同类型的设备尺寸也越来越多样化,特定的HD版本并不能适配所有设备尺寸。App如何在这么多尺寸的设备上,为用户提供较为一致的浏览体验?阿里巴巴文娱技术 叮东 将分享优酷APP响应式的技术实现和落地方法,希望对所有APP的开发同学有所启发。

    image.png

    Android响应式方案

    640.gif

    响应式的核心是拉通多终端的适配规则,开发一套界面,一个APP兼容多尺寸终端设备的显示,能够根据用户的行为以及设备的环境(屏幕尺寸、屏幕方向、是否分屏等)进行相应的页面布局以及容器尺寸的调整,为用户提供更加舒适的界面和更好的用户体验。

    image.png

    1 响应式SDK

    App的每个页面支持响应式,开发成本是很高的。

    响应式SDK,就是为了解决App在不同尺寸设备下的适配问题,把设备的屏幕信息、容器布局规则(列数、尺寸)、业务数据二次加工等行为进行统一管理,以适应新的屏幕尺寸。

    image.png

    2 加载流程设计

    image.png

    通用的页面加载流程,通常都是从数据返回开始,数据解析完成后,进行页面布局渲染以及容器布局渲染。响应式在通用加载流程的基础上,加入了响应式状态变化通知、响应式数据剪裁、响应式页面布局、响应式容器布局等流程。

    具体加载的流程分为两种情况:

    • 用户请求数据
    • 屏幕尺寸发生变化

    3 架构设计

    优酷各个业务开发团队,使用了统一的业务架构,我们在统一架构的基础上进行响应式适配,提供了响应式SDK,拉通各个业务方不同页面的适配规则,确保了适配效果的一致性,同时提供了基础的响应式控件,降低业务方的接入成本,那么响应式架构具体是怎么实现的呢?

    image.png

    从结构上看,响应式由优酷统一架构、响应式SDK、响应式页面布局、响应式容器布局四部分相互配合完成。在这些基础上支撑了首页、频道页、播放页、会员页、搜索、个人中心等众多的业务场景。

    优酷统一架构和响应式SDK,提供响应式架构能力。

    响应式页面布局、响应式容器布局,提供响应式参考实现。

    4 数据二次加工

    响应式并不是简单的将现有Phone端的业务数据,投放到Pad、折叠屏上,单纯的进行UI页面适配。想要在不同尺寸设备上都能获得良好的适配效果,需要对Phone端的业务数据二次加工,进行数据过滤、数据映射、数据合并、数据补全等操作,才能更好的适配Pad和折叠屏。

    响应式SDK只是负责把数据二次加工的协议规则定下来,具体的数据二次加工逻辑需要业务方自己实现。优酷的统一架构提供了数据切面的能力,在切面上增加数据二次处理的逻辑,实现了统一的数据处理。

    数据过滤

    大尺寸设备上,总会遇到一些复杂的,适配不了的,也不重要的组件,这部分组件可以根据具体情况过滤处理,例如:下图中的weex组件,在Pad上直接过滤掉,不显示。

    image.png

    数据映射

    存在一些带交互的复杂组件或者Pad上适配效果较差的组件,可以直接映射成其他已适配的组件。例如:下图中的带视频预览的预约组件映射成普通的预约组件。

    image.png

    数据合并

    相邻的两个组件,其中有一个组件无法很好的适配大尺寸Pad,可以尝试将其数据合并到其他组件内。

    例如:下图中第1个组件宽度铺满页面宽度,在大尺寸上无法适配,第2个组件通过修改列数、尺寸就可以适配。Pad竖屏下,将第一个组件插入到第二个组件的首位,进行数据合并,按照第二个组件的进行适配,显示为3列2行,达到很好的适配效果。

    image.png

    数据补全

    在横竖屏切换过程中,部分组件会遇到组件的数量,无法铺满屏幕的宽度,导致出现留白的问题。

    例如:把手机上的6条数据,直接投放到Pad横屏下,就会出现下图的留白问题:

    image.png

    为了解决这一类数据缺失的问题,我们选择的解法是服务端多下发一部分业务数据,客户端根据具体的屏幕尺寸,动态调整显示的个数,确保显示效果。

    例如:下图中手机上显示2列3行,共6条数据,到了Pad竖屏上显示3列2行,共6条数据,到了Pad横屏上会补全2条数据,显示4列2行,共8条数据。

    image.png

    5 页面响应式

    响应式状态

    响应式状态是页面响应式最基础也是最重要的一个能力,像横竖屏切换、分屏模式、折叠屏折叠打开,都会导致页面的宽高发生变化,产生不同的响应式状态,页面内的内容会进行重新布局以及组件尺寸调整,以适应页面尺寸的变化,铺满屏幕,达到更好的显示效果。

    横竖屏切换:

    image.png

    分屏模式:

    image.png

    折叠屏:

    image.png

    响应式状态管理

    响应式状态与Activity页面的生命周期保持一致,不同页面响应式状态可能不一致。响应式SDK提供了ResponsiveActivity、ResponsiveFragment两个基类,ResponsiveActivity统一封装了响应式的状态变化。当屏幕尺寸发生改变时,ResponsiveActivity和ResponsiveFragment会回调onResponsiveLayout方法,业务方接到onResponsiveLayout的通知,主动遍历当前页面内的所有容器,根据响应式状态,动态修改容器的布局、布局列数、尺寸等,重新渲染当前页面。

    由于优酷使用了统一框架,根据响应式状态动态修改页面内所有容器的逻辑,统一在框架内部处理,避免了业务方的修改,降低了接入成本。

    /**  
     *响应式状态回调  
     *  
     * @param newConfig                   配置信息  
     * @param responsiveLayoutState       当前响应式状态  
     * @param responsiveLayoutStateChanged响应式状态是否已发生改变 
     */
    protectedvoidonResponsiveLayout(ConfigurationnewConfig,intresponsiveLayoutState,booleanresponsiveLayoutStateChanged) {
    
    }

    获取响应式状态

    响应式状态的定义,需要有一个具体计算的规则,在所有尺寸的设备上都按照统一的规则进行状态区分,那么不同的响应式状态是如何区分的呢?

    首先定义标准手机屏幕的物理宽度为400dp(经过大量手机设备调试采样之后获得的手机标准物理尺寸经验值),那么响应式状态的变化,由两个比例阈值决定,一个是页面物理宽度与标准物理宽度的比例阈值1.67倍(物理宽度 = 像素宽度÷屏幕密度),另一个是页面高度与页面宽度的比例阈值1.25倍。那么这两个比例阈值是如何得来的呢?

    (1)1.67倍是怎么来的呢?
    image.png

    在播放页的适配过程中,需要适配左右分栏的显示,我们认为左侧播放器的宽度是标准物理宽度,那么整个页面的宽度就是标准物理宽度的1.67倍,这样左侧播放器有足够的空间保障视频播放的体验,右侧的也有足够的空间保障评论的显示效果。

    (2)1.25倍是怎么来的呢?

    image.png

    上图列举了竖屏华为Pad上,页面高度是页面宽度的1.6倍,播放器下方的视频内容操作区,显示的视频内容是足够多的。如果页面高度小于页面宽度的1.25倍,就会挤压视频内容操作区的高度,导致显示出来的视频内容过少,影响用户体验。

    当页面物理宽度大于标准物理宽度的1.67倍,同时页面高度小于等于页面宽度的1.25倍,即为大屏状态,其他情况则为小屏状态。

    不同的响应式状态

    目前支持了小屏布局和大屏布局两种状态。

    (1)小屏布局状态

    折叠屏折叠、折叠屏分屏、Pad竖屏:

    image.png
    image.png

    image.png

    (2)大屏布局状态

    折叠屏打开、Pad横屏:

    image.png

    6 容器响应式

    容器响应式,主要解决在页面尺寸发生变化时,动态调整容器布局的列数以及坑位的尺寸,优酷统一架构提供了常用的响应式容器布局:轮播布局、网格布局、横划布局、瀑布流布局。业务方可以快速实现响应式的效果。

    容器适配列数、尺寸的效果

    image.png

    列数适配

    同一个容器,在不同的尺寸页面下,会根据页面的物理宽度动态适配,显示为不同的列数。

    网络布局、横划布局、瀑布流布局都采用这一套列数适配的规则:

    响应式适配后的列数 = 当前屏幕宽度÷(标准屏幕宽度÷标准屏幕宽度下的组件列数 )

    响应式适配后的列数,并不能解决Pad横屏上部分组件列数过多,显示过密的问题,为了解决这类问题,提供了列数二次适配的能力。

    如下图所示,左侧是直接根据规则算出来的Pad横屏下的列数8列,过于密集,显示效果不好,右侧是列数二次调整后,显示为6列。

    image.png

    适配效果:
    image.png

    控件尺寸适配

    由于不同屏幕尺寸下,容器内部会动态调整显示不同的列数,导致控件的尺寸也会发生变化,那么如何适配控件尺寸的动态变化呢,响应式基础控件能够很好的解决这一类问题。

    响应式基础控件,内部封装了响应式容器尺寸的适配规则,通过ratioType来定义不同适配规则下控件宽高的计算逻辑,业务方只需要修改最外层的布局控件,通过设置ratioType就可以快速搞定宽高适配,降低业务方的适配成本。

    提供了ResponsiveConstraintLayout、ResponsiveFrameLayout、ResponsiveLinearLayout、ResponsiveRelativeLayout、ResponsiveRecyclerView等基础响应式容器。

    ratioType的宽度计算规则示例(页面左右边距和横间距不变):

    响应式控件宽度 = (当前页面的宽度 - 左右边距 - 控件之间的间距总和)÷响应式适配后的列数

    总结

    随着折叠屏技术的进一步发展,折叠屏手机会越来越普及,越来越多的App需要适配到折叠屏手机上,响应式可以很好的解决折叠屏的适配问题。希望未来更多的APP能够适配响应式,做到一套代码,运行到不同尺寸的设备上,节约开发成本,提升开发效能,为不同尺寸的设备带来与手机版本一致的用户体验。

    原文链接:https://developer.aliyun.com/article/775558?

    版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
    展开全文
  • JEECG BOOT APP 移动解决方案,采用uniapp框架,一份代码多终端适配,同时支持APP、小程序、H5!实现了与JeecgBoot平台完美对接的移动解决方案!目前已经实现登录、用户信息、通讯录、公告、移动首页、九宫格等基础...

    项目介绍

    JEECG BOOT APP 移动解决方案,采用uniapp框架,一份代码多终端适配,同时支持APP、小程序、H5!实现了与JeecgBoot平台完美对接的移动解决方案!目前已经实现登录、用户信息、通讯录、公告、移动首页、九宫格等基础功能。

    当前版本:v2.0 | 2021-07-05

    源码下载

    技术文档

    升级日志

    无缝对接JeecgBoot,移动首页UI美化,新增通讯录、公告、地理定位等功能;新增日历、时间、下拉等组件。

    新功能升级
    • 登录页面样式修改
    • 登录页面新增手机号登录
    • 个人页面新增扫码和定位
    • 首页新增通讯录和系统公告
    • 新增组件(日历、时间选择、下拉选择、上传、列表滚动)

    功能模块

    ├─框架实现
    │  ├─APP开发框架搭建
    │  ├─登录对接
    │  ├─TOKEN接口机制
    │  ├─热更新\覆盖更新
    ├─基础功能
    │  ├─菜单栏目
    │  ├─登录页面
    │  ├─移动首页
    │  ├─个人信息设置
    ├─消息中心
    │  ├─通讯录
    │  ├─系统公告
    │  ├─消息推送
    ├─示例代码
    │  ├─调用摄像头扫码(扫码)
    │  ├─获取地理位置(定位)
    ├─新增组件
    │  ├─页面滚动
    │  ├─日历
    │  ├─时间选择
    │  ├─下拉选择
    │  ├─图片上传
    ├─。。。
    

    效果预览

    展开全文
  • 在android项目目录下有两个存放资源文件的文件夹assets和res 我的理解是:如果平台的DPI和默认的DPI不同的时候,从assets文件夹中获取到的图片是不会放缩的,测试通过。(比较粗浅) res文件夹下主要有四个文件夹...
  • 使Flexible实现淘H5页的终端适那么趁此Amfe阿线前端团队双11技术连载之际,个实战案例来告诉家,淘的H5页是如何实现多终端适配的,希望这篇章对家在Mo
  • 本次更新除了一些常规的优化和bug修复外,特别针对多终端适配和表格布局进行了优化,下面来看看这两个更新内容。 多终端适配 我们在设计表单的时候,有时可能需要在不同的设配上(pc、pad、mobile)展示不同的效果,...
  • 推荐三篇文章: 1.来自手淘团队的开源技术flexibal.js  github地址:https://github.com/isHelenaChan/flexible ...  《使用Flexible实现手淘H5页面的终端适配》:http://www.w3cplus.com/m...
  • 基于MAS的移动终端适配技术的应用,陈 栋,李学明,本文通过一个web页面的移动终端适配系统项目,描述了一种适用于企业集团用户的,由各个功能插件及管理模块组成的移动终端适配技术
  • 行业分类-设备装置-具有终端适配功能的流媒体系统.zip
  • /*使用方式:在页面顶部引入flexible.js,将页面视觉设计稿切成10份,例如640px宽的视觉设计稿...对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端适配? 那么趁此Am...
  • 行业分类-设备装置-具有流媒体终端适配功能的移动终端设备.zip
  • 系统的介绍了怎么适配程序,不同类型的手机,不同大小的手机。用一套代码就搞定。
  • 初使用uni-app,适配多端,踩坑及经验合集 一、微信小程序不支持axios 1)安装 使用小程序适配器 axios-miniprogram-adapter,使用npm安装 npm install axios-miniprogram-adapter -S 2)使用 在照常使用axios基础...
  • 关于终端适配问题

    千次阅读 2019-06-09 19:31:38
    ##移动端适配 移动端主要是利用媒体查询和弹性布局 在页面中得元素大小这一块主要是利用了rem布局 rem布局是通过设置html的字体大小来改变页面中的元素大小,为了提高开发效率建议使用less或者sass插件。 页面中的...
  • 移动终端适配

    2019-01-24 18:51:39
    使用Flexible实现手淘H5页面的终端适配
  • 教学课件 课件PPT 教育资源 教材 讲义
  • 手机电视业务的适配终端.pdf手机电视业务的适配终端.pdf手机电视业务的适配终端.pdf手机电视业务的适配终端.pdf手机电视业务的适配终端.pdf
  • 行业分类-设备装置-OSD屏显的软件适配方法、系统及多媒体终端.zip
  • 教育科研-学习工具-OSD屏显的软件适配方法、系统及多媒体终端.zip
  • 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟... 那么趁此 Amfe阿里无线前端团队双11技术连载 之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobil
  • 终端是网络的神经末梢、是数字化业务的生长细胞,它处在网络安全防御的第一线。 针对不同行业用户需求,以及种类繁多的终端架构,亚信安全推出“大终端”一体化安全解决方案,并通过强大的“泛载”与“泛在”能力,...
  • 1.概念 1.1.屏幕指标 物理上,一个屏幕是有尺寸、像素分辨率和密度指标的。... 对于高屏幕像素密度,就会存在1个css像素对应个物理像素的情况。因此,将物理像素/css像素的比值称为设备像素比(dpr)。...
  • Nginx适配PC或移动设备Nginx通过内置变量$http_user_agent,可以获取到请求客户端的userAgent,就可以用户目前处于移动端还是PC端
  • 移动端浏览器种类繁多,还有两大系统,Android和IOS系统的兼容性,都是比较复杂的问题,没有这方面的知识储备和积累,导致这次的任务三次返工,也增大了很无谓的工作量,最幸运的是刷到朋友圈,朋友刚刚分享的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,009
精华内容 14,803
关键字:

多终端适配

友情链接: dianziqin.zip