页面渲染方法及装置制造方法及图纸

本发明专利技术实施例提供一种页面渲染方法及装置，该方法包括：根据屏幕宽度以及预设满屏rem值确定转换系数，其中，预设满屏rem值为页面满屏显示时对应的rem值。利用转换系数对待渲染元素的缩放可以使页面在不同宽度的显示设备上都能以相同的显示形式显示。再根据页面的像素值、页面中待渲染元素的第一像素值以及预设满屏rem值确定出待渲染元素对应的rem值。基于上述转换系数以及待渲染元素对应的rem值得到渲染元素在用于显示页面的屏幕中对应的第二像素值，此第二像素值是适应于显示屏幕宽度的。最后，根据此适应于显示屏幕宽度的第二像素值渲染待渲染元素，保证页面在任何尺寸的屏幕中都能以相同的显示形式显示，优化页面显示效果。

【技术实现步骤摘要】
页面渲染方法及装置
本专利技术涉及互联网
，尤其涉及一种页面渲染方法及装置。
技术介绍
随着移动终端的不断普及，人们浏览网页所使用的设备也逐步转变为移动终端。而不同的移动终端往往会对应于不同的屏幕尺寸，在显示目标页面中的页面内容时，对于屏幕尺寸较宽的终端，会出现内容填不满显示屏的情况，对于屏幕尺寸小窄的终端，又会出现无法将所有内容显示于一屏内的情况，需要滑动页面的横向滚动条才能看到其他未显示于显示屏内的内容。从而导致页面显示效果不佳。
技术实现思路
有鉴于此，本专利技术实施例提供一种页面渲染方法及装置，针对不同尺寸的显示设备缩放页面中各页面元素，使页面中的页面元素都能够以相同的显示形式显示在在不同屏幕宽度的显示设备中。本专利技术实施例提供一种页面渲染方法，包括：根据屏幕宽度和预设满屏rem值，确定转换系数，所述满屏rem值是满屏显示时对应的rem值；根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值，确定所述待渲染元素对应的rem值；根据所述转换系数和所述待渲染元素对应的rem值，确定所述待渲染元素对应的第二像素值；以所述第二像素值渲染所述待渲染元素。可选地，所述根据屏幕宽度和预设满屏rem值，确定转换系数，包括：根据所述屏幕的像素密度比确定所述屏幕的缩放比例；根据所述缩放比例和所述屏幕的分辨率，确定所述缩放屏幕宽度；确定所述转换系数为：所述缩放屏幕宽度/所述预设满屏rem值，其中，所述缩放屏幕宽度＝屏幕宽度/缩放比例。可选地，所述根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值，确定所述待渲染元素对应的rem值，包括：通过如下公式确定所述待渲染元素对应的rem值：所述页面中待渲染元素的第一像素值/所述页面的像素值＝所述待渲染元素对应的rem值/所述预设满屏rem值。可选地，所述根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值之前，还包括：识别所述待渲染元素是否为可缩放类型的待渲染元素；若所述待渲染元素为可缩放类型的待渲染元素，则执行所述根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值，确定所述待渲染元素对应的rem值的步骤。可选地，所述方法还包括：若所述待渲染元素为非缩放类型的待渲染元素，则以所述第一像素值渲染所述待渲染元素。本专利技术实施例提供一种页面渲染装置，包括：第一确定模块，用于根据屏幕宽度和预设满屏rem值，确定转换系数，所述满屏rem值是满屏显示时对应的rem值；第二确定模块，根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值，确定所述待渲染元素对应的rem值；第三确定模块，根据所述转换系数和所述待渲染元素对应的rem值，确定所述待渲染元素对应的第二像素值；渲染模块，用于以所述第二像素值渲染所述待渲染元素。可选地，所述第一确定模块具体用于：根据所述屏幕的像素密度比确定所述屏幕的缩放比例；根据所述缩放比例和所述屏幕的分辨率，确定所述缩放屏幕宽度；确定所述转换系数为：所述缩放屏幕宽度/所述预设满屏rem值，其中，所述缩放屏幕宽度＝屏幕宽度/缩放比例。可选地，所述第二确定模块具体用于：通过如下公式确定所述待渲染元素对应的rem值：所述页面中待渲染元素的第一像素值/所述页面的像素值＝所述待渲染元素对应的rem值/所述预设满屏rem值。可选地，所述装置还包括：识别模块，用于识别所述待渲染元素是否为可缩放类型的页面元素；若所述待渲染元素为可缩放类型的待渲染元素，则所述第二确定模块具体用于，根据页面的像素值、页面中元素类型为可缩放类型的待渲染元素的第一像素值以及所述预设满屏rem值，确定所述元素类型为可缩放类型的待渲染元素对应的rem值。可选地，所述渲染模块具体用于：若所述待渲染元素为非缩放类型的待渲染元素，则以所述第一像素值渲染所述待渲染元素。本专利技术实施例提供的页面渲染方法及装置，页面渲染工具先根据用于显示页面的显示设备的屏幕宽度以及预设满屏rem值确定转换系数，其中，预设满屏rem值为页面满屏显示时对应的rem值。此转换系数用于对待渲染元素进行相应缩放。通过对待渲染元素的缩放可以使页面在不同宽度的显示设备上以相同的显示形式进行显示。页面渲染工具再根据页面的像素值、页面中待渲染元素的第一像素值以及预设满屏rem值确定出待渲染元素对应的rem值。基于确定出的转换系数以及待渲染元素对应的rem值可以得到渲染元素在用于显示页面的屏幕中对应的第二像素值，此第二像素值是利用转换系数对第一像素值进行缩放后得到的，并且是适应于显示屏幕宽度的。最后，页面渲染工作根据此适应于显示屏幕宽度的第二像素值渲染待渲染元素，从而保证页面在任何尺寸的屏幕中都能以相同的显示形式显示，优化页面显示效果。附图说明为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1为本专利技术实施例提供的页面渲染方法实施例一的流程图；图2为本专利技术实施例提供的页面渲染方法实施例二的流程图；图3为本专利技术实施例提供的页面渲染方法实施例三的流程图；图4为本专利技术实施例提供的页面渲染方法实施例四的流程图；图5为本专利技术实施例提供的页面渲染装置实施例一的结构示意图；图6为本专利技术实施例提供的页面渲染装置实施例二的结构示意图。具体实施方式为使本专利技术实施例的目的、技术方案和优点更加清楚，下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。在本专利技术实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本专利技术。在本专利技术实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义，“多种”一般包含至少两种，但是不排除包含至少一种的情况。应当理解，本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。应当理解，尽管在本专利技术实施例中可能采用术语第一、第二、第三等来描述XXX，但这些XXX不应限于这些术语。这些术语仅用来将XXX彼此区分开。例如，在不脱离本专利技术实施例范围的情况下，第一XXX也可以被称为第二XXX，类似地，第二XXX也可以被称为第一XXX。取决于语境，如在此所使用的词语“如果”、“若”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。类似地，取决于语境，短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而本文档来自技高网...

