CN110309449A - 页面渲染方法及装置 - Google Patents
页面渲染方法及装置 Download PDFInfo
- Publication number
- CN110309449A CN110309449A CN201810138617.8A CN201810138617A CN110309449A CN 110309449 A CN110309449 A CN 110309449A CN 201810138617 A CN201810138617 A CN 201810138617A CN 110309449 A CN110309449 A CN 110309449A
- Authority
- CN
- China
- Prior art keywords
- content
- response type
- font size
- page
- realizing
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 35
- 238000009877 rendering Methods 0.000 title claims abstract description 30
- 230000004044 response Effects 0.000 claims abstract description 79
- 238000012545 processing Methods 0.000 claims abstract description 14
- 238000013461 design Methods 0.000 claims description 12
- 230000001105 regulatory effect Effects 0.000 claims description 4
- 239000004744 fabric Substances 0.000 claims 1
- 230000006870 function Effects 0.000 description 36
- 230000000875 corresponding effect Effects 0.000 description 21
- 238000011161 development Methods 0.000 description 13
- 230000008859 change Effects 0.000 description 7
- 230000008569 process Effects 0.000 description 7
- 238000010586 diagram Methods 0.000 description 6
- 230000003044 adaptive effect Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 238000012544 monitoring process Methods 0.000 description 2
- OKTJSMMVPCPJKN-UHFFFAOYSA-N Carbon Chemical compound [C] OKTJSMMVPCPJKN-UHFFFAOYSA-N 0.000 description 1
- 241001269238 Data Species 0.000 description 1
- 230000002411 adverse Effects 0.000 description 1
- 238000013459 approach Methods 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 230000002596 correlated effect Effects 0.000 description 1
- 235000013399 edible fruits Nutrition 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 239000011521 glass Substances 0.000 description 1
- 229910021389 graphene Inorganic materials 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 229920001690 polydopamine Polymers 0.000 description 1
- 239000004984 smart glass Substances 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
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/957—Browsing optimisation, e.g. caching or content distillation
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Controls And Circuits For Display Device (AREA)
Abstract
本说明书一个或多个实施例提供一种页面渲染方法及装置，该方法可以包括：获取待渲染页面对应的页面数据，所述页面数据中包含用于实现响应式布局功能的内容；当所述页面数据包含的内容模块引用用于实现所述响应式布局功能的内容时，按照被引用内容所指示的布局方式，对所述内容模块实施相应的响应式布局处理。
Description
技术领域
本说明书一个或多个实施例涉及终端技术领域，尤其涉及一种页面渲染方法及装置。
背景技术
在相关技术中，响应式布局(Responsive Layout)被越来越多地应用于页面开发中。通过对电子设备上的视窗规格进行检测，可使页面内容实现适应性的自动调节，以满足各种视窗规格下的展示需求。
发明内容
有鉴于此，本说明书一个或多个实施例提供一种页面渲染方法及装置。
为实现上述目的，本说明书一个或多个实施例提供技术方案如下：
根据本说明书一个或多个实施例的第一方面，提出了一种页面渲染方法，包括：
获取待渲染页面对应的页面数据，所述页面数据中包含用于实现响应式布局功能的内容；
当所述页面数据包含的内容模块引用用于实现所述响应式布局功能的内容时，按照被引用内容所指示的布局方式，对所述内容模块实施相应的响应式布局处理。
根据本说明书一个或多个实施例的第二方面，提出了一种页面渲染装置，包括：
获取单元，获取待渲染页面对应的页面数据，所述页面数据中包含用于实现响应式布局功能的内容；
处理单元，当所述页面数据包含的内容模块引用用于实现所述响应式布局功能的内容时，按照被引用内容所指示的布局方式，对所述内容模块实施相应的响应式布局处理。
附图说明
图1是一示例性实施例提供的一种网络系统的架构示意图。
图2是一示例性实施例提供的一种页面渲染方法的流程图。
图3是一示例性实施例提供的一种对网页内容实现响应式渲染展示方案的交互示意图。
图4是一示例性实施例提供的一种设备的结构示意图。
图5是一示例性实施例提供的一种页面渲染装置的框图。
具体实施方式
这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本说明书一个或多个实施例相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本说明书一个或多个实施例的一些方面相一致的装置和方法的例子。
需要说明的是：在其他实施例中并不一定按照本说明书示出和描述的顺序来执行相应方法的步骤。在一些其他实施例中，其方法所包括的步骤可以比本说明书所描述的更多或更少。此外，本说明书中所描述的单个步骤，在其他实施例中可能被分解为多个步骤进行描述；而本说明书中所描述的多个步骤，在其他实施例中也可能被合并为单个步骤进行描述。
图1是一示例性实施例提供的一种网络系统的架构示意图。如图1所示，该系统可以包括服务器11、网络12、若干电子设备，比如PC131、PC132等开发设备13，以及手机141、手机142等用户设备14。
服务器11可以为包含一独立主机的物理服务器，或者该服务器11可以为主机集群承载的虚拟服务器。PC131-132只是开发者可以使用的一种类型的开发设备13；实际上，开发者还可以采用诸如平板设备、笔记本电脑、手机、掌上电脑(PDAs，Personal DigitalAssistants)、可穿戴设备(如智能眼镜、智能手表等)等其他任意类型的开发设备13，本说明书并不对此进行限制。手机141-142只是用户可以使用的一种类型的用户设备14；实际上，用户还可以采用诸如平板设备、笔记本电脑、PC、掌上电脑、可穿戴设备(如智能眼镜、智能手表等)等其他任意类型的开发设备13，本说明书并不对此进行限制。而对于PC131-132、手机141-142与服务器11之间进行交互的网络12，可以包括多种类型的有线或无线网络。在一实施例中，该网络12可以包括公共交换电话网络(Public Switched TelephoneNetwork，PSTN)和因特网。
其中，开发设备13可供开发者对本说明书所涉及的待渲染页面进行开发，并提供开发得到的可支持本说明书的页面渲染方案的页面数据。在一实施例中，用户设备14可以向服务器11发起针对待渲染页面的页面数据获取请求，使得服务器11获取由开发者提供的页面数据，并返回给用户设备14；相应地，用户设备14可以基于本说明书的页面渲染方案对获得的页面数据进行渲染，比如通过该用户设备14上运行的浏览器对该页面数据予以渲染，使得该待渲染页面可以基于用户设备14的实际视窗规格而实现响应式的自动调整，有助于提升用户的浏览体验。
图2是一示例性实施例提供的一种页面渲染方法的流程图。如图2所示，该方法应用于用户设备(比如图1所示的手机141-142等)，可以包括以下步骤：
步骤202，获取待渲染页面对应的页面数据，所述页面数据中包含用于实现响应式布局功能的内容。
在一实施例中，用户设备可以通过向服务器发送页面数据获取请求，以得到服务器返回的页面数据。在其他实施例中，用户设备可以通过其他途径获得页面数据，比如从本地存储空间获得该页面数据等，本说明书并不对此进行限制。
在一实施例中，可由用户设备上的浏览器对页面数据进行渲染，以向用户展示相应的待渲染页面。在其他实施例中，可由用户设备通过其他方式对待渲染页面进行渲染，本说明书并不对此进行限制。
步骤204，当所述页面数据包含的内容模块引用用于实现所述响应式布局功能的内容时，按照被引用内容所指示的布局方式，对所述内容模块实施相应的响应式布局处理。
在一实施例中，通过在页面数据中包含用于实现响应式布局功能的内容，使得该页面数据包含的内容模块可以通过引用该用于实现响应式布局功能的内容，可以对该内容模块实施相应的响应式布局处理，而该内容模块不会受到页面数据中的其他内容所影响，且该用于实现响应式布局功能的内容不会影响该页面数据中未引用该内容的其他内容模块。
在一实施例中，页面数据中可以包含多个用于实现响应式布局功能的内容，使得页面数据中的不同内容模块可以根据实际需求选择所需引用的内容，以实现相应的响应式布局处理。
在一实施例中，用于实现所述响应式布局功能的内容可以为预定义的类，可以通过在内容模块的最外层引用该预定义的类，从而使得该内容模块实现被引用的类对应的响应式布局处理。
在一实施例中，用于实现所述响应式布局功能的内容可以包括：字体尺寸限定信息，所述字体尺寸限定信息用于将字体尺寸限定为与所述待渲染页面的目标渲染设备的实际视窗规格相关；相应地，所述内容模块可以包括：针对页面元素的样式属性的取值设定信息，所述取值设定信息以所述字体尺寸限定信息限定的字体尺寸为单位规格。那么，当实际视窗规格存在变动时，可使内容模块包含的样式属性的取值设定信息发生相应变化，以满足响应式布局方案的适应性变化需求。同时，由于样式属性的取值设定信息以字体尺寸限定信息限定的字体尺寸为单位规格，而该字体尺寸限定信息包含于被引用的内容中，使得样式属性的取值设定信息仅受到该字体尺寸限定信息的限定、不会受到页面数据中其他内容的影响，并且对于对相关内容进行引用的其他内容模块，不会受到该字体尺寸限定信息的影响。
在一实施例中，用于实现所述响应式布局功能的内容包括：强制指示信息，所述强制指示信息用于将所述取值设定信息采用的单位规格强制限定为所述字体尺寸限定信息限定的字体尺寸，从而避免取值设定信息采用的单位规格受到页面数据中其他内容的影响。
在一实施例中，所述取值设定信息包括：与所述内容模块的设计稿所参照的初始视窗规格相关的缩放变量，以使所述样式属性的取值根据所述实际视窗规格与所述初始视窗规格之比实现响应式变化。例如，所述取值设定信息可以符合下述公式：
其中，x为所述取值设定信息，a为自定义的取值调节变量，em为所述字体尺寸限定信息限定的字体尺寸，@fz为所述缩放变量，g为所述实际视窗规格，h为所述初始视窗规格。通过设定a的取值，可以调节取值设定信息x的取值。
在一实施例中，em＝g/b，@fz＝h/b，其中b为自定义的缩放比例系数。通过设定b的取值，可以控制设计稿中各个样式属性的取值大小，使其落入合理的数值范围。同时，通过使得字体尺寸限定信息限定的字体尺寸(即em)与缩放变量(即@fz)采用相同的缩放比例系数b，可以在计算取值设定信息x时使得em与@fz中包含的b被约去，从而基于g/h(即实际视窗规格与初始视窗规格之比)对x的取值实现响应式的自动调节。
在一实施例中，用于实现所述响应式布局功能的内容可以记载于所述页面数据的页头部分，使得该页面数据被载入时可以优先执行用于实现所述响应式布局功能的内容，从而更早针对内容模块实施响应式的自动调节，避免由于延迟实现该自动调节而导致待渲染页面在展示时出现闪烁等现象，防止影响用户的应用体验。
为了便于理解，以浏览器对网页内容的响应式渲染展示过程为例，对本说明书一个或多个实施例的技术方案进行说明。例如，图3是一示例性实施例提供的一种对网页内容实现响应式渲染展示方案的交互示意图。如图3所示，该方案应用于开发设备、服务器和用户设备上；其中，由开发者通过开发设备开发得到网页对应的网页数据，该网页数据可以支持本说明书的页面渲染方案，使得用户设备从服务器处请求得到该网页数据后，可由用户设备上的浏览器基于该网页数据实现响应式的页面渲染展示。具体地，开发设备、服务器与用户设备之间的交互过程可以包括以下步骤：
步骤301，由开发者通过开发设备实现模块样式开发。
在一实施例中，开发者可以根据网页存在的开发需求，分别开发网页内所需包含的各个内容模块。其中，针对每一内容模块，开发者可以根据需求对其模块样式进行开发。
例如，假定开发者需要设定内容模块中的某一对象box的宽度和边缘距离，可以通过下述语句进行表达：
.box{
width：100em/@fz
margin：8em/@fz
}
其中，width对应于该对象box的宽度、margin对应于该对象box的边缘距离，而宽度的取值为100em/@fz、边缘距离的取值为8em/@fz。可见，该宽度与边缘距离的取值，都遵循于下述公式：
其中，x为取值设定信息，比如x可以为上述的width或margin。a为自定义的取值调节变量，比如x＝width时、a＝100，x＝margin时、a＝8，从而通过调节a的取值，可以对该width、margin等各个样式属性的取值进行大小调节。em的数值取决于父级元素设定的字体规格(font-size)，在下文所描述的步骤中，开发者可以通过对em的配置，使其与网页渲染时的实际视窗规格g相关联；@fz为本说明书中定义的缩放变量，@fz与设计稿参照的初始视窗规格h相关联，因而使得开发者仅需要提供基于初始视窗规格h设计得到的设计稿，即可根据该初始视窗规格h、实际视窗规格g之间的数值关系，将设计稿响应式地自动适应于该实际视窗规格g，实现本说明书的响应式页面渲染方案。
配合于本说明书所采用的技术方案，可以设定@fz＝设计稿参照的初始视窗规格/缩放比例系数＝h/b。其中，b为自定义的缩放比例系数，比如可以选取b＝16px(像素)，从而使得@fz的取值、x的取值均能够处于合理的数值范围，便于实施对设计稿的设计开发工作。
步骤302，由开发者通过开发设备配置响应式布局功能。
在一实施例中，开发者可以通过配置响应式布局功能，使得网页数据中的内容模块可以基于该响应式布局功能实现相应的响应式页面渲染方案。同时，本说明书希望提供一种通用模块的响应式页面渲染方案，使得该响应式布局功能不会受到页面数据中的其他内容所影响，且该响应式布局功能不会对页面数据中的其他内容造成不良影响。
在一实施例中，本说明书可以基于“类(class)”的定义和引用，使得开发者得到的网页数据能够满足上述需求。例如，开发者可以将用于实现响应式布局功能的方法创建为相应的类，比如下文中均称为auto-response-fz；相应地，当开发者希望网页数据中的任一内容模块实现响应式页面渲染方案时，均可以在该内容模块的最外层对该auto-response-fz进行引用(比如在最外层添加<div class＝"auto-response-fz">)，即可使得该内容模块应用上述的响应式布局功能，从而实现响应式页面渲染方案。
在一实施例中，上述的响应式布局功能可以通过下述语句进行表达：
【1】(function(){
【2】var styleNode＝document.createElement('style')；
【3】document.head.appendChild(styleNode)；
【4】var autoResponseFontsize＝function(){
【5】styleNode.innerHTML＝'.auto-response-fz{font-size:'+(document.documentElement.clientWidth/16)+'px！important；}'；
【6】}
【7】autoResponseFontsize()；
【8】window.addEventListener("resize",autoResponseFontsize)；
【9】window.addEventListener("onorientationchange",autoResponseFontsize)；
【10】})()；
在上述表达所包含的10行语句中，由第【1】-【7】行语句所实现的功能为：定义了上述的类auto-response-fz的内容为：将字体规格font-size限定为实际视窗规格(document.documentElement.clientWidth，下文用字符g来替代)/缩放比例系数b。其中，缩放比例系数b与步骤301中提及的“缩放比例系数”相同，而作为示例性说明，语句【5】中将缩放比例系数赋值为b＝16(即16px)。可见，通过对auto-response-fz设定上述内容，使得网页数据的内容模块在引用auto-response-fz时，可以将字体规格限定为g/b，并且可以通过在语句【5】中通过“px！important”对该字体规格的限定进行强制实施，从而使得网页数据中其他部分即便存在对于字体规格的其他限定，该其他限定也不会影响引用了auto-response-fz的内容模块，因而引用了auto-response-fz的内容模块必然满足em＝font-size＝g/b。
结合步骤301中对于模块样式的设定公式为并且@fz＝设计稿参照的初始视窗规格/缩放比例系数＝h/b，可以确定：
可见，通过在步骤301和步骤302中采用相同的缩放比例系数b，可以最终使得x的取值中消除b、正相关于实际视窗规格与初始视窗规格之比(即g/h)；换言之，当视窗发生规格变化时，模块样式的取值可以基于实际视窗规格与初始视窗规格之比自动实现响应式的适应性变化。同时，可以确定只要在步骤301与步骤302中采用相同的缩放比例系数b，即可确保满足响应式变化需求，而b的取值可以根据实际情况进行设定，本说明书并不对此进行限制。
其中，上述语句【8】-【9】用于实现对实际视窗规格的监听，以及基于监听结果的响应式变化。例如，语句【8】用于监听实际视窗规格的变化，当实际视窗规格发生变化时，通过调用语句【7】定义的autoResponseFontsize，进而实施auto-response-fz的功能内容，使得应用该auto-response-fz的内容模块均可以随之实现响应式的自动调节。
步骤303，由开发者通过开发设备生成网页数据。
在一实施例中，开发者可以将步骤302定义的响应式布局功能的相关语句添加在网页数据的页头部分，使得该网页数据被渲染时，能够更早地执行响应式布局功能，避免由于延迟执行而导致网页发生闪烁等不良现象，影响用户体验。
步骤304，由开发者通过开发设备将网页数据存入数据库。
在一实施例中，开发者可以通过将网页数据存入服务器相关联的数据库中，使得服务器可以从该数据库随时调用该网页数据。当然，开发者还可以将网页数据存入服务器相关联的其他存储空间，只要服务器可以根据实际需求对该网页数据进行调用即可，本说明书并不对此进行限制。
步骤305，用户设备获得网页URL。
在一实施例中，该网页URL可由用户向浏览器中手动输入得到，或者该网页URL可由用户触发相应的网页超链接而得到，或者用户设备可以通过其他方式获得该网页URL，本说明书并不对此进行限制。
步骤306，服务器接收用户设备发起的网页数据请求。
在一实施例中，除了触发网页URL之外，用户设备还可以通过其他方式向服务器发起网页数据请求，本说明书并不对此进行限制。
步骤307，服务器返回对应于网页数据请求的网页数据。
步骤308，用户设备加载并渲染网页数据。
在一实施例中，用户设备上运行的浏览器可以对该网页数据进行加载，并在浏览器上渲染展示相应的网页内容，以供用户进行查看或操作。
在一实施例中，当网页数据的页头或其他部分包含步骤302添加的响应式布局功能时，并且网页数据中的至少一个内容模块的最外层引用了auto-response-fz，那么该用户设备上运行的浏览器可以根据实际视窗规格与设计稿对应的初始视窗规格，确定出对设计稿实施的缩放比例，从而使得网页能够适应于当前的实际视窗规格，而不需要针对各种视窗规格分别开发不同的网页数据。
步骤309，用户设备监听是否发生视窗规格变化，或者是否发生横竖屏切换。
步骤310，当发生视窗规格变化或者横竖屏切换时，用户设备针对渲染的网页实施响应式调节。
在一实施例中，通过步骤302中提供的语句【8】-【9】，用户设备可以监听实际视窗规格是否发生变化，包括由用户拖拽浏览器窗口造成的视窗规格变化或者用户设备的横竖屏切换而导致的视窗规格变化等，从而响应于视窗规格变化，自动调节所渲染的网页，使其适应于变化后的视窗规格，有助于优化用户的使用体验。
图4是一示例性实施例提供的一种设备的示意结构图。请参考图4，在硬件层面，该设备包括处理器402、内部总线404、网络接口406、内存408以及非易失性存储器410，当然还可能包括其他业务所需要的硬件。处理器402从非易失性存储器410中读取对应的计算机程序到内存408中然后运行，在逻辑层面上形成页面渲染装置。当然，除了软件实现方式之外，本说明书一个或多个实施例并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。
请参考图5，在软件实施方式中，该页面渲染装置可以包括：
获取单元501，获取待渲染页面对应的页面数据，所述页面数据中包含用于实现响应式布局功能的内容；
处理单元502，当所述页面数据包含的内容模块引用用于实现所述响应式布局功能的内容时，按照被引用内容所指示的布局方式，对所述内容模块实施相应的响应式布局处理。
可选的，
用于实现所述响应式布局功能的内容包括：字体尺寸限定信息，所述字体尺寸限定信息用于将字体尺寸限定为与所述待渲染页面的目标渲染设备的实际视窗规格相关；
所述内容模块包括：针对页面元素的样式属性的取值设定信息，所述取值设定信息以所述字体尺寸限定信息限定的字体尺寸为单位规格。
可选的，用于实现所述响应式布局功能的内容包括：
强制指示信息，所述强制指示信息用于将所述取值设定信息采用的单位规格强制限定为所述字体尺寸限定信息限定的字体尺寸。
可选的，所述取值设定信息包括：与所述内容模块的设计稿所参照的初始视窗规格相关的缩放变量，以使所述样式属性的取值根据所述实际视窗规格与所述初始视窗规格之比实现响应式变化。
可选的，所述取值设定信息符合下述公式：
其中，x为所述取值设定信息，a为自定义的取值调节变量，em为所述字体尺寸限定信息限定的字体尺寸，@fz为所述缩放变量，g为所述实际视窗规格，h为所述初始视窗规格。
可选的，em＝g/b，@fz＝h/b，其中b为自定义的缩放比例系数。
可选的，用于实现所述响应式布局功能的内容记载于所述页面数据的页头部分。
可选的，用于实现所述响应式布局功能的内容为预定义的类。
上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机，计算机的具体形式可以是个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件收发设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任意几种设备的组合。
在一个典型的配置中，计算机包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带、磁盘存储、量子存储器、基于石墨烯的存储介质或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。
在本说明书一个或多个实施例使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本说明书一个或多个实施例。在本说明书一个或多个实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
应当理解，尽管在本说明书一个或多个实施例可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本说明书一个或多个实施例范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。
以上所述仅为本说明书一个或多个实施例的较佳实施例而已，并不用以限制本说明书一个或多个实施例，凡在本说明书一个或多个实施例的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本说明书一个或多个实施例保护的范围之内。
Claims (16)
1.一种页面渲染方法，其特征在于，包括：
获取待渲染页面对应的页面数据，所述页面数据中包含用于实现响应式布局功能的内容；
当所述页面数据包含的内容模块引用用于实现所述响应式布局功能的内容时，按照被引用内容所指示的布局方式，对所述内容模块实施相应的响应式布局处理。
2.根据权利要求1所述的方法，其特征在于，
用于实现所述响应式布局功能的内容包括：字体尺寸限定信息，所述字体尺寸限定信息用于将字体尺寸限定为与所述待渲染页面的目标渲染设备的实际视窗规格相关；
所述内容模块包括：针对页面元素的样式属性的取值设定信息，所述取值设定信息以所述字体尺寸限定信息限定的字体尺寸为单位规格。
3.根据权利要求2所述的方法，其特征在于，用于实现所述响应式布局功能的内容包括：
强制指示信息，所述强制指示信息用于将所述取值设定信息采用的单位规格强制限定为所述字体尺寸限定信息限定的字体尺寸。
4.根据权利要求2所述的方法，其特征在于，所述取值设定信息包括：与所述内容模块的设计稿所参照的初始视窗规格相关的缩放变量，以使所述样式属性的取值根据所述实际视窗规格与所述初始视窗规格之比实现响应式变化。
5.根据权利要求4所述的方法，其特征在于，所述取值设定信息符合下述公式：
其中，x为所述取值设定信息，a为自定义的取值调节变量，em为所述字体尺寸限定信息限定的字体尺寸，@fz为所述缩放变量，g为所述实际视窗规格，h为所述初始视窗规格。
6.根据权利要求5所述的方法，其特征在于，em＝g/b，@fz＝h/b，其中b为自定义的缩放比例系数。
7.根据权利要求1所述的方法，其特征在于，用于实现所述响应式布局功能的内容记载于所述页面数据的页头部分。
8.根据权利要求1所述的方法，其特征在于，用于实现所述响应式布局功能的内容为预定义的类。
9.一种页面渲染装置，其特征在于，包括：
获取单元，获取待渲染页面对应的页面数据，所述页面数据中包含用于实现响应式布局功能的内容；
处理单元，当所述页面数据包含的内容模块引用用于实现所述响应式布局功能的内容时，按照被引用内容所指示的布局方式，对所述内容模块实施相应的响应式布局处理。
10.根据权利要求9所述的装置，其特征在于，
用于实现所述响应式布局功能的内容包括：字体尺寸限定信息，所述字体尺寸限定信息用于将字体尺寸限定为与所述待渲染页面的目标渲染设备的实际视窗规格相关；
所述内容模块包括：针对页面元素的样式属性的取值设定信息，所述取值设定信息以所述字体尺寸限定信息限定的字体尺寸为单位规格。
11.根据权利要求10所述的装置，其特征在于，用于实现所述响应式布局功能的内容包括：
强制指示信息，所述强制指示信息用于将所述取值设定信息采用的单位规格强制限定为所述字体尺寸限定信息限定的字体尺寸。
12.根据权利要求10所述的装置，其特征在于，所述取值设定信息包括：与所述内容模块的设计稿所参照的初始视窗规格相关的缩放变量，以使所述样式属性的取值根据所述实际视窗规格与所述初始视窗规格之比实现响应式变化。
13.根据权利要求12所述的装置，其特征在于，所述取值设定信息符合下述公式：
其中，x为所述取值设定信息，a为自定义的取值调节变量，em为所述字体尺寸限定信息限定的字体尺寸，@fz为所述缩放变量，g为所述实际视窗规格，h为所述初始视窗规格。
14.根据权利要求13所述的装置，其特征在于，em＝g/b，@fz＝h/b，其中b为自定义的缩放比例系数。
15.根据权利要求9所述的装置，其特征在于，用于实现所述响应式布局功能的内容记载于所述页面数据的页头部分。
16.根据权利要求9所述的装置，其特征在于，用于实现所述响应式布局功能的内容为预定义的类。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810138617.8A CN110309449A (zh) | 2018-02-10 | 2018-02-10 | 页面渲染方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810138617.8A CN110309449A (zh) | 2018-02-10 | 2018-02-10 | 页面渲染方法及装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110309449A true CN110309449A (zh) | 2019-10-08 |
Family
ID=68073614
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810138617.8A Pending CN110309449A (zh) | 2018-02-10 | 2018-02-10 | 页面渲染方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110309449A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114564263A (zh) * | 2022-02-18 | 2022-05-31 | 维沃移动通信有限公司 | 页面布局调整方法、装置 |
| CN117389672A (zh) * | 2023-10-31 | 2024-01-12 | 江苏缤原力科技有限公司 | 一种页面自适应适配方法、电子设备及计算机可读介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103412928A (zh) * | 2013-08-16 | 2013-11-27 | 北京乐动卓越科技有限公司 | 一种在移动终端实现浏览器页面智能响应式布局的方法与装置 |
| CN105740315A (zh) * | 2015-12-31 | 2016-07-06 | 焦点科技股份有限公司 | 一种多种屏幕响应式网页布局调整的方法 |
| CN106168959A (zh) * | 2016-06-29 | 2016-11-30 | 合网络技术（北京）有限公司 | 网页布局方法及装置 |
| CN107193557A (zh) * | 2017-05-11 | 2017-09-22 | 国电南瑞科技股份有限公司 | 一种应用于移动设备告警的响应式布局方法、客户端、服务端及系统 |
-
2018
- 2018-02-10 CN CN201810138617.8A patent/CN110309449A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103412928A (zh) * | 2013-08-16 | 2013-11-27 | 北京乐动卓越科技有限公司 | 一种在移动终端实现浏览器页面智能响应式布局的方法与装置 |
| CN105740315A (zh) * | 2015-12-31 | 2016-07-06 | 焦点科技股份有限公司 | 一种多种屏幕响应式网页布局调整的方法 |
| CN106168959A (zh) * | 2016-06-29 | 2016-11-30 | 合网络技术（北京）有限公司 | 网页布局方法及装置 |
| CN107193557A (zh) * | 2017-05-11 | 2017-09-22 | 国电南瑞科技股份有限公司 | 一种应用于移动设备告警的响应式布局方法、客户端、服务端及系统 |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114564263A (zh) * | 2022-02-18 | 2022-05-31 | 维沃移动通信有限公司 | 页面布局调整方法、装置 |
| CN117389672A (zh) * | 2023-10-31 | 2024-01-12 | 江苏缤原力科技有限公司 | 一种页面自适应适配方法、电子设备及计算机可读介质 |
| CN117389672B (zh) * | 2023-10-31 | 2024-05-17 | 江苏缤原力科技有限公司 | 一种页面自适应适配方法、电子设备及计算机可读介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106484383B (zh) | 页面渲染方法、装置及设备 | |
| Mohorovičić | Implementing responsive web design for enhanced web presence | |
| CN104572668B (zh) | 基于多个样式文件生成合并样式文件的方法和设备 | |
| US10339209B2 (en) | Webpage display method and device | |
| US10366147B2 (en) | Techniques for programmatic magnification of visible content elements of markup language documents | |
| US20130305144A1 (en) | Method of Publishing Digital Content | |
| US20130305145A1 (en) | A Method of Publishing Digital Content | |
| CN104915186B (zh) | 一种制作页面的方法和装置 | |
| CN106610785A (zh) | 商品对象列表信息处理方法及装置 | |
| JP7212771B2 (ja) | ページ処理方法、デバイス、電子デバイス及びコンピュータ読み取り可能な記憶媒体 | |
| JP6975339B2 (ja) | デジタルコンポーネントのバックドロップレンダリング | |
| CN105373593A (zh) | 一种展示网页中目标元素的方法及装置 | |
| CN106155654B (zh) | 屏蔽网页操作的方法、装置及电子设备 | |
| Fielding | Beginning responsive web design with HTML5 and CSS3 | |
| US20200125631A1 (en) | Extensible Grid Layout | |
| CN111104117A (zh) | 页面主题风格切换方法、装置、电子设备及计算机存储介质 | |
| CN106528136A (zh) | 基于微件的显示方法、装置以及终端设备 | |
| CN110309449A (zh) | 页面渲染方法及装置 | |
| CN110020291B (zh) | 网页布局的处理方法及装置 | |
| CN107480218B (zh) | 网页显示方法及装置、电子设备、存储介质 | |
| US20170277694A1 (en) | Search navigation element | |
| CN109657205A (zh) | 文本行高的调整方法及装置、电子设备 | |
| US20140136947A1 (en) | Generating website analytics | |
| CN113343137A (zh) | 优化seo页面生成方法、装置、电子设备及存储介质 | |
| KR20210040449A (ko) | 페이지 처리 방법, 장치, 전자 기기 및 컴퓨터 판독 가능 매체 |
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 | ||
| REG | Reference to a national code |
Ref country code: HK Ref legal event code: DE Ref document number: 40015535 Country of ref document: HK |
|
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20191008 |
|
| RJ01 | Rejection of invention patent application after publication |