[发明专利]页面渲染方法及装置

说明书

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

技术领域

本发明涉及互联网技术领域，尤其涉及一种页面渲染方法及装置。

背景技术

随着移动终端的不断普及，人们浏览网页所使用的设备也逐步转变为移动终端。

而不同的移动终端往往会对应于不同的屏幕尺寸，在显示目标页面中的页面内容时，对于屏幕尺寸较宽的终端，会出现内容填不满显示屏的情况，对于屏幕尺寸小窄的终端，又会出现无法将所有内容显示于一屏内的情况，需要滑动页面的横向滚动条才能看到其他未显示于显示屏内的内容。从而导致页面显示效果不佳。

发明内容

有鉴于此，本发明实施例提供一种页面渲染方法及装置，针对不同尺寸的显示设备缩放页面中各页面元素，使页面中的页面元素都能够以相同的显示形式显示在在不同屏幕宽度的显示设备中。

本发明实施例提供一种页面渲染方法，包括：

根据屏幕宽度和预设满屏rem值，确定转换系数，所述满屏rem值是满屏显示时对应的rem值；

根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值，确定所述待渲染元素对应的rem值；

根据所述转换系数和所述待渲染元素对应的rem值，确定所述待渲染元素对应的第二像素值；

以所述第二像素值渲染所述待渲染元素。

可选地，所述根据屏幕宽度和预设满屏rem值，确定转换系数，包括：

根据所述屏幕的像素密度比确定所述屏幕的缩放比例；

根据所述缩放比例和所述屏幕的分辨率，确定所述缩放屏幕宽度；

确定所述转换系数为：所述缩放屏幕宽度/所述预设满屏rem值，其中，所述缩放屏幕宽度＝屏幕宽度/缩放比例。

可选地，所述根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值，确定所述待渲染元素对应的rem值，包括：

通过如下公式确定所述待渲染元素对应的rem值：

所述页面中待渲染元素的第一像素值/所述页面的像素值＝所述待渲染元素对应的rem值/所述预设满屏rem值。

可选地，所述根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值之前，还包括：

识别所述待渲染元素是否为可缩放类型的待渲染元素；

若所述待渲染元素为可缩放类型的待渲染元素，则执行所述根据页面的像素值、所述页面中待渲染元素的第一像素值以及所述预设满屏rem值，确定所述待渲染元素对应的rem值的步骤。

可选地，所述方法还包括：

若所述待渲染元素为非缩放类型的待渲染元素，则以所述第一像素值渲染所述待渲染元素。

本发明实施例提供一种页面渲染装置，包括：