【技术保护点】
一种页面渲染方法，其特征在于，包括：根据屏幕宽度和预设满屏rem值，确定转换系数，所述满屏rem值是满屏显示时对应的rem值；根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值，确定所述待渲染元素对应的rem值；根据所述转换系数和所述待渲染元素对应的rem值，确定所述待渲染元素对应的第二像素值；以所述第二像素值渲染所述待渲染元素。

【技术特征摘要】
1.一种页面渲染方法，其特征在于，包括：根据屏幕宽度和预设满屏rem值，确定转换系数，所述满屏rem值是满屏显示时对应的rem值；根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值，确定所述待渲染元素对应的rem值；根据所述转换系数和所述待渲染元素对应的rem值，确定所述待渲染元素对应的第二像素值；以所述第二像素值渲染所述待渲染元素。2.根据权利要求1所述的方法，其特征在于，所述根据屏幕宽度和预设满屏rem值，确定转换系数，包括：根据所述屏幕的像素密度比确定所述屏幕的缩放比例；根据所述缩放比例和所述屏幕的分辨率，确定所述缩放屏幕宽度；确定所述转换系数为：所述缩放屏幕宽度/所述预设满屏rem值，其中，所述缩放屏幕宽度＝屏幕宽度/缩放比例。3.根据权利要求1所述的方法，其特征在于，所述根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值，确定所述待渲染元素对应的rem值，包括：通过如下公式确定所述待渲染元素对应的rem值：所述页面中待渲染元素的第一像素值/所述页面的像素值＝所述待渲染元素对应的rem值/所述预设满屏rem值。4.根据权利要求1所述的方法，其特征在于，所述根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值之前，还包括：识别所述待渲染元素是否为可缩放类型的待渲染元素；若所述待渲染元素为可缩放类型的待渲染元素，则执行所述根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值，确定所述待渲染元素对应的rem值的步骤。5.根据权利要求4所述的方法，其特征在于，所述方法还包括：若所述待渲染元素为非缩放类型的待渲染元素，则以...

【专利技术属性】
技术研发人员：康永威，张菊元，
申请(专利权)人：北京潘达互娱科技有限公司，
类型：发明
国别省市：北京,11