CN113486280A - 页面渲染显示方法、装置、设备、存储介质和程序产品 - Google Patents

页面渲染显示方法、装置、设备、存储介质和程序产品 Download PDF

Info

Publication number
CN113486280A
CN113486280A CN202110751182.6A CN202110751182A CN113486280A CN 113486280 A CN113486280 A CN 113486280A CN 202110751182 A CN202110751182 A CN 202110751182A CN 113486280 A CN113486280 A CN 113486280A
Authority
CN
China
Prior art keywords
page
module
unit
area occupied
adaptation unit
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.)
Granted
Application number
CN202110751182.6A
Other languages
English (en)
Other versions
CN113486280B (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.)
Beijing Dajia Internet Information Technology Co Ltd
Original Assignee
Beijing Dajia Internet Information 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 Beijing Dajia Internet Information Technology Co Ltd filed Critical Beijing Dajia Internet Information Technology Co Ltd
Priority to CN202110751182.6A priority Critical patent/CN113486280B/zh
Publication of CN113486280A publication Critical patent/CN113486280A/zh
Application granted granted Critical
Publication of CN113486280B publication Critical patent/CN113486280B/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
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/972—Access to data in other repository systems, e.g. legacy data or dynamic Web page generation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Digital Computer Display Output (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

本公开关于一种页面渲染显示方法、装置、设备、存储介质和程序产品，包括：获取在当前显示窗口待渲染的页面的页面信息；对第一模块所占区域进行渲染后，确定第一模块内显示的对象采用指定类型的第一适配单位时，根据在当前显示窗口中第一模块所占区域被渲染的尺寸，确定对象的第一适配单位的像素数量；根据对象在标准窗口中的尺寸和标准窗口中第一适配单位的像素数量，确定对象的第一适配单位的单位数量；根据对象的第一适配单位的单位数量和像素数量，确定对象的所占原始区域；利用调整系数，调整对象所占原始区域后得到对象所占区域后进行渲染显示；第一模块为页面中任一模块，调整系数为标准窗口的尺寸与第一模块在标准窗口中的尺寸两者之比。

Description

页面渲染显示方法、装置、设备、存储介质和程序产品
技术领域
本公开涉及计算机技术领域，尤指一种页面渲染显示方法、装置、设备、存储介质和程序产品。
背景技术
Web网页是由超级文本标记语言(Hyper Text Markup Language，HTML)和层叠样式表(Cascading Style Sheets，CSS)构建的静态页面，用户在浏览Web网页时需要进行交互，因此需要加载相应的脚本语言进行网页内容的更新。
网页加载技术可以采用多种渲染方式进行渲染，在进行网页渲染时，通过运行对应的脚本语言，加载符合CSS样式的HTML文件，得到渲染的页面。在客户端进行页面渲染时，由于客户端的显示器件的尺寸大小不一，导致不同尺寸的电子设备在显示同一个设计稿页面时，需要根据客户端的显示器件的尺寸进行适配。
根据CSS样式文件，Web页面通常有多个模块组成，Web页面中的显示的各部分内容以元素的形式被设置于对应的模块之中。对于一些存在嵌套关系的内容，需要将嵌套元素所在的模块嵌套于外侧模块之中。
目前现有技术中有多种将设计稿页面根据显示窗口尺寸进行适配后显示的布局方案，例如逻辑像素布局方案、百分比布局方案、根强调(Root Emphasize，Rem)布局方案、视口(Viewport)布局方案等。例如Rem布局方案，将元素、模块等对象的尺寸使用Rem适配单位的单位数量表示，并在CSS样式中设置Rem适配单位的像素数量与显示窗口尺寸的对应关系，在不同尺寸的显示窗口的设备上显示时通过Rem适配单位的单位数量和像素数量确定所述对象的显示宽度。而对于Viewport布局方案，将元素、模块等对象的宽度/高度对应使用vw/vh适配单位的单位数量表示，而vw/vh适配单位的像素数量始终为当前显示窗口的宽度/高度像素数量的1％，在不同尺寸的显示窗口的设备上显示时通过vw/vh适配单位的单位数量和像素数量确定所述对象的显示宽度。
但是，若同一页面的多个存在嵌套关系的模块统一单采用一种布局方式，则各个布局方式会存在对应的局限性甚至不支持某些属性的元素的适配；若同一页面的多个存在嵌套关系的模块根据模块中元素的属性选择对应的布局方式，可以取得较好的适配效果，但目前相关技术并未提出如何实现同一页面的多个模块采用不同布局方式的适配方案。
发明内容
本公开实施例提供一种页面渲染显示方法、装置、设备、存储介质和程序产品，以至少解决现有技术中不能实现存在嵌套关系的模块根据模块中元素的属性选择对应的布局方式问题。本公开的技术方案如下：
根据本公开实施例的第一方面，提供一种页面渲染显示方法，包括：
获取在当前显示窗口待渲染的页面的页面信息，所述页面信息包括组成页面的多个模块、各模块内显示的对象、各模块内显示的对象采用的适配单位及所述对象在标准窗口中的尺寸，所述对象包括页面元素或嵌套的另一个模块；
对第一模块所占区域进行渲染后，确定所述第一模块内显示的对象采用指定类型的第一适配单位时，根据在所述当前显示窗口中所述第一模块所占区域被渲染的尺寸，确定所述对象的第一适配单位的像素数量；
根据所述对象在所述标准窗口中的尺寸和所述标准窗口中所述第一适配单位的像素数量，确定所述对象的第一适配单位的单位数量；
根据所述对象的第一适配单位的单位数量和像素数量，确定所述对象的所占原始区域；
利用所述调整系数，调整所述对象所占原始区域后得到所述对象所占区域后，对所述对象所占区域进行渲染显示；
其中，所述第一模块为所述页面中的任一个模块，所述调整系数为所述标准窗口的尺寸，与所述第一模块在所述标准窗口中的尺寸两者之间的比例。
可选地，所述利用所述调整系数，调整所述对象所占原始区域后得到所述对象所占区域，包括：
利用所述调整系数调整所述对象的第一适配单位的像素数量，利用调整后的像素数量和所述单位数量，得到所述对象所占区域；或者
利用所述调整系数调整所述对象的第一适配单位的单位数量，利用调整后的单位数量和所述像素数量，得到调整后的所述对象所占区域；或者
根据所述对象的第一适配单位的所述单位数量和像素数量得到所述对象的原始区域，利用所述调整系数调整所述对象的原始区域，得到所述对象所占区域。
可选地，所述的页面渲染显示方法还包括：
对第一模块所占区域进行渲染后，确定所述第一模块内显示的对象采用指定类型的第二适配单位时，根据所述当前显示窗口的尺寸，确定所述第二适配单位的像素数量；
根据所述对象在所述标准窗口中的尺寸和所述标准窗口中所述第二适配单位的像素数量，确定所述对象的第二适配单位的单位数量；
根据所述对象的第二适配单位的单位数量和像素数量，得到所述对象所占区域，对所述对象所占区域进行渲染显示。
可选地，所述第一适配单位为根强调Rem单位。
可选地，所述第二适配单位为视口Viewport适配单位。
可选地，得到所述对象所占区域并进行渲染显示，包括：
根据所述页面信息，确定所述对象所占区域指定位置像素点在所述当前显示窗口的位置信息；
根据所述位置信息确定所述指定位置像素点在所述当前显示窗口的位置；
根据所述指定位置像素点与所述对象所占区域其他像素点的关系，得到所述对象所占区域在所述当前显示窗口的位置，并进行渲染显示。
可选地，所述利用所述调整系数，调整所述对象所占原始区域后得到所述对象所占区域，具体为：
width＝widthValue×fontsize×coefficient
height＝heightValue×fontsize×coefficient
其中，width表示所述对象所占区域的宽度，height表示所述对象所占区域的高度，widthValue表示所述对象在所述标准页面中在宽度方向上占用的所述第一适配单位的单位数量，heightValue表示所述对象在所述标准页面中在高度方向上占用的所述第一适配单位的单位数量，fontsize表示所述对象的第一适配单位的像素数量，coefficient表示所述调整系数。
可选地，所述调整系数为：
Figure BDA0003146307860000041
其中，根据在所述当前显示窗口中所述第一模块所占区域被渲染的宽度，确定所述对象的第一适配单位的像素数量时，l表示所述标准页面中的所述第一模块的宽度，L表示所述标准页面宽度；
或者，根据在所述当前显示窗口中所述第一模块所占区域被渲染的高度，确定所述对象的第一适配单位的像素数量时，l表示所述标准页面中的所述第一模块的高度，L表示所述标准页面高度。
可选地，所述对象为嵌套的另一个模块时，所述对象通过iframe函数嵌入于所述第一模块。
根据本公开实施例的第二方面，提供一种页面渲染显示装置，包括：
页面信息获取单元，被配置为执行获取在当前显示窗口待渲染的页面的页面信息，所述页面信息包括组成页面的多个模块、各模块内显示的对象、各模块内显示的对象采用的适配单位及所述对象在标准窗口中的尺寸，所述对象包括页面元素或嵌套的另一个模块；
第一适配单位确定单元，被配置为执行对第一模块所占区域进行渲染后，确定所述第一模块内显示的对象采用指定类型的第一适配单位时，根据在所述当前显示窗口中所述第一模块所占区域被渲染的尺寸，确定所述对象的第一适配单位的像素数量；
第一尺寸数值确定单元，被配置为执行根据所述对象在所述标准窗口中的尺寸和所述标准窗口中所述第一适配单位的像素数量，确定所述对象的第一适配单位的单位数量；
第一尺寸计算单元，被配置为执行根据所述对象的第一适配单位的单位数量和像素数量，确定所述对象的所占原始区域；
第一尺寸调整渲染单元，被配置为执行利用所述调整系数，调整所述对象所占原始区域后得到所述对象所占区域后，对所述对象所占区域进行渲染显示；
其中，所述第一模块为所述页面中的任一个模块，所述调整系数为所述标准窗口的尺寸，与所述第一模块在所述标准窗口中的尺寸两者之间的比例。
可选地，所述利用所述调整系数，调整所述对象所占原始区域后得到所述对象所占区域，包括：
利用所述调整系数调整所述对象的第一适配单位的像素数量，利用调整后的像素数量和所述单位数量，得到所述对象所占区域；或者
利用所述调整系数调整所述对象的第一适配单位的单位数量，利用调整后的单位数量和所述像素数量，得到调整后的所述对象所占区域；或者
根据所述对象的第一适配单位的所述单位数量和像素数量得到所述对象的原始区域，利用所述调整系数调整所述对象的原始区域，得到所述对象所占区域。
可选地，所述的页面渲染显示装置还包括：
第二适配单位确定单元，被配置为执行对第一模块所占区域进行渲染后，确定所述第一模块内显示的对象采用指定类型的第二适配单位时，根据所述当前显示窗口的尺寸，确定所述第二适配单位的像素数量；
第二尺寸数值确定单元，被配置为执行根据所述对象在所述标准窗口中的尺寸和所述标准窗口中所述第二适配单位的像素数量，确定所述对象的第二适配单位的单位数量；
第二尺寸渲染单元，被配置为执行根据所述对象的第二适配单位的单位数量和像素数量，得到所述对象所占区域，对所述对象所占区域进行渲染显示。
可选地，所述第一适配单位为根强调Rem单位。
可选地，所述第二适配单位为视口Viewport适配单位。
可选地，得到所述对象所占区域并进行渲染显示，包括：
根据所述页面信息，确定所述对象所占区域指定位置像素点在所述当前显示窗口的位置信息；
根据所述位置信息确定所述指定位置像素点在所述当前显示窗口的位置；
根据所述指定位置像素点与所述对象所占区域其他像素点的关系，得到所述对象所占区域在所述当前显示窗口的位置，并进行渲染显示。
可选地，所述利用所述调整系数，调整所述对象所占原始区域后得到所述对象所占区域，具体为：
width＝widthValue×fontsize×coefficient
height＝heightValue×fontsize×coefficient
其中，width表示所述对象所占区域的宽度，height表示所述对象所占区域的高度，widthValue表示所述对象在所述标准页面中在宽度方向上占用的所述第一适配单位的单位数量，heightValue表示所述对象在所述标准页面中在高度方向上占用的所述第一适配单位的单位数量，fontsize表示所述对象的第一适配单位的像素数量，coefficient表示所述调整系数。
可选地，所述调整系数为：
Figure BDA0003146307860000061
其中，根据在所述当前显示窗口中所述第一模块所占区域被渲染的宽度，确定所述对象的第一适配单位的像素数量时，l表示所述标准页面中的所述第一模块的宽度，L表示所述标准页面宽度；
或者，根据在所述当前显示窗口中所述第一模块所占区域被渲染的高度，确定所述对象的第一适配单位的像素数量时，l表示所述标准页面中的所述第一模块的高度，L表示所述标准页面高度。
可选地，所述对象为嵌套的另一个模块时，所述对象通过iframe函数嵌入于所述第一模块。
根据本公开实施例的第三方面，提供一种电子设备，包括：
处理器；
用于存储所述处理器可执行指令的存储器；
其中，所述处理器被配置为执行所述指令，以实现所述的页面渲染显示方法。
根据本公开实施例的第四方面，提供一种计算机可读存储介质，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行所述的页面渲染显示方法。
根据本公开实施例的第五方面，提供一种计算机程序产品，包括计算机指令，所述计算机指令被处理器执行时实现所述的页面渲染显示方法。
本公开的实施例提供的技术方案至少带来以下有益效果：
本公开实施例提供的页面渲染显示方法、装置、设备、存储介质和程序产品，通过根据在所述标准窗口中的模块与标准窗口尺寸的比例关系，利用调整系数调整模块中以第一适配单位适配的页面元素或嵌套的另一个模块的原始区域后进行渲染显示，实现了具有以第一适配单位适配的模块的页面在不同尺寸的电子设备上显示效果，与以标准窗口尺寸显示时相近的显示效果。
应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。
图1为一示例性实施例示出的一种页面渲染显示的效果图。
图2为一示例性实施例示出的一种页面渲染显示的效果图。
图3是根据一示例性实施例示出的一种页面渲染显示方法的流程图。
图4为一示例性实施例示出的一种应用所述页面渲染显示方法的效果图。
图5为一示例性实施例示出的一种应用所述页面渲染显示方法的效果图。
图6为一示例性实施例示出的一种应用所述页面渲染显示方法的效果图。
图7为一示例性实施例示出的一种应用所述页面渲染显示方法的效果图。
图8是根据一示例性实施例示出的一种页面渲染显示装置的结构图。
图9是根据一示例性实施例示出的一种电子设备的结构示意图。
具体实施方式
为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。
需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子下面结合附图，对本公开实施例提供的页面渲染显示方法、装置、设备、存储介质和程序产品进行具体说明。
本公开实施例中涉及第一适配单位和第二适配单位，其中第一适配单位为在CSS文件中采用根元素fontsize为基准确定对应的像素数量的适配单位，所述第二适配单位为CSS文件中采用显示窗口的尺寸为基准计算得到对应的像素数量的适配单位。在下文将要说明的内容中，将以所述第一适配单位为Rem单位，所述第二适配单位为Viewport单位为例进行说明。
由于目前各型号的电子设备的显示器件的尺寸大小不一，因此各型号实际显示过程中的显示窗口的尺寸是不同的。但在页面设计过程中，不便于对所有尺寸的显示窗口分别单独设计页面。因此，会以某一个标准窗口的尺寸作为基准设计页面，根据标准窗口的尺寸的页面生成对应的CSS样式文件。进行显示的电子设备会响应于页面加载请求，根据获取对应的CSS样式文件获取在当前显示窗口待渲染的页面的页面信息，并根据页面信息中对各模块或元素的适配方式以当前显示窗口的尺寸进行适配后进行渲染显示，以实现所述电子设备显示的页面与所述标准窗口的尺寸的基准设计页面相近的显示效果。
对于显示内容较为复杂的页面，一般会需要在页面中进行模块的嵌套。当嵌套的模块为另一个页面文件(例如广告页面等)时，所述嵌套的模块(后文称为第一模块)中的显示对象(包括在该模块中的元素或嵌套在其中的另一个模块)的适配方式不一定与外侧显示对象(包括外侧的模块或外侧的元素)的适配方式相同。那么，若所述第一模块内显示的对象与所述外侧显示对象的适配方式不同时，直接进行渲染显示得到的页面与所述基准设计页面的显示效果可能相差较大。对于所述第一模块采用第一适配单位进行适配的情况，在设置所述第一适配单位的像素数量与对应的当前显示窗口的尺寸具有函数对应关系时，所述模块中的显示对象并不会以当前显示窗口的尺寸，而是以所述第一模块(相当于所述第一模块内的对象的实际的显示窗口为所述第一模块)被实际渲染的尺寸作为基准进行适配。例如，设置所述第一适配单位的像素数量具有函数关系：
fontsize＝k·x
其中，fontsize表示所述第一适配单位的像素数量，x在所述标准显示中为所述标准窗口的宽度；在所述当前显示窗口中，对于最外侧对象为所述当前显示窗口的宽度，对于所述第一模块中的对象为对应的所述第一模块的被实际渲染的宽度；k为系数，且0＜k≤1。
这样，最终显示的效果与以所述基准显示窗口尺寸的显示效果相差过大。例如，所述标准窗口Page1的宽度为750px，所述当前显示窗口Page2的宽度为375px。如图1所示，显示页面在第一层页面中包含有一个嵌套的模块Module，在所述模块Module中包含有一个文字元素“Word”。显示时占当前显示页面Page2的比例，与在所述标准窗口Page1尺寸下嵌套模块中的元素占设计稿页面的比例相比明显偏小。或者，如图2所示，对于多级嵌套的情况，显示页面中在第一层页面中包含有一个模块Module1，在模块Module1中包含有一个文字元素“Number”和一个嵌套的模块Module2，在所述模块Module2中包含有一个文字元素“World”。若模块Module1中的显示对象(即文字元素“Number”和模块Module2)采用Viewport单位或px单位进行适配，而模块Module2中的文字元素“World”采用Rem单位进行适配，那么模块Module1、文字元素“Number”和模块Module2在当前显示窗口Page2中的尺寸比例与所述标准页面Page1中的尺寸比例相同，但所述文字元素“World”在当前显示窗口Page2的尺寸比例与在所述标准示窗口Page1尺寸的尺寸比例相比明显偏小。
针对上述问题，本公开实施例提供了一种页面渲染显示方法、装置、设备、存储介质和程序产品。
图3是根据一示例性实施例示出的一种页面渲染显示方法的流程图，如图3所示，所述页面渲染显示方法用于电子设备中，包括以下步骤。
在步骤S10中，获取在当前显示窗口待渲染的页面的页面信息，所述页面信息包括组成页面的多个模块、各模块内显示的第一对象、各模块内显示的第一对象采用的适配单位及所述第一对象在标准窗口中的尺寸，所述第一对象包括页面元素或嵌套的另一个模块。
以图4为例(图4中仅示意了宽度方向，高度方向同理，可以对应实施)，待渲染的页面中首先包括一个文字元素“CCCC”和一个嵌套的模块M1，模块M1中包括两个第一对象：文字元素“AAAA”和嵌套的模块M2，模块M2中包括一个第一对象：文字元素“BBBB”。其中，所述标准窗口的宽度为750px，所述当前显示窗口的尺寸为375px。模块M1采用vw适配单位，且模块M1在标准窗口的宽度为640px。文字元素“AAAA”采用Rem适配单位，且在标准窗口中的宽度为32px。模块M2采用Rem适配单位，且在标准窗口中的宽度为128px。文字元素“BBBB”的采用Rem适配单位，且在标准窗口中的宽度为16px。
在步骤S21中，对第一模块所占区域进行渲染后，确定所述第一模块内显示的第一对象采用指定类型的第一适配单位时，根据在所述当前显示窗口中所述第一模块所占区域被渲染的尺寸，确定所述第一对象的第一适配单位的像素数量。其中，所述第一模块为所述页面中的任一个模块。
对于图4所示的页面，对于文字元素“AAAA”和模块2而言，其对应的第一模块为模块1，而对于文字元素“BBBB”而言，其对应的第一模块为模块2。
设Rem单位在所述标准页面中的像素数量fontsize＝100px/Rem。
由于模块1采用Viewport单位适配，那么在当前显示窗口中所渲染显示的比例是期望的缩小一半，为320px。对于所述文字元素“AAAA”和模块1而言，Rem单位的像素数量不是期望的缩小一半为50px/Rem，而是缩小
Figure BDA0003146307860000111
那么元素“AAAA”和模块2的Rem单位的像素数量为：
Figure BDA0003146307860000112
同理，根据后续步骤确定模块2被使用本公开技术方案渲染的宽度为64px(具体计算方法在下文详细说明)，那么元素“BBBB”的Rem单位的像素数量为：
Figure BDA0003146307860000113
这样，无论是文字元素“AAAA”、模块2或文字元素“BBBB”，其均与保持与标准窗口相同的显示效果的Rem单位的像素数量50px/Rem相比明显偏小。
在步骤S22中，根据所述第一对象在所述标准窗口中的尺寸和所述标准窗口中所述第一适配单位的像素数量，确定所述第一对象的第一适配单位的单位数量。
所述文字元素“AAAA”的宽度表示为：
Figure BDA0003146307860000121
所述模块M2的宽度表示为：
Figure BDA0003146307860000122
所述文字元素“BBBB”的宽度表示为：
Figure BDA0003146307860000123
在步骤S23中，根据所述第一对象的第一适配单位的单位数量和像素数量，确定所述第一对象的所占原始区域。
所述文字元素“AAAA”的所占原始区域宽度为：
0.32Rem×42.67px/Rem≈13.65px
所述模块2的所占原始区域宽度为：
1.28Rem×42.67px/Rem≈54.61px
所述文字元素“BBBB”的所占原始区域宽度为：
0.16Rem×8.53px/Rem≈1.37px
由此可知，如果不对使用Rem单位的文字元素“AAAA”、模块2和文字元素“BBBB”进行调整，其渲染的尺寸明显小于期望的
Figure BDA0003146307860000124
Figure BDA0003146307860000125
在步骤S24中，利用调整系数，调整所述第一对象所占原始区域后得到所述第一对象所占区域后，对所述第一对象所占区域进行渲染显示。
其中，所述调整系数为所述标准窗口的尺寸，与所述第一模块在所述标准窗口中的尺寸两者之间的比例。
对于所述文字元素“AAAA”和所述模块2，所述调整系数为：
Figure BDA0003146307860000131
调整后的所述文字元素“AAAA”所占区域的宽度为：
Figure BDA0003146307860000132
调整后的所述模块2所占区域的宽度为：
Figure BDA0003146307860000133
对于所述文字元素“BBBB”，所述调整系数为：
Figure BDA0003146307860000134
调整后的所述文字元素“BBBB”所占区域的宽度为：
Figure BDA0003146307860000135
需要说明的是，本公开实施例中不对所述第一模块的渲染方式进行限定，所述第一模块可以通过现有技术(例如，所述第一模块为最外层模块，没有嵌套于其它模块时)或者通过本公开实施例(例如，所述模块2示意的情况)进行渲染。所述第一模块的适配单位可以为所述第一适配单位、所述第二适配单位以外，还可以为逻辑像素px适配单位。
例如，如图5所示，待渲染的页面中首先包括一个嵌套的模块Module，模块Module中包括一个第一对象：图片元素“Picture”。其中，所述标准窗口的宽度为750px，所述当前显示窗口的尺寸为375px。模块M1采用px适配单位，且模块Module在标准窗口的宽度为640px，在当前显示窗口的宽度为300px。图片元素“Picture”采用Rem适配单位，且在标准窗口中的宽度为32px。
设Rem单位在所述标准页面中的像素数量fontsize＝100px/Rem。
所述图片元素“Picture”的宽度表示为：
Figure BDA0003146307860000141
在所述当前显示窗口中，所述图片元素“Picture”对应的Rem单元的像素数量为：
Figure BDA0003146307860000142
不对所述图片元素“Picture”的原始区域进行调整，得到的所述第一对象的显示宽度为(图5中未示出)：
0.32Rem×40px/Rem＝12.8px
所述调整系数为：
Figure BDA0003146307860000143
对所述图片元素“Picture”的原始区域进行调整，得到的所述第一对象的显示宽度为：
Figure BDA0003146307860000144
这样，本公开通过引入调整系数对模块中采用所述适配单位的元素或嵌套的另一个模块的渲染尺寸进行调整，能够实现在页面嵌套布局中使用所述第一适配单位的适配方案的正确显示，提供与所述标准窗口中相近的显示效果。
可选地，所述利用所述调整系数，调整所述第一对象所占原始区域后得到所述对象所占区域，包括如下任一种方式：
(1)利用所述调整系数调整所述第一对象的第一适配单位的像素数量，利用调整后的像素数量和所述单位数量，得到所述第一对象所占区域。
(2)利用所述调整系数调整所述第一对象的第一适配单位的单位数量，利用调整后的单位数量和所述像素数量，得到调整后的所述第一对象所占区域。
(3)根据所述对象的第一适配单位的所述单位数量和像素数量得到所述第一对象的原始区域，利用所述调整系数调整所述第一对象的原始区域，得到所述第一对象所占区域。
上文所述的步骤仅是一种从逻辑角度进行划分的方式，实际实施过程中可以有另外的执行方式，例如所述步骤S23与所述步骤S24同时执行。那么，除了上文所述的直接确定第一对象所占的原始区域的尺寸的像素值，对整个原始区域整体使用所述调整系数进行调整之外，也可以不直接计算原始区域的尺寸的像素值，而由所述单位数量和所述像素数量共同确定所述原始区域，之后再单独调整所述单位数量，或者单独调整所述像素数量。
这样，通过不同的调整所述第一对象所占原始区域的方式，便于实现的软件的应用程序接口(Application Programming Interface，API)的封装与调用。
可选地，所述的页面渲染显示方法还包括：
在步骤S25中，对第一模块所占区域进行渲染后，确定所述第一模块内显示的第二对象采用指定类型的第二适配单位时，根据所述当前显示窗口的尺寸，确定所述第二适配单位的像素数量。
以图6为例，待渲染的页面中首先包括一个文字元素“CCCC”和一个嵌套的模块M1，模块M1中包括两个第二对象：文字元素“AAAA”和文字元素“DDDD”。其中，所述标准窗口的宽度为750px，所述当前显示窗口的尺寸为375px。模块M1采用vw适配单位，且模块M1在标准窗口的宽度为640px。文字元素“AAAA”采用Rem适配单位，且在标准窗口中的宽度为32px。文字元素“DDDD”的采用vw适配单位，且在标准窗口中的宽度为32px。
那么，vw适配单位的像素数量为：
375px×1％/vw＝3.75px/vw
在步骤S26中，根据所述第二对象在所述标准窗口中的尺寸和所述标准窗口中所述第二适配单位的像素数量，确定所述第二对象的第二适配单位的单位数量。
在所述标准窗口中，所述vw适配单位的像素数量为：
750px×1％/vw＝7.5px/vw
所述文字元素“DDDD”的vw单位的单位数量为：
32px÷7.5px/vw≈4.27vw
在步骤S27中，根据所述第二对象的第二适配单位的单位数量和像素数量，得到所述第二对象所占区域，对所述第二对象所占区域进行渲染显示。
所述文字元素“DDDD”在当前显示窗口中所占区域为：
4.27vw×3.75px/vw＝16px
在具体实施过程中，为了便于所述页面渲染显示方法的计算机程序实现，与采用第一适配单位的第一对象的渲染显示的计算机程序实现形式统一，也可以为所述第二对象的区域设置所述调整系数，所述调整系数始终为1。
这样，通过在实现了嵌套布局支持Rem布局方案的前提下支持Viewport布局方案，能够实现支持的页面适配方案的多样化。
可选地，所述的页面渲染显示方法还包括：
在步骤S11中，渲染未嵌套于第一模块的第三对象时，确定所述第三对象采用指定类型的第三适配单位时，根据所述当前显示窗口的尺寸，确定所述第三适配单位的像素数量；
在步骤S12中，根据所述第三对象在所述标准窗口中的尺寸和所述标准窗口中所述第三适配单位的像素数量，确定所述对象的第三适配单位的单位数量；
在步骤S13中，根据所述第三对象的第三适配单位的单位数量和像素数量，得到所述第三对象所占区域，对所述第三对象所占区域进行渲染显示。
其中，所述第三对象包括页面元素或模块，所述第三适配单位包括但不限于所述第一适配单位和所述第二适配单位，例如还可以包括逻辑像素px单位。
在具体实施过程中，由于所述第三对象(例如图4、图6、图7中的文字元素“CCCC”)直接位于所述页面的最外层，不会出现由于相互嵌套而导致适配单位的像素数量的变化幅度大于或小于当前显示窗口相较于所述标准窗口的变化幅度。因而无论是采用哪种适配单位进行适配的方案，最终渲染显示所述第三对象的效果均与所述标准窗口中的显示效果一致。
在具体实施过程中，为了便于所述页面渲染显示方法的计算机程序实现，与所述第一对象的渲染显示的计算机程序实现形式统一，也可以为所述第三对象的区域设置所述调整系数，所述调整系数始终为1。
可选地，在所述步骤S13/所述步骤S27/所述步骤S23中，得到所述第一对象/第二对象/第三对象所占区域并进行渲染显示，包括：
根据所述页面信息，确定所述第一对象/第二对象/第三对象所占区域指定位置像素点在所述当前显示窗口的位置信息；
根据所述位置信息确定所述指定位置像素点在所述当前显示窗口的位置；
根据所述指定位置像素点与所述第一对象/第二对象/第三对象所占区域其他像素点的关系，得到所述第一对象/第二对象/第三对象所占区域在所述当前显示窗口的位置，并进行渲染显示。
在具体实施过程中，所述第一对象/第二对象/第三对象的所占区域包括尺寸、位置、颜色等多种属性。其中，位置信息通过使用对应适配单位适配后的尺寸确定。那么，按照上文所述的对所述区域的调整方法，同时会对所述第一对象/第二对象的位置信息进行调整，保证了所述第一对象/第二对象的显示位置的效果与在所述设计稿页面中相近。
可选地，在所述步骤S24中，所述利用所述调整系数，调整所述第一对象所占原始区域后得到所述对象所占区域，具体为：
width＝widthValue×fontsize×coefficient
height＝heightValue×fontsize×coefficient
其中，width表示所述第一对象所占区域的宽度，height表示所述第一对象所占区域的高度，widthValue表示所述第一对象在所述标准页面中在宽度方向上占用的所述第一适配单位的单位数量，heightValue表示所述第一对象在所述标准页面中在高度方向上占用的所述第一适配单位的单位数量，fontsize表示所述第一对象的第一适配单位的像素数量，coefficient表示所述调整系数。
可选地，所述调整系数为：
Figure BDA0003146307860000171
其中，根据在所述当前显示窗口中所述第一模块所占区域被渲染的宽度，确定所述第一对象的第一适配单位的像素数量时，l表示所述标准页面中的所述第一模块的宽度，L表示所述标准页面宽度；
或者，根据在所述当前显示窗口中所述第一模块所占区域被渲染的高度，确定所述第一对象的第一适配单位的像素数量时，l表示所述标准页面中的所述第一模块的高度，L表示所述标准页面高度。
以图7为例，待渲染的页面中首先包括一个文字元素“CCCC”和一个嵌套的模块M1，模块M1中包括一个第一对象：图片元素“×”。其中，所述标准窗口的宽度为750px，所述标准窗口的高度为700px。所述当前显示窗口的宽度为375px，所述当前显示窗口的高度为350px。模块M1采用vw适配单位，且模块M1在标准窗口的宽度为640px，高度为560px。图片元素“×”采用Rem适配单位，且在标准窗口中的宽度为64px，高度为16px。
将所述Rem单元的像素数量fontsize规定为：
Figure BDA0003146307860000181
其中，x在所述标准窗口中为所述标准窗口的宽度，即750px；在所述当前显示窗口中，对于图片元素“×”为所述当前显示窗口的宽度。
那么，在所述标准窗口中，所述图片元素“×”的Rem单位的像素数量fontsize＝100px/Rem。
由于模块M1在当前显示窗口中被渲染为宽度320px，高度280px的区域(该区域的具体确定方法不再赘述)。那么，在所述当前显示窗口中所述图片元素“×”的Rem单位的像素数量fontsize＝42.67px/Rem
所述图片元素“×”的Rem单位的单位数量为：
Figure BDA0003146307860000182
Figure BDA0003146307860000183
所述调整系数为：
Figure BDA0003146307860000191
所述图片元素“×”所占区域的尺寸分别为：
Figure BDA0003146307860000192
Figure BDA0003146307860000193
如果所述调整系数没有采用宽度方向的比例，而是高度方向的比例，那么错误的调整系数
Figure BDA0003146307860000194
对应的所述图片元素“×”所占区域的尺寸分别为：
宽度0.64Rem×42.67px/Rem×1.25＝40px
高度0.16Rem×42.67px/Rem×1.25＝10px
那么，最终调整后得到的所占区域又反而偏大。
这样，通过根据用于确定所述第一适配单位的像素数量的基准的方向，确定调整系数采用对应方向标准窗口中第一模块与标准窗口的尺寸的比例，能够准确地将所述第一对象放大。
在具体实施过程中，可以将本公开实施例所述的方法直接封装为程序函数，对于上述第一对象的宽度可以直接使用所述标准窗口中的尺寸表示，在需要根据所述当前显示窗口进行适配时调用所述程序函数计算得到对应的显示宽度。
例如，以宽度方向为例，在CSS文件中定义Rem适配单位的像素数量的确定函数：
fontsize＝Math.min(document.documentElement.clientWidth,750)/7.5
其中，fontsize是Rem适配单位的像素数量的变量名；document.docume-ntElement.clientWidth是所述对应窗口的宽度的变量名，即上文所述x的变量名。
同时，在CSS文件中对Rem布局适配方式定义如下函数：
.A(@px,@coefficient:1)
{CSS属性:unit(@px*@coefficient/@baseRem,rem)}
其中，.A为定义的函数名，附图中以.Rem为例进行的标注；@px是所述标准窗口中所述第一对象的尺寸的变量名；@coefficient是所述调整系数的变量名，@coefficient:1表示当程序执行时没有获取到所述调整系数时将初始化设置为1；CSS属性表示所述第一对象的属性名，例如可以为宽度的属性名width；@baseRem为所述标准窗口中的所述Rem适配单位的像素数量的变量名；rem表示所述Rem适配单位，使所述电子设备在进行渲染显示时确定所述第一对象对应的Rem适配单位的像素数量。那么，对于上文所述的实施例，可以在已定义所述函数的情况下，在所述待显示页面的页面信息中将所述第一对象的宽度表示为例如.Rem(32)的形式，则所述电子设备可以对所述第一对象使用Rem适配单位进行调整适配。
类似地，可以在CSS文件中对Viewport布局适配方式定义如下函数：
.vw(@px,@coefficient)
{width:unit(@px/@baseViewport*100*@coefficient,vw)}
其中，.vw为使用Viewport布局方式在宽度方向的函数名；@px是所述标准窗口中所述第二对象的宽度的变量名；@coefficient是所述调整系数的变量名，且所述调整系数的值始终为1；width为宽度的属性名；@baseViewport为所述标准窗口的宽度的变量名；vw表示所述vw适配单位，使所述电子设备在进行渲染显示时确定所述第一对象对应的vw适配单位的像素数量。
那么，对于上文所述的实施例，可以在已定义所述函数的情况下，在所述待显示页面的页面信息中将所述第二对象的宽度表示为例如.vw(640)的形式，则所述电子设备对所述第二对象使用vw适配单位进行调整适配。
可选地，所述对象为嵌套的另一个模块时，所述对象通过iframe函数嵌入于所述第一模块。
图8是根据一示例性实施例示出的一种页面渲染显示装置的结构图。参照图8，该装置包括页面信息获取单元10、第一适配单位确定单元21、第一尺寸数值确定单元22、第一尺寸计算单元23和第一尺寸调整渲染单元24。
页面信息获取单元10，被配置为执行获取在当前显示窗口待渲染的页面的页面信息，所述页面信息包括组成页面的多个模块、各模块内显示的对象、各模块内显示的对象采用的适配单位及所述对象在标准窗口中的尺寸，所述对象包括页面元素或嵌套的另一个模块；
第一适配单位确定单元21，被配置为执行对第一模块所占区域进行渲染后，确定所述第一模块内显示的对象采用指定类型的第一适配单位时，根据在所述当前显示窗口中所述第一模块所占区域被渲染的尺寸，确定所述对象的第一适配单位的像素数量；
第一尺寸数值确定单元22，被配置为执行根据所述对象在所述标准窗口中的尺寸和所述标准窗口中所述第一适配单位的像素数量，确定所述对象的第一适配单位的单位数量；
第一尺寸计算单元23，被配置为执行根据所述对象的第一适配单位的单位数量和像素数量，确定所述对象的所占原始区域；
第一尺寸调整渲染单元24，被配置为执行利用调整系数，调整所述对象所占原始区域后得到所述对象所占区域后，对所述对象所占区域进行渲染显示；
其中，所述第一模块为所述页面中的任一个模块，所述调整系数为所述标准窗口的尺寸，与所述第一模块在所述标准窗口中的尺寸两者之间的比例。
可选地，所述利用所述调整系数，调整所述对象所占原始区域后得到所述对象所占区域，包括：
利用所述调整系数调整所述对象的第一适配单位的像素数量，利用调整后的像素数量和所述单位数量，得到所述对象所占区域；或者
利用所述调整系数调整所述对象的第一适配单位的单位数量，利用调整后的单位数量和所述像素数量，得到调整后的所述对象所占区域；或者
根据所述对象的第一适配单位的所述单位数量和像素数量得到所述对象的原始区域，利用所述调整系数调整所述对象的原始区域，得到所述对象所占区域。
可选地，所述的页面渲染显示装置还包括：
第二适配单位确定单元25，被配置为执行对第一模块所占区域进行渲染后，确定所述第一模块内显示的对象采用指定类型的第二适配单位时，根据所述当前显示窗口的尺寸，确定所述第二适配单位的像素数量；
第二尺寸数值确定单元26，被配置为执行根据所述对象在所述标准窗口中的尺寸和所述标准窗口中所述第二适配单位的像素数量，确定所述对象的第二适配单位的单位数量；
第二尺寸渲染单元27，被配置为执行根据所述对象的第二适配单位的单位数量和像素数量，得到所述对象所占区域，对所述对象所占区域进行渲染显示。
可选地，所述第一适配单位为根强调Rem单位。
可选地，所述第二适配单位为视口Viewport适配单位。
可选地，所述的页面渲染显示装置还包括：
第三适配单位确定单元11，被配置为执行渲染未嵌套于第一模块的对象时，确定所述对象采用指定类型的第三适配单位时，根据所述当前显示窗口的尺寸，确定所述第三适配单位的像素数量；
第三尺寸数值确定单元12，被配置为执行根据所述对象在所述标准窗口中的尺寸和所述标准窗口中所述第三适配单位的像素数量，确定所述对象的第三适配单位的单位数量；
第三尺寸渲染单元13，被配置为执行根据所述对象的第三适配单位的单位数量和像素数量，得到所述对象所占区域，对所述对象所占区域进行渲染显示。
可选地，得到所述对象所占区域并进行渲染显示，包括：
根据所述页面信息，确定所述对象所占区域指定位置像素点在所述当前显示窗口的位置信息；
根据所述位置信息确定所述指定位置像素点在所述当前显示窗口的位置；
根据所述指定位置像素点与所述对象所占区域其他像素点的关系，得到所述对象所占区域在所述当前显示窗口的位置，并进行渲染显示。
可选地，所述利用所述调整系数，调整所述对象所占原始区域后得到所述对象所占区域，具体为：
width＝widthValue×fontsize×coefficient
height＝heightValue×fontsize×coefficient
其中，width表示所述对象所占区域的宽度，height表示所述对象所占区域的高度，widthValue表示所述对象在所述标准页面中在宽度方向上占用的所述第一适配单位的单位数量，heightValue表示所述对象在所述标准页面中在高度方向上占用的所述第一适配单位的单位数量，fontsize表示所述对象的第一适配单位的像素数量，coefficient表示所述调整系数。
可选地，所述调整系数为：
Figure BDA0003146307860000231
其中，根据在所述当前显示窗口中所述第一模块所占区域被渲染的宽度，确定所述对象的第一适配单位的像素数量时，l表示所述标准页面中的所述第一模块的宽度，L表示所述标准页面宽度；
或者，根据在所述当前显示窗口中所述第一模块所占区域被渲染的高度，确定所述对象的第一适配单位的像素数量时，l表示所述标准页面中的所述第一模块的高度，L表示所述标准页面高度。
可选地，所述对象为嵌套的另一个模块时，所述对象通过iframe函数嵌入于所述第一模块。
关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
图9是根据一示例性实施例示出的一种电子设备的结构示意图。如图9所示，所述电子设备包括：
处理器110和用于存储所述处理器110可执行指令的存储器120；
其中，所述处理器110被配置为执行所述指令，以实现所述的页面渲染显示方法。
在具体实施过程中，所述设备可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器110和存储器120，一个或一个以上存储介质130，所述存储器120和/或所述存储介质130存储有(图9中未示出)一个或一个以上操作系统101、数据102和应用程序103。所述操作系统101可以为例如Windows、MacOS、Linux、IOS、Android、Unix、FreeBSD等。其中，存储器120和存储介质130可以是短暂存储或持久存储。存储在存储器120和/或所述存储介质130的应用程序103可以包括一个或一个以上所述模块(图9中未示出)，每个模块可以包括对所述页面渲染显示装置中的一系列指令操作。更进一步地，处理器110可以设置为与存储介质130通信，在所述设备上执行存储介质130中的一系列指令操作。所述设备还可以包括一个或一个以上电源(图9中未示出)；一个或一个以上收发器140，所述收发器140包括有线或无线网络接口141，一个或一个以上输入输出接口142。
在示例性实施例中，还提供了一种包括指令的计算机可读存储介质，例如包括指令的存储器120，上述指令可由处理器110执行以完成上述页面渲染显示方法。
可选地，存储介质可以是非临时性计算机可读存储介质，例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。
在示例性实施例中，还提供一种计算机程序产品，包括计算机指令，所述计算机指令被处理器执行时实现所述的页面渲染显示方法。
本公开实施例提供的页面渲染显示方法、装置、设备、存储介质和程序产品，通过根据在所述标准窗口中的模块与标准窗口尺寸的比例关系，利用调整系数调整模块中以第一适配单位适配的页面元素或嵌套的另一个模块的原始区域后进行渲染显示，实现了具有以第一适配单位适配的模块的页面在不同尺寸的电子设备上显示效果，与以标准窗口尺寸显示时相近的显示效果。
本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。
应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (10)

1.一种页面渲染显示方法，其特征在于，包括：
获取在当前显示窗口待渲染的页面的页面信息，所述页面信息包括组成页面的多个模块、各模块内显示的对象、各模块内显示的对象采用的适配单位及所述对象在标准窗口中的尺寸，所述对象包括页面元素或嵌套的另一个模块；
对第一模块所占区域进行渲染后，确定所述第一模块内显示的对象采用指定类型的第一适配单位时，根据在所述当前显示窗口中所述第一模块所占区域被渲染的尺寸，确定所述对象的第一适配单位的像素数量；
根据所述对象在所述标准窗口中的尺寸和所述标准窗口中所述第一适配单位的像素数量，确定所述对象的第一适配单位的单位数量；
根据所述对象的第一适配单位的单位数量和像素数量，确定所述对象的所占原始区域；
利用调整系数，调整所述对象所占原始区域后得到所述对象所占区域后，对所述对象所占区域进行渲染显示；
其中，所述第一模块为所述页面中的任一个模块，所述调整系数为所述标准窗口的尺寸，与所述第一模块在所述标准窗口中的尺寸两者之间的比例。
2.如权利要求1所述的页面渲染显示方法，其特征在于，所述利用所述调整系数，调整所述对象所占原始区域后得到所述对象所占区域，包括：
利用所述调整系数调整所述对象的第一适配单位的像素数量，利用调整后的像素数量和所述单位数量，得到所述对象所占区域；或者
利用所述调整系数调整所述对象的第一适配单位的单位数量，利用调整后的单位数量和所述像素数量，得到调整后的所述对象所占区域；或者
根据所述对象的第一适配单位的所述单位数量和像素数量得到所述对象的原始区域，利用所述调整系数调整所述对象的原始区域，得到所述对象所占区域。
3.如权利要求1-2任一项所述的页面渲染显示方法，其特征在于，所述得到所述对象所占区域并进行渲染显示，包括：
根据所述页面信息，确定所述对象所占区域指定位置像素点在所述当前显示窗口的位置信息；
根据所述位置信息确定所述指定位置像素点在所述当前显示窗口的位置；
根据所述指定位置像素点与所述对象所占区域其他像素点的关系，得到所述对象所占区域在所述当前显示窗口的位置，并进行渲染显示。
4.如权利要求1所述的页面渲染显示方法，其特征在于，所述利用所述调整系数，调整所述对象所占原始区域后得到所述对象所占区域，具体为：
width＝widthValue×fontsize×coefficient
height＝heightValue×fontsize×coefficient
其中，width表示所述对象所占区域的宽度，height表示所述对象所占区域的高度，widthValue表示所述对象在所述标准页面中在宽度方向上占用的所述第一适配单位的单位数量，heightValue表示所述对象在所述标准页面中在高度方向上占用的所述第一适配单位的单位数量，fontsize表示所述对象的第一适配单位的像素数量，coefficient表示所述调整系数。
5.如权利要求4所述的页面渲染显示方法，其特征在于，所述调整系数为：
Figure FDA0003146307850000021
其中，根据在所述当前显示窗口中所述第一模块所占区域被渲染的宽度，确定所述对象的第一适配单位的像素数量时，l表示所述标准页面中的所述第一模块的宽度，L表示所述标准页面宽度；
或者，根据在所述当前显示窗口中所述第一模块所占区域被渲染的高度，确定所述对象的第一适配单位的像素数量时，l表示所述标准页面中的所述第一模块的高度，L表示所述标准页面高度。
6.如权利要求1所述的页面渲染显示方法，其特征在于，所述对象为嵌套的另一个模块时，所述对象通过iframe函数嵌入于所述第一模块。
7.一种页面渲染显示装置，其特征在于，包括：
页面信息获取单元，被配置为执行获取在当前显示窗口待渲染的页面的页面信息，所述页面信息包括组成页面的多个模块、各模块内显示的对象、各模块内显示的对象采用的适配单位及所述对象在标准窗口中的尺寸，所述对象包括页面元素或嵌套的另一个模块；
第一适配单位确定单元，被配置为执行对第一模块所占区域进行渲染后，确定所述第一模块内显示的对象采用指定类型的第一适配单位时，根据在所述当前显示窗口中所述第一模块所占区域被渲染的尺寸，确定所述对象的第一适配单位的像素数量；
第一尺寸数值确定单元，被配置为执行根据所述对象在所述标准窗口中的尺寸和所述标准窗口中所述第一适配单位的像素数量，确定所述对象的第一适配单位的单位数量；
第一尺寸计算单元，被配置为执行根据所述对象的第一适配单位的单位数量和像素数量，确定所述对象的所占原始区域；
第一尺寸调整渲染单元，被配置为执行利用调整系数，调整所述对象所占原始区域后得到所述对象所占区域后，对所述对象所占区域进行渲染显示；
其中，所述第一模块为所述页面中的任一个模块，所述调整系数为所述标准窗口的尺寸，与所述第一模块在所述标准窗口中的尺寸两者之间的比例。
8.一种电子设备，其特征在于，包括：
处理器；
用于存储所述处理器可执行指令的存储器；
其中，所述处理器被配置为执行所述指令，以实现如权利要求1-6任一项所述的页面渲染显示方法。
9.一种计算机可读存储介质，其特征在于，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如权利要求1-6中任一项所述的页面渲染显示方法。
10.一种计算机程序产品，包括计算机指令，其特征在于，所述计算机指令被处理器执行时实现权利要求1-6任一项所述的页面渲染显示方法。
CN202110751182.6A 2021-07-02 2021-07-02 页面渲染显示方法、装置、设备、存储介质和程序产品 Active CN113486280B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110751182.6A CN113486280B (zh) 2021-07-02 2021-07-02 页面渲染显示方法、装置、设备、存储介质和程序产品

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110751182.6A CN113486280B (zh) 2021-07-02 2021-07-02 页面渲染显示方法、装置、设备、存储介质和程序产品

Publications (2)

Publication Number Publication Date
CN113486280A true CN113486280A (zh) 2021-10-08
CN113486280B CN113486280B (zh) 2024-07-23

Family

ID=77940408

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110751182.6A Active CN113486280B (zh) 2021-07-02 2021-07-02 页面渲染显示方法、装置、设备、存储介质和程序产品

Country Status (1)

Country Link
CN (1) CN113486280B (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114201257A (zh) * 2021-12-10 2022-03-18 拉扎斯网络科技（上海）有限公司 内容渲染方法、装置、电子设备、存储介质和程序产品
CN114510311A (zh) * 2022-02-16 2022-05-17 掌阅科技股份有限公司 页面适配显示方法、计算设备及存储介质
WO2024061088A1 (zh) * 2022-09-19 2024-03-28 北京字跳网络技术有限公司 显示方法、装置、电子设备以及存储介质
CN117850722A (zh) * 2023-12-29 2024-04-09 北京航星永志科技有限公司 显示控件的显示方法、装置及设备

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1794342A (zh) * 2004-11-04 2006-06-28 国际商业机器公司 用于在视频图形适配器上渲染图像的方法和系统
CN104978433A (zh) * 2015-07-16 2015-10-14 无锡天脉聚源传媒科技有限公司 一种网页显示方法及装置
CN105468382A (zh) * 2016-02-01 2016-04-06 浙江慧脑信息科技有限公司 一种自适应布局的编程方法
CN105912336A (zh) * 2016-04-11 2016-08-31 江苏中威科技软件系统有限公司 一种移动端前端开发多屏适配方法
CN111258582A (zh) * 2020-02-10 2020-06-09 北京字节跳动网络技术有限公司 一种窗口渲染方法、装置、计算机设备及存储介质
CN112181568A (zh) * 2020-09-27 2021-01-05 上海连尚网络科技有限公司 局部适配屏幕方法和设备

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1794342A (zh) * 2004-11-04 2006-06-28 国际商业机器公司 用于在视频图形适配器上渲染图像的方法和系统
CN104978433A (zh) * 2015-07-16 2015-10-14 无锡天脉聚源传媒科技有限公司 一种网页显示方法及装置
CN105468382A (zh) * 2016-02-01 2016-04-06 浙江慧脑信息科技有限公司 一种自适应布局的编程方法
CN105912336A (zh) * 2016-04-11 2016-08-31 江苏中威科技软件系统有限公司 一种移动端前端开发多屏适配方法
CN111258582A (zh) * 2020-02-10 2020-06-09 北京字节跳动网络技术有限公司 一种窗口渲染方法、装置、计算机设备及存储介质
CN112181568A (zh) * 2020-09-27 2021-01-05 上海连尚网络科技有限公司 局部适配屏幕方法和设备

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114201257A (zh) * 2021-12-10 2022-03-18 拉扎斯网络科技（上海）有限公司 内容渲染方法、装置、电子设备、存储介质和程序产品
CN114510311A (zh) * 2022-02-16 2022-05-17 掌阅科技股份有限公司 页面适配显示方法、计算设备及存储介质
WO2024061088A1 (zh) * 2022-09-19 2024-03-28 北京字跳网络技术有限公司 显示方法、装置、电子设备以及存储介质
CN117850722A (zh) * 2023-12-29 2024-04-09 北京航星永志科技有限公司 显示控件的显示方法、装置及设备
CN117850722B (zh) * 2023-12-29 2024-08-16 北京航星永志科技有限公司 显示控件的显示方法、装置及设备

Also Published As

Publication number Publication date
CN113486280B (zh) 2024-07-23

Similar Documents

Publication Publication Date Title
CN113486280B (zh) 页面渲染显示方法、装置、设备、存储介质和程序产品
US10339209B2 (en) Webpage display method and device
US9111007B2 (en) Adaptive rendering of a webpage on an electronic display device
CN106095437B (zh) 用户界面从右到左rtl的布局方式的实现方法及装置
CN106681706B (zh) 应用进度处理方法及终端
JP2007521564A (ja) フリー・フォーム・レイアウトを有するアプリケーション・ユーザ・インターフェース・テンプレート
CN104820589B (zh) 一种动态适配网页的方法及其装置
CN113127784B (zh) 大屏数据可视化显示方法、装置、存储介质和计算机设备
US9773072B2 (en) Systems and methods for developing adaptive layouts for electronic content
CN106874519A (zh) 页面展现方法和装置
CN111459501A (zh) 基于SVG的Web组态画面存储与展示系统和方法及介质
CN111352627B (zh) 一种页面骨架屏生成方法、装置、设备及可读存储介质
CN107450904A (zh) 标题栏的绘制方法和装置
CN110457408B (zh) 个性化地图下载方法、装置、设备及存储介质
CN111209009B (zh) 内容发布方法及装置、存储介质及电子设备
CN111651107A (zh) 一种3d模型前端显示方法、装置、设备及介质
CN113096217B (zh) 图片生成方法、装置、电子设备以及存储介质
CN112799745B (zh) 一种页面显示控制方法及装置
US20060274088A1 (en) Method for drawing graphics in a web browser or web application
CN110020285B (zh) 柱状图的处理方法及装置
CN108958875B (zh) 一种页面显示方法、装置、电子设备及存储介质
CN112416503A (zh) 小程序图标显示方法、装置、设备与计算机可读存储介质
CN113934339A (zh) 一种基于rem的页面自适应布局的方法及装置
CN106445269B (zh) 移动终端的状态栏显示方法及移动终端
CN112395033B (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
GR01 Patent grant
GR01 Patent grant