CN113253959B - 一种适配不同大屏分辨率的前端投屏方法 - Google Patents

一种适配不同大屏分辨率的前端投屏方法 Download PDF

Info

Publication number
CN113253959B
CN113253959B CN202110574809.5A CN202110574809A CN113253959B CN 113253959 B CN113253959 B CN 113253959B CN 202110574809 A CN202110574809 A CN 202110574809A CN 113253959 B CN113253959 B CN 113253959B
Authority
CN
China
Prior art keywords
height
width
scaling
actual
screen
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202110574809.5A
Other languages
English (en)
Other versions
CN113253959A (zh
Inventor
刘明鑫
赵胜男
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Jinan Langchao Zhitou Intelligent Technology Co ltd
Original Assignee
Jinan Langchao Zhitou Intelligent Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Jinan Langchao Zhitou Intelligent Technology Co ltd filed Critical Jinan Langchao Zhitou Intelligent Technology Co ltd
Priority to CN202110574809.5A priority Critical patent/CN113253959B/zh
Publication of CN113253959A publication Critical patent/CN113253959A/zh
Application granted granted Critical
Publication of CN113253959B publication Critical patent/CN113253959B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G06F3/1454—Digital output to display device ; Cooperation and interconnection of the display device with other functional units involving copying of the display data of a local workstation or window to a remote workstation or window so that an actual copy of the data is displayed simultaneously on two or more displays, e.g. teledisplay
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Image Generation (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种适配不同大屏分辨率的前端投屏方法，属于前端大屏开发领域，本发明要解决的技术问题为如何在开发时按照效果图进行1:1的开发，且无需考虑不同的显示器的分辨率，适应多变的大屏开发需求，技术方案为：该方法是通过定义配置文件，并在配置文件中配置分辨率，经统一处理函数handleInitAuto()进行等比放缩操作后，投放到显示器进行高度还原；具体步骤如下：S1、加载配置文件中预定义的高度和宽度；S2、通过统一处理函数handleInitAuto()获取实际屏幕的宽度和高度；S3、通过统一处理函数handleInitAuto()计算出预定义宽度和实际宽度的比值wScale以及预定义高度和实际高度比值hScale；S4、通过统一处理函数handleInitAuto()动态的对实际宽高进行等比放缩操作；S5、将放缩完成的效果投放到实际的屏幕中。

Description

一种适配不同大屏分辨率的前端投屏方法
技术领域
本发明涉及前端大屏开发技术领域，具体地说是一种适配不同大屏分辨率的前端投屏方法。
背景技术
随着WEB前端技术这几年飞速的发展以及浏览器对页面渲染的效率越来越快，用户群体对数据可视化的需求越来越强烈，大屏可视化的项目越来越多，同时随着用户硬件设备的快速迭代，大屏设备做的越来越大，分辨率越来越高，对前端呈现的效果要求也越来越高；并且定制化的大屏可视化项目和通用性大屏可视化的项目也是越来越多，怎么把一个大屏可视化的项目部署到不同的设备场景中是前端开发越来越需要解决的问题，使用自适应进行开发的话，显然效果不太好，没法做到1:1的效果还原，只能适用于还原度要求不高的项目，对这种按实际屏幕设计效果图的项目还原度并不友好。
在大屏可视化开发方面，无法避开的一个焦点就是显示器的分辨率，例如中台业务系统开发可以使用响应式布局(Responsive Web Design),或者成熟的响应式布局框架，例如Bootstrap框架。由于大屏开发定制化要求较高，像响应式布局中的媒体查询(MediaQuery)和流布局(Fluid Grids)，并不能很好的适配于大屏开发。大屏开发最主要的关注点是高度还原设计图，侧重于视觉性和交互性，从多维度和多角度的展示复杂数据。
因此如何在开发时按照效果图进行1:1的开发，且无需考虑不同的显示器的分辨率，适应多变的大屏开发需求是目前亟待解决的技术问题。
发明内容
本发明的技术任务是提供一种适配不同大屏分辨率的前端投屏方法，来解决如何在开发时按照效果图进行1:1的开发，且无需考虑不同的显示器的分辨率，适应多变的大屏开发需求的问题。
本发明的技术任务是按以下方式实现的，一种适配不同大屏分辨率的前端投屏方法，该方法是通过定义配置文件，并在配置文件中配置分辨率，经统一处理函数handleInitAuto()进行等比放缩操作后，投放到显示器进行高度还原；具体步骤如下：
S1、加载配置文件中预定义的高度和宽度；
S2、通过统一处理函数handleInitAuto()获取实际屏幕的宽度和高度；
S3、通过统一处理函数handleInitAuto()计算出预定义宽度和实际宽度的比值wScale以及预定义高度和实际高度比值hScale；
S4、通过统一处理函数handleInitAuto()动态的对实际宽高进行等比放缩操作；
S5、将放缩完成的效果投放到实际的屏幕中。
作为优选，所述步骤S1中加载配置文件中预定义的高度和宽度具体如下：
S101、通过Axios.js动态的获取配置文件中配置信息，Axios.js是目前开发中最常用的接口请求库，异步的加载配置文件中信息，防止阻断主线程的渲染；
S102、在配置文件中进行对象的定义，对象的属性为width和height，对象的属性值默认为像素，同时可以定义其他的一些属性作为扩展属性。
更优地，所述配置文件的定义使用JSON格式，因为JSON格式对数据的结构进行描述友好清晰。
作为优选，所述步骤S4中通过统一处理函数handleInitAuto()动态的对实际宽高进行等比放缩操作具体如下：
S401、动态获取预定义宽度值和高度值；
S402、动态设置容器的宽度值和高度值；
S403、使用Jquery或JavaScript改变容器的宽度值和高度值。
更优地，所述容器设置在Body里面，容器作为渲染的入口，默认有自己的宽高；容器的宽高为效果图的宽高或其他值，同时为容器配置的样式为main；
容器内包含一层子容器，子容器的宽高与容器的宽高保持一致，这样做的目的是为了后面handleInitAuto()函数的操作的灵活性。
作为优选，所述统一处理函数handleInitAuto()接受的参数为对象形式，对象有五个属性，分别为预定义宽度(cWidth)、预定义高度(cHeight)、容器样式(main)、子容器样式(mainBox)和放缩的方式(stretch)；
其中，放缩的方式(stretch)用于确定是按哪种方式进行放缩操作，默认是一致性放缩操作，这种放缩方式简洁明了。
更优地，所述统一处理函数handleInitAuto()包括强制放缩处理函数changeSizeUniform()和非强制放缩处理函数changeSizeFill()。
更优地，所述强制放缩处理函数changeSizeUniform()是根据预定宽高和实际宽高比值直接进行放缩，不考虑实际屏幕宽高和预定义宽高谁大谁小的问题，依赖于CSS3中的transform的scale属性；具体如下：
(1)、使用Jquery获取实际屏幕的宽度rWidth和高度rHeight，计算出宽度放缩比以及高度放缩比：
宽度放缩比的计算公式为：scaleW＝rWidth/cWidth；
高度放缩比的计算公式为：scaleH＝rHeight/cHeight；
(2)、把容器的高度设置为实际屏幕的宽高度；
(3)、把子容器按照scaleW和scaleH进行放缩，一致性处理函数完成处理操作。
其中，CSS3是CSS(层叠样式表)技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也使跨浏览器开发变得复杂。
更优地，所述非强制放缩处理函数changeSizeFill()具体处理步骤如下：
(1)、获取预定义的宽高比值cRate以及当前屏幕实际的宽高比值rate,并比较cRate和rate之间的大小：
①、当rate大于cRate时，则说明需要按实际高度和预定义高度比值进行放缩，即放缩比例scale值为实际高度除以预定义的高度；
②、当rate不大于cRate时，则说明需要按实际宽度和预定义宽度的比值尽心放缩，即放缩比例scale值为实际的宽度除以预定义的宽度；
(2)、使用预定义的高度乘以放缩比例scale值作为容器的高度；
(3)、使用预定义的宽度乘以放缩比例scale值作为容器的宽度；
(4)、使用实际高度减去预定义高度的除以2作为容器的top距离；
(5)、把子容器使用transform的scale属性按照计算出来的放缩比例scale值进行放缩,放缩完成后进行投屏。
一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序，所述计算机程序可被处理器执行以实现如上述的适配不同大屏分辨率的前端投屏方法。
本发明的适配不同大屏分辨率的前端投屏方法具有以下优点：
(一)本发明通过读取配置文件的中预定义投屏显示器的宽高，当前端工程打完包之后，只需要改变预定义宽高，来进行适配不同分辨率屏幕，有效避免了前端开发人员投入大量精力进行不同的分辨率适配工作，使开发人员只需要按照UI设计人提供的效果图进行1:1还原开发，可以更好的把精力用于交互性和还原性的开发上；
(二)本发明可以适配大屏项目对于不同分辨率显示器的投屏需求，当需要投屏到与设计稿不一致的屏幕上时，只需要动态改变把配置文件中的宽高为需要投屏的显示器的宽高即可，无需进行其他的操作，极大简化了大屏开发时开发人员对不同分辨率需要适配的繁琐步骤，提高了开发的效率；
(三)本发明只需要按照设计稿进行1:1开发，开发完成之后经过统一处理函数中的强制放缩函数和非强制放缩函数处理后投屏到不同的显示器，可以实现对不同屏幕分辨率的快速适配，高度还原，不需要考虑不同的显示器的分辨率，能够很好的适配多变的大屏开发需求；
(四)本发明通过定义配置文件、定义统一处理函数进行大屏的等比放缩操作，使得投屏之后页面对高保真图进行高度还原，从而能够适配不同的大屏分辨率；
(五)开发人员只需要按照UI设计人提供的效果图进行1:1还原开发即可，减少前端开发人员投入到不同的分辨率适配工作中的工总量；
(六)本发明通过stretch属性来确定是按那种方式进行放缩操作，默认是一致性放缩操作，这种放缩方式简洁明了；
(七)本发明配置文件的定义使用JSON格式，因为JSON格式对数据的结构进行描述友好清晰；
(八)为了便于统一处理，需要在Body里面设置容器，容器作为渲染的入口，容器默认有自己的宽高，这个宽高可以为效果图的宽高，也可以为其他值，同时为容器的配置样式main；同时容器内部还包含一层子容器，同时子容器的宽高同容器保持一致，这样做的目的是为了后面handleInitAuto()函数的操作的灵活性。
故本发明具有通用范围广、实现方式简单明了、还原度高、速度快等特点。
附图说明
下面结合附图对本发明进一步说明。
附图1为适配不同大屏分辨率的前端投屏方法的流程框图。
具体实施方式
参照说明书附图和具体实施例对本发明的一种适配不同大屏分辨率的前端投屏方法作以下详细地说明。
实施例1：
如附图1所示，本发明的适配不同大屏分辨率的前端投屏方法，该方法是通过定义配置文件，并在配置文件中配置分辨率，经统一处理函数handleInitAuto()进行等比放缩操作后，投放到显示器进行高度还原；具体步骤如下：
S1、加载配置文件中预定义的高度和宽度；
S2、通过统一处理函数handleInitAuto()获取实际屏幕的宽度和高度；
S3、通过统一处理函数handleInitAuto()计算出预定义宽度和实际宽度的比值wScale以及预定义高度和实际高度比值hScale；
S4、通过统一处理函数handleInitAuto()动态的对实际宽高进行等比放缩操作；
S5、将放缩完成的效果投放到实际的屏幕中。
本实施例中的步骤S1中加载配置文件中预定义的高度和宽度具体如下：
S101、通过Axios.js动态的获取配置文件中配置信息，Axios.js是目前开发中最常用的接口请求库，异步的加载配置文件中信息，防止阻断主线程的渲染；
S102、在配置文件中进行对象的定义，对象的属性为width和height，对象的属性值默认为像素，同时可以定义其他的一些属性作为扩展属性。
本实施例中的配置文件的定义使用JSON格式，因为JSON格式对数据的结构进行描述友好清晰。
本实施例中的步骤S4中通过统一处理函数handleInitAuto()动态的对实际宽高进行等比放缩操作具体如下：
S401、动态获取预定义宽度值和高度值；
S402、动态设置容器的宽度值和高度值；
S403、使用Jquery或JavaScript改变容器的宽度值和高度值。
本实施例中的容器设置在Body里面，容器作为渲染的入口，默认有自己的宽高；容器的宽高为效果图的宽高或其他值，同时为容器配置的样式为main；
容器内包含一层子容器，子容器的宽高与容器的宽高保持一致，这样做的目的是为了后面handleInitAuto()函数的操作的灵活性。
本实施例中的统一处理函数handleInitAuto()接受的参数为对象形式，对象有五个属性，分别为预定义宽度(cWidth)、预定义高度(cHeight)、容器样式(main)、子容器样式(mainBox)和放缩的方式(stretch)；
其中，放缩的方式(stretch)用于确定是按哪种方式进行放缩操作，默认是一致性放缩操作，这种放缩方式简洁明了。
本实施例中的统一处理函数handleInitAuto()包括强制放缩处理函数changeSizeUniform()和非强制放缩处理函数changeSizeFill()。
本实施例中的强制放缩处理函数changeSizeUniform()是根据预定宽高和实际宽高比值直接进行放缩，不考虑实际屏幕宽高和预定义宽高谁大谁小的问题，依赖于CSS3中的transform的scale属性；具体如下：
(1)、使用Jquery获取实际屏幕的宽度rWidth和高度rHeight，计算出宽度放缩比以及高度放缩比：
宽度放缩比的计算公式为：scaleW＝rWidth/cWidth；
高度放缩比的计算公式为：scaleH＝rHeight/cHeight；
(2)、把容器的高度设置为实际屏幕的宽高度；
(3)、把子容器按照scaleW和scaleH进行放缩，一致性处理函数完成处理操作。
本实施例中的非强制放缩处理函数changeSizeFill()处理思路是：获取预定义的宽高比值cRate，获取当前屏幕的宽高比值rate,比较cRate和rate之间的大小，当rate大于cRate时说明需要按实际高度和预定义高度比值进行放缩，反之按实际宽度和预定义宽度的比值尽心放缩；具体处理步骤如下：
(1)、获取预定义的宽高比值cRate以及当前屏幕实际的宽高比值rate,并比较cRate和rate之间的大小：
①、当rate大于cRate时，则放缩比例scale值为实际高度除以预定义的高度；
②、当rate不大于cRate时，则放缩比例scale值为实际的宽度除以预定义的宽度；
(2)、使用预定义的高度乘以放缩比例scale值作为容器的高度；
(3)、使用预定义的宽度乘以放缩比例scale值作为容器的宽度；
(4)、使用实际高度减去预定义高度的除以2作为容器的top距离；
(5)、把子容器使用transform的scale属性按照计算出来的放缩比例scale值进行放缩,放缩完成后进行投屏。
实施例2：
本发明实施例还提供了一种计算机可读存储介质，其中存储有多条指令，指令由处理器加载，使处理器执行本发明任一实施例中的适配不同大屏分辨率的前端投屏方法。具体地，可以提供配有存储介质的系统或者装置，在该存储介质上存储着实现上述实施例中任一实施例的功能的软件程序代码，且使该系统或者装置的计算机(或CPU或MPU)读出并执行存储在存储介质中的程序代码。
在这种情况下，从存储介质读取的程序代码本身可实现上述实施例中任何一项实施例的功能，因此程序代码和存储程序代码的存储介质构成了本发明的一部分。
用于提供程序代码的存储介质实施例包括软盘、硬盘、磁光盘、光盘(如CD-ROM、CD-R、CD-RW、DVD-ROM、DVD-RYM、DVD-RW、DVD+RW)、磁带、非易失性存储卡和ROM。可选择地，可以由通信网络从服务器计算机上下载程序代码。
此外，应该清楚的是，不仅可以通过执行计算机所读出的程序代码，而且可以通过基于程序代码的指令使计算机上操作的操作系统等来完成部分或者全部的实际操作，从而实现上述实施例中任意一项实施例的功能。
此外，可以理解的是，将由存储介质读出的程序代码写到插入计算机内的扩展板中所设置的存储器中或者写到与计算机相连接的扩展单元中设置的存储器中，随后基于程序代码的指令使安装在扩展板或者扩展单元上的CPU等来执行部分和全部实际操作，从而实现上述实施例中任一实施例的功能。
最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (5)

1.一种适配不同大屏分辨率的前端投屏方法，其特征在于，该方法是通过定义配置文件，并在配置文件中配置分辨率，经统一处理函数handleInitAuto()进行等比放缩操作后，投放到显示器进行高度还原；具体步骤如下：
S1、加载配置文件中预定义的高度和宽度；具体如下：
S101、通过Axios.js动态的获取配置文件中配置信息；
S102、在配置文件中进行对象的定义，对象的属性为width和height，对象的属性值默认为像素；
S2、通过统一处理函数handleInitAuto()获取实际屏幕的宽度和高度；
S3、通过统一处理函数handleInitAuto()计算出预定义宽度和实际宽度的比值wScale以及预定义高度和实际高度比值hScale；
S4、通过统一处理函数handleInitAuto()动态的对实际宽高进行等比放缩操作；具体如下：
S401、动态获取预定义宽度值和高度值；
S402、动态设置容器的宽度值和高度值；
S403、使用Jquery或JavaScript改变容器的宽度值和高度值；
S5、将放缩完成的效果投放到实际的屏幕中；
其中，统一处理函数handleInitAuto()包括强制放缩处理函数changeSizeUniform()和非强制放缩处理函数changeSizeFill()；
强制放缩处理函数changeSizeUniform()是根据预定宽高和实际宽高比值直接进行放缩，依赖于CSS3中的transform的scale属性；具体如下：
(1)、使用Jquery获取实际屏幕的宽度rWidth和高度rHeight，计算出宽度放缩比以及高度放缩比：
宽度放缩比的计算公式为：scaleW＝rWidth/cWidth；
高度放缩比的计算公式为：scaleH＝rHeight/cHeight；
(2)、把容器的高度设置为实际屏幕的宽高度；
(3)、把子容器按照scaleW和scaleH进行放缩，一致性处理函数完成处理操作；
非强制放缩处理函数changeSizeFill()具体处理步骤如下：
(1)、获取预定义的宽高比值cRate以及当前屏幕实际的宽高比值rate,并比较cRate和rate之间的大小：
①、当rate大于cRate时，则说明需要按实际高度和预定义高度比值进行放缩，即放缩比例scale值为实际高度除以预定义的高度；
②、当rate不大于cRate时，则说明需要按实际宽度和预定义宽度的比值尽心放缩，即放缩比例scale值为实际的宽度除以预定义的宽度；
(2)、使用预定义的高度乘以放缩比例scale值作为容器的高度；
(3)、使用预定义的宽度乘以放缩比例scale值作为容器的宽度；
(4)、使用实际高度减去预定义高度的除以2作为容器的top距离；
(5)、把子容器使用transform的scale属性按照计算出来的放缩比例scale值进行放缩,放缩完成后进行投屏。
2.根据权利要求1所述的适配不同大屏分辨率的前端投屏方法，其特征在于，所述配置文件的定义使用JSON格式。
3.根据权利要求1所述的适配不同大屏分辨率的前端投屏方法，其特征在于，所述容器设置在Body里面，容器作为渲染的入口，默认有自己的宽高；容器的宽高为效果图的宽高，同时为容器配置的样式为main；
容器内包含一层子容器，子容器的宽高与容器的宽高保持一致。
4.根据权利要求1所述的适配不同大屏分辨率的前端投屏方法，其特征在于，所述统一处理函数handleInitAuto()接受的参数为对象形式，对象有五个属性，分别为预定义宽度、预定义高度、容器样式、子容器样式和放缩的方式；
其中，放缩的方式默认是一致性放缩操作。
5.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机程序，所述计算机程序可被处理器执行以实现如权利要求1至4中所述的适配不同大屏分辨率的前端投屏方法。
CN202110574809.5A 2021-05-26 2021-05-26 一种适配不同大屏分辨率的前端投屏方法 Active CN113253959B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110574809.5A CN113253959B (zh) 2021-05-26 2021-05-26 一种适配不同大屏分辨率的前端投屏方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110574809.5A CN113253959B (zh) 2021-05-26 2021-05-26 一种适配不同大屏分辨率的前端投屏方法

Publications (2)

Publication Number Publication Date
CN113253959A CN113253959A (zh) 2021-08-13
CN113253959B true CN113253959B (zh) 2023-04-07

Family

ID=77184529

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110574809.5A Active CN113253959B (zh) 2021-05-26 2021-05-26 一种适配不同大屏分辨率的前端投屏方法

Country Status (1)

Country Link
CN (1) CN113253959B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114610295A (zh) * 2022-03-22 2022-06-10 云粒智慧科技有限公司 一种页面容器的布局方法、装置、设备及介质

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106688242A (zh) * 2014-10-06 2017-05-17 夏普株式会社 用于对于装置进行终端分辨率适应的系统
CN112822547A (zh) * 2020-12-30 2021-05-18 苏州必捷网络有限公司 一种界面全域适配的投屏播放控制方法

Family Cites Families (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9741316B2 (en) * 2012-06-22 2017-08-22 Universität des Saarlandes Method and system for displaying pixels on display devices
CN103744595B (zh) * 2013-12-30 2017-03-22 广州华多网络科技有限公司 自适应显示方法和装置
US10339469B2 (en) * 2015-10-23 2019-07-02 Sap Se Self-adaptive display layout system
CN106406794A (zh) * 2016-09-14 2017-02-15 乐视控股（北京）有限公司 一种屏幕适配方法及其装置
CN109410698B (zh) * 2018-09-19 2021-02-12 浙江省测绘科学技术研究院 数据大屏可视化方法及系统
CN109783181B (zh) * 2019-01-31 2019-12-20 掌阅科技股份有限公司 屏幕适配显示方法、电子设备及计算机存储介质
CN112015509A (zh) * 2020-08-31 2020-12-01 中移（杭州）信息技术有限公司 数据可视化大屏的构建方法、电子设备及存储介质

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106688242A (zh) * 2014-10-06 2017-05-17 夏普株式会社 用于对于装置进行终端分辨率适应的系统
CN112822547A (zh) * 2020-12-30 2021-05-18 苏州必捷网络有限公司 一种界面全域适配的投屏播放控制方法

Also Published As

Publication number Publication date
CN113253959A (zh) 2021-08-13

Similar Documents

Publication Publication Date Title
US10325012B2 (en) Filtered stylesheets
CN111984351B (zh) 页面适配方法、电子设备、计算机可读存储介质
US10339209B2 (en) Webpage display method and device
CN112416339A (zh) 页面开发方法、装置、计算机设备
CN104820589B (zh) 一种动态适配网页的方法及其装置
CN107066618B (zh) 一种网页页面转换后显示方法和装置
CN113486280B (zh) 页面渲染显示方法、装置、设备、存储介质和程序产品
US9035948B2 (en) Methods and systems for drawing graphics into a data chart
CN108121539B (zh) 组件处理方法和装置
CN111951356B (zh) 基于json数据格式的动画渲染方法
CN111459501A (zh) 基于SVG的Web组态画面存储与展示系统和方法及介质
CN113536179B (zh) 页面的生成方法、装置、电子设备和存储介质
CN113253959B (zh) 一种适配不同大屏分辨率的前端投屏方法
CN112634406A (zh) 生成图片的方法、装置、电子设备、存储介质和程序产品
CN113391808A (zh) 页面的配置方法、装置及电子设备
CN116009863B (zh) 前端页面渲染方法、设备及存储介质
CN115659087B (zh) 页面渲染方法、设备及存储介质
CN111399836A (zh) 修改页面属性的方法及装置
CN115033226A (zh) 页面显示方法、装置、终端设备及计算机可读存储介质
CN114896020A (zh) 弹窗的生成方法、装置、电子设备及可读存储介质
EP3966788A1 (en) Method and system for transforming wireframes to as-is screens with responsive behaviour
CN114998485B (zh) 图形组合动画的生成方法、装置、电子设备及存储介质
CN115509524A (zh) 基于xaml的ui图像显示方法、终端以及存储介质
CN116701799A (zh) 一种html标签优化方法、装置和设备
CN112068829A (zh) 单文本输入控件的生成方法、装置、系统、设备以及介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
TA01 Transfer of patent application right
TA01 Transfer of patent application right

Effective date of registration: 20230322

Address after: South 1st Floor, S06 Building, 1036 Langchao Road, High-tech Zone, Jinan City, Shandong Province, 250000

Applicant after: Jinan Langchao zhitou Intelligent Technology Co.,Ltd.

Address before: 250100 South 1st floor, S06 building, No. 1036, Inspur Road, high tech Zone, Jinan City, Shandong Province

Applicant before: Smart Quancheng Intelligent Technology Co.,Ltd.

GR01 Patent grant
GR01 Patent grant