CN112800373A - 网页资源数据生成方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本发明实施例公开了一种网页资源数据生成方法、装置、计算机设备及存储介质。所述方法包括：获取源网页资源数据和终端类型；根据所述终端类型，获取与所述终端类型匹配的目标显示尺寸映射关系；根据所述目标显示尺寸映射关系，对所述源网页资源数据中的尺寸进行调整，形成与所述终端类型匹配的目标网页资源数据，其中，所述目标网页资源数据用于在与所述终端类型匹配的目标终端中，以显示尺寸显示目标网页，所述显示尺寸根据所述目标显示尺寸映射关系确定。本发明实施例可以缩短开发周期，减少网页开发成本，减少网页维护成本。

Description

网页资源数据生成方法、装置、计算机设备及存储介质

技术领域

本发明实施例涉及数据处理领域，尤其涉及一种网页资源数据生成方法、装置、计算机设备及存储介质。

背景技术

网页可以在移动端和电脑端进行显示，不同端浏览器可视区域尺寸不同。

由于不同端浏览器的可视区域尺寸较大，要使同一网页在各端达到最佳视觉效果，则为移动端和移动浏览端配置一份小尺寸视觉设计稿，而电脑端配置一份大尺寸的视觉设计稿。

现有的方法中，设计组交付大小两份不同的视觉设计稿，再由前端开发组根据不同设计分别开发两份不同的页面代码，最后交付测试组分别针对两个页面完成测试工作。在整个开发流程中：为了适配两个不同尺寸的浏览器，开发一个网页需要耗费双倍人力完成，开发周期延长，代码维护成本加重。

发明内容

本发明实施例提供一种网页资源数据生成方法、装置、计算机设备及存储介质，可以缩短开发周期，减少网页开发成本，减少网页维护成本。

第一方面，本发明实施例提供了一种网页资源数据生成方法，包括：

获取源网页资源数据和终端类型；

根据所述终端类型，获取与所述终端类型匹配的目标显示尺寸映射关系；

根据所述目标显示尺寸映射关系，对所述源网页资源数据中的尺寸进行调整，形成与所述终端类型匹配的目标网页资源数据，其中，所述目标网页资源数据用于在与所述终端类型匹配的目标终端中，以显示尺寸显示目标网页，所述显示尺寸根据所述目标显示尺寸映射关系确定。

第二方面，本发明实施例还提供了一种网页资源数据生成装置，包括：

终端类型获取模块，用于获取源网页资源数据和终端类型；

尺寸映射关系获取模块，用于根据所述终端类型，获取与所述终端类型匹配的目标显示尺寸映射关系；

目标网页资源数据生成模块，用于根据所述目标显示尺寸映射关系，对所述源网页资源数据中的尺寸进行调整，形成与所述终端类型匹配的目标网页资源数据，其中，所述目标网页资源数据用于在与所述终端类型匹配的目标终端中，以显示尺寸显示目标网页，所述显示尺寸根据所述目标显示尺寸映射关系确定。

第三方面，本发明实施例还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序所述处理器执行所述程序时实现如本发明实施例中任一所述的网页资源数据生成方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明实施例中任一所述的网页资源数据生成方法。

本发明实施例通过获取终端类型匹配的目标显示尺寸映射关系，并根据目标显示尺寸映射关系，对源网页资源数据进行调整形成目标网页资源数据，以显示尺寸显示目标网页，可以实现将网页资源数据调整成适配终端类型的网页资源数据，以适应终端类型的可视区域尺寸显示目标网页，解决了现有技术中需要针对每个终端类型开发网页资源数据，导致开发成本高、开发周期长和维护成本高的问题，可以开发一份源网页资源数据，并适配终端类型转换成匹配的目标网页资源数据，减少网页资源数据的开发数据量，可以缩短开发周期，减少网页开发成本，减少网页维护成本。

附图说明

图1是本发明实施例一中的一种网页资源数据生成方法的流程图；

图2a是本发明实施例二中的一种网页资源数据生成方法的流程图；

图2b是本发明实施例二中的一种开发设计稿网页的示意图；

图2c是本发明实施例二中的一种移动端网页的示意图；

图2d是本发明实施例二中的一种现有的电脑端网页的示意图；

图2e是本发明实施例二中的一种电脑端网页的示意图；

图3是本发明实施例三中的一种网页资源数据生成装置的结构示意图；

图4是本发明实施例四中的一种计算机设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

实施例一

图1为本发明实施例一中的一种网页资源数据生成方法的流程图，本实施例可适用于在网页资源数据开发完成之后，适配终端类型，调整生成目标网页资源数据，以生成适配终端类型的目标网页的情况，该方法可以由本发明实施例提供的网页资源数据生成装置来执行，该装置可采用软件和/或硬件的方式实现，并一般可集成计算机设备中。如图1所示，本实施例的方法具体包括：

S110，获取源网页资源数据和终端类型。

源网页资源数据为针对目标网页开发形成的资源数据。源网页资源数据包括的尺寸为第一尺寸，源网页资源数据用于以第一尺寸显示源网页。具体的，源网页资源数据包括网页和网页中各网页元素，网页和各网页元素的尺寸为第一尺寸，且第一尺寸以第一度量为单位。

网页资源包括超文本标记语言(Hyper Text Markup Language，HTML)文件、层叠样式表(Cascading Style Sheets，CSS)文件和脚本语言(JavaScript)文件。其中，HTML文件是网页内容的载体，通常是由标签组成。CSS文件用于描述网页元素的样式和布局，例如标题元素的字体、颜色、尺寸和标题背景图像等。JavaScript文件用于实现用户与网页的动态交互操作，例如，鼠标点击配置项图标，配置项图标弹出下拉菜单等。

其中，网页渲染过程可以为：对HTML文件进行解析，生成文档对象模型树(Document Object Model Tree，DOM Tree)；对CSS文件进行解析，生成CSS对象模型树(CSSObject Model Tree，CSSOM Tree)，其中，DOM Tree的结构与CSSOM Tree的结构对应；根据DOM Tree的结构与CSSOM Tree的结构的对应关系，对DOM Tree和CSSOM Tree进行合成，形成渲染树；根据渲染树，生成至少一个图像块，各图像块用于在浏览器窗口中进行组合显示，形成一个完整的网页效果。

在本发明实施例中网页资源数据中的尺寸，通常是指CSS中的尺寸。

通常，为了提高通用性，第一尺寸为预设的标准尺寸，即开发人员采用该标准尺寸对网页资源数据进行开发，开发得到源网页资源数据。在本发明实施例中，根据不同的终端类型，对源网页资源数据进行调整，从而得到与终端类型适配的目标网页资源数据。

终端类型用于区分不同的终端，具体是用于区分不同尺寸的终端。终端类型可以包括移动端类型和电脑端类型。移动端类型可以包括移动应用(Application，APP)端类型和移动网页(Web)端类型。移动端类型可以是指移动终端，例如手机或平板电脑等。电脑端可以是指个人计算机(Person Computer，PC)，例如台式计算机或笔记本计算机等。

S120，根据所述终端类型，获取与所述终端类型匹配的目标显示尺寸映射关系。

显示尺寸映射关系用于将一个尺寸映射为另外一个尺寸。显示尺寸映射关系可以是指源网页资源数据中的尺寸与目标网页资源数据的尺寸之间的关系，具体可以包括相同度量单位的尺寸之间的映射，和/或不同度量单位的尺寸之间的映射。显示尺寸映射关系配置有多个，一个显示尺寸映射关系与一个终端类型匹配。

S130，根据所述目标显示尺寸映射关系，对所述源网页资源数据中的尺寸进行调整，形成与所述终端类型匹配的目标网页资源数据，其中，所述目标网页资源数据用于在与所述终端类型匹配的目标终端中，以显示尺寸显示目标网页，所述显示尺寸根据所述目标显示尺寸映射关系确定。

源网页资源数据可以是指开发完成的初始版本的网页资源数据。目标网页资源数据可以是指适配终端类型的可视区域的网页资源数据。目标网页资源数据用于在与终端类型匹配的目标终端中，渲染并显示目标网页。根据目标显示尺寸映射关系，对源网页资源数据中的尺寸进行调整，实际是，根据目标显示尺寸映射关系，将源网页资源数据中的尺寸分别映射为相应的尺寸，源网页资源数据中的尺寸分别替换为相应的尺寸，得到的网页资源数据即为目标网页资源数据。例如，源网页资源数据中网页的宽度为m，映射关系可以是指目标网页资源数据中的尺寸与源网页资源数据中的尺寸的比值为k，目标网页资源数据中网页的宽度为k*m。

显示尺寸可以是指目标网页和包括的网页元素的尺寸。目标网页和包括的网页元素都是以显示尺寸进行渲染和显示。可以将前述映射后的尺寸可以直接确定为显示尺寸；或者根据终端型号，对映射后的尺寸进行比例缩放，将缩放后的尺寸确定为显示尺寸。

在一个应用场景中，网页资源数据为直播应用关联的网页的资源数据。在形成目标网页资源数据之后，还包括：对目标网页资源数据进行发布。在发布之后，移动端和/或电脑端在检测到用户针对目标网页的触发请求时，获取发布的目标网页资源数据，并进行解析渲染，生成目标网页并显示。触发请求可以是指在直播应用中预设业务的触发指令。预设业务可以是指直播应用的活动页面，例如，抽奖页面、登陆页面、充值页面或竞争页面(PK)等，具体可以根据业务需求进行配置。

本发明实施例通过获取终端类型匹配的目标显示尺寸映射关系，并根据目标显示尺寸映射关系，对源网页资源数据进行调整形成目标网页资源数据，以显示尺寸显示目标网页，可以实现将网页资源数据调整成适配终端类型的网页资源数据，以适应终端类型的可视区域尺寸显示目标网页，解决了现有技术中需要针对每个终端类型开发网页资源数据，导致开发成本高、开发周期长和维护成本高的问题，可以开发一份源网页资源数据，并适配终端类型转换成匹配的目标网页资源数据，减少网页资源数据的开发数据量，可以缩短开发周期，减少网页开发成本，减少网页维护成本。

实施例二

图2a为本发明实施例二中的一种网页资源数据生成方法的流程图，本实施例以上述实施例为基础进行具体化。将所述根据所述终端类型，获取与所述终端类型匹配的目标显示尺寸映射关系，具体化为：根据所述终端类型，确定目标映射类型，所述终端类型包括：移动端类型或电脑端类型，所述映射类型包括单位映射类型和尺寸映射类型；获取与所述目标映射类型匹配的目标显示尺寸映射关系，确定为与所述终端类型匹配的目标显示尺寸映射关系。

本实施例的方法具体包括：

S210，获取源网页资源数据和终端类型。

本发明实施例中未详细介绍的描述可以参考上述实施例的描述。

S220，根据所述终端类型，确定目标映射类型，所述终端类型包括：移动端类型或电脑端类型，所述映射类型包括单位映射类型和尺寸映射类型。

映射类型用于确定目标显示尺寸映射关系。其中，单位映射类型的映射关系可以是指不同单位的尺寸之间的映射关系。尺寸映射类型的映射关系可以是指同一单位的尺寸之间的映射关系。映射类型与终端类型对应。终端类型与目标映射类型可以是一一对应关系。或者是终端类型与目标映射类型是一对多关系。可以根据终端类型和终端的属性信息，从多个映射类型中确定目标映射类型，例如，终端的属性信息可以包括下述至少一项：终端的尺寸信息、终端的型号或终端的标识信息等属性信息。

在本发明实施例中，一个终端类型对应一个映射类型。移动端类型与单位映射类型对应。电脑端类型与尺寸映射类型对应。

S230，获取与所述目标映射类型匹配的目标显示尺寸映射关系，确定为与所述终端类型匹配的目标显示尺寸映射关系。

一个映射类型对应一个显示尺寸映射关系。

S240，根据所述目标显示尺寸映射关系，对所述源网页资源数据中的尺寸进行调整，形成与所述终端类型匹配的目标网页资源数据，其中，所述目标网页资源数据用于在与所述终端类型匹配的目标终端中，以显示尺寸显示目标网页，所述显示尺寸根据所述目标显示尺寸映射关系确定。

可选的，所述终端类型为移动端类型，所述目标映射类型为单位映射类型；所述根据所述目标显示尺寸映射关系，对所述源网页资源数据中的尺寸进行调整，形成与所述终端类型匹配的目标网页资源数据，包括：根据所述目标显示尺寸映射关系包括的第一度量和第二度量之间的单位映射比例，分别计算所述源网页资源数据包括的各第一尺寸与所述单位映射比例的乘积，得到各所述第一尺寸对应的第二尺寸，所述第一尺寸的单位为第一度量，所述第二尺寸的单位为第二度量；将所述源网页资源数据中各第一尺寸分别替换为对应的第二尺寸，形成与所述终端类型匹配的目标网页资源数据，所述目标网页资源数据用于移动端根据各所述第二尺寸和当前浏览器尺寸，确定各所述第二尺寸对应的显示尺寸，并以各所述显示尺寸显示所述目标网页中的各网页元素。

在终端类型为移动端类型时，目标映射类型为单位映射类型，单位映射类型对应的目标显示尺寸映射关系表示不同单位的尺寸之间的映射关系。目标显示尺寸映射关系包括的第一度量和第二度量之间的单位映射比例。以第二度量为单位的第二度量与以第一度量为单位的第一尺寸的比值为单位映射比例。源网页资源数据包括至少一个网页元素的尺寸。网页元素可以包括文本和图像等可视化元素。网页元素的尺寸可以包括文本字号和图像的图形尺寸等，例如，图形尺寸包括矩形的宽和高和圆形的半径等。

第一度量为绝对单位，第二度量为相对单位，第二度量是相对于当前浏览器尺寸的单位，相应的，第二尺寸是指相对于当前浏览器尺寸的尺寸。单位映射比例的单位为第二度量与第一度量的比值。第二尺寸以第二度量为单位，第二度量为相对单位。其中，第一度量包括像素(Pixel，px)，第二度量可以包括相对于父元素字号的单位(font size of theelement，em)、相对于根元素字号的单位(font size of the root element，rem)、视窗单位(如视口宽度和视口高度等)等。示例性的，第二度量为rem，此时，移动端浏览器指定不同根元素的字号，该字号以第二度量为单位设置尺寸，其他网页元素均以第二度量为单位设置尺寸。可以理解为，根元素设置字号为14个像素，一个网页元素设置字号为2个第二度量单位，则浏览器最终计算该网页元素的字号为28个像素。从而，移动端可以根据不同浏览器的尺寸动态调整网页中网页元素的第二尺寸。

可选的，第一度量为px，第二度量为视窗单位，例如，第一尺寸用于描述标准宽度，第二度量为视口宽度(Viewport Width，vw)。其中，vw是指相对于浏览器窗口的宽度，浏览器窗口宽度被均分为100个单位的vw。示例性的，第一尺寸为A px，比值为k vw/px，第二尺寸为A px*k vw/px＝kA vw。

实际上，对于移动端来说，不同移动端尺寸的浏览器尺寸不同，选择相对单位可以根据不同浏览器尺寸等比缩放，适配不同移动端，优化显示网页中各网页元素。而针对em和rem单位，根元素或父元素字号是在运行时执行计算操作，导致页面加载初期会有短暂的布局错乱。而视窗单位可以在非运行时执行计算元素字号，可以避免页面加载初期短暂的布局错乱。通过将第二度量确定为视窗单位，可以避免网页运行时计算元素字号，提前计算元素字号，以在网页运行前准确计算网页中各网页元素的尺寸，在网页运行时可以准确显示网页元素的尺寸，提高网页显示的准确性，从而避免运行时计算元素字号，导致的布局错乱，提高网页的显示效果。

其中，第二尺寸是相对于当前浏览器尺寸的尺寸，显示尺寸为以绝对单位为单位的尺寸，显示尺寸根据对应的第二尺寸与当前浏览器尺寸确定。示例性的，计算第二尺寸与当前浏览器尺寸的乘积，确定为该第二尺寸对应的显示尺寸。显示尺寸用于当前浏览器显示对应的网页元素。移动端可以根据自适应调整第二尺寸，得到显示尺寸，并以正确的显示尺寸渲染并显示网页元素，提高网页元素的布局准确性，从而提高网页的显示效果。

通过针对移动端，将第一度量的第一尺寸转换为第二度量的第二尺寸，并由移动端根据当前浏览器尺寸适应性对第二尺寸调整成显示尺寸，实现准确得到适配移动端，以及适配移动端的浏览器尺寸的尺寸，从而在适配移动端的基础上，可以更精细控制显示适配不同移动端中不同浏览器尺寸的网页元素，从而实现细粒度控制网页元素的显示尺寸，以使移动端的网页适配移动端中浏览器尺寸进行显示，提高移动端的网页显示效果。

可选的，所述终端类型为电脑端类型；所述根据所述目标显示尺寸映射关系，对所述源网页资源数据中的尺寸进行调整，形成与所述终端类型匹配的目标网页资源数据，包括：根据所述目标显示尺寸映射关系包括的第一尺寸和第三尺寸之间的尺寸映射比例，分别计算所述源网页资源数据包括的各第一尺寸与所述尺寸映射比例的乘积，得到各所述第一尺寸对应的第三尺寸，所述第一尺寸的单位与所述第三尺寸的单位相同；将所述源网页资源数据中各第一尺寸分别替换为对应的第三尺寸，形成与所述终端类型匹配的目标网页资源数据，所述目标网页资源数据用于电脑端将各所述第三尺寸确定为显示尺寸，并以各所述显示尺寸显示所述目标网页中的各网页元素。

在终端类型为电脑端类型时，目标映射类型为尺寸映射类型，尺寸映射类型对应的目标显示尺寸映射关系表示相同单位的尺寸之间的映射关系。目标显示尺寸映射关系包括的第一尺寸和第三尺寸之间的尺寸映射比例。以第一度量为单位的第三尺寸与以第一度量为单位的第一尺寸的比值为尺寸映射比例。

第一尺寸和第三尺寸的单位均为绝对单位。尺寸映射比例描述第一尺寸和第二尺寸数值上的映射关系。可选的，第一尺寸和第三尺寸的单位为px。示例性的，第一尺寸为Bpx，比值为m，第三尺寸为B px*m＝mB px。

移动端通常是竖版页面，而电脑是横版页面，如果采用相对单位的尺寸在电脑端渲染和显示网页，则会导致电脑端的浏览内容被放大数倍，部分内容无法在电脑端中显示，导致用户无法正常浏览网页内容。

与移动端不同，移动端需要等比缩放适配不同浏览器，而电脑端不做等比缩放转换，显示源网页资源数据中的尺寸，但存在标准宽度可能显示偏小的视觉效果，从而，可以根据需要整体放大源网页资源数据中的尺寸。

根据电脑端的屏幕高度，确定可显示的目标网页高度，并对应配置该目标网页的宽度。对于不同的电脑端来说，屏幕高度几乎相同，即高度差小于设定高度差阈值。相应的，不同电脑端的可显示的目标网页的宽度几乎相同，即宽度差小于设定宽度差阈值。由此，电脑端可以选择同一绝对单位的尺寸，确定为显示尺寸，以显示出完整的目标网页，提高网页元素的布局准确性，以及提高网页的显示效果。

通过针对电脑端，将以相同度量为单位的第一尺寸转换为第三尺寸，并确定为显示尺寸，实现准确得到适配电脑端的浏览器尺寸的尺寸，可以显示完整的目标网页，提高目标网页在电脑端的显示范围，从而提高电脑端的网页显示效果。

可选的，所述根据所述目标显示尺寸映射关系，对所述源网页资源数据中的尺寸进行调整，形成与所述终端类型匹配的目标网页资源数据，包括：获取与所述终端类型匹配的目标打包软件，所述目标打包软件配置有所述目标显示尺寸映射关系；在所述源网页资源数据的编译过程中，通过所述目标打包软件，根据所述目标显示尺寸映射关系对所述源网页资源数据进行编译打包，形成目标网页数据包，所述目标网页数据包包括所述目标网页资源数据。

目标打包软件用于对网页资源数据进行打包。其中，打包软件可以是用于不同尺寸间相互转化的webpack插件。打包软件与显示尺寸映射关系对应。不同打包软件对应不同显示尺寸映射关系。可以先根据终端类型，确定目标映射类型，查询与目标映射类型匹配的打包软件，获取与终端类型匹配的目标打包软件，目标打包软件配置有目标显示尺寸映射关系。可以根据移动端和电脑端的显示规则，预先开发对应的打包软件，并选择打包软件直接对开发完成的源网页资源数据进行编译打包得到目标网页资源数据，可以减少开发人员的开发成本，同时，在网页资源数据需要进行维护更新时，可以直接仅对源网页资源数据进行维护更新，并重新采用相应的打包软件重新进行编译打包，降低网页资源数据维护成本。

现有的网页资源数据开发完成之后，需要进行编译，编译得到网页数据包可以线上发布，移动端和/或电脑端可以下载网页数据包并进行解析，得到网页资源数据。本发明实施例中，打包软件可以对源网页资源数据进行编译打包，并在编译打包过程中，采用目标显示尺寸映射关系对源网页资源数据中的尺寸进行调整，形成目标网页资源数据并进行编译打包，形成目标网页数据包。目标网页数据包用于移动端和/或电脑端获取，并从中提取目标网页资源数据，以显示尺寸显示目标网页。

通过获取终端类型匹配的目标打包软件，并通过目标打包软件根据一份开发设计稿得到适配移动端和/或电脑端的网页数据包，实现适配终端类型进行差异化打包，减少网页资源数据的开发成本和维护成本。

可选的，在根据所述终端类型，获取与所述终端类型匹配的目标显示尺寸映射关系之前，还包括：配置标准宽度；获取移动端类型的通用宽度；根据所述标准宽度和所述移动端类型的通用宽度，确定所述移动端类型匹配的显示尺寸映射关系；获取电脑端类型的通用高度，并确定所述电脑端类型的通用宽度；根据所述标准宽度和所述电脑端类型的通用宽度，确定所述移动端类型匹配的显示尺寸映射关系。

标准宽度可以是指开发设计稿中配置的宽度，其单位为绝对单位。标准宽度可以是指网页的宽度。可以规定开发设计稿中网页的宽度的最小尺寸为某数值的标准宽度，并以标准宽度为基准，开发人员配置各网页元素的实际尺寸。

其中，移动端类型的通用宽度可以是指针对移动端类型配置的通用尺寸，也即移动端中满足网页显示需求的尺寸。其中，移动端类型的尺寸的单位是相对单位，移动端类型可以根据当前浏览器动态调整移动端类型的通用尺寸，由此仅需要配置相对的对象(如当前浏览器宽度或浏览器的高度)即可，并针对该对象的宽度尺寸或者高度尺寸作为通用尺寸，在本发明实施例中选择宽度尺寸。移动端类型匹配的显示尺寸映射关系为移动端类型匹配的尺寸与源网页资源数据(开发设计稿的尺寸)中的尺寸的比值为单位映射比例，该单位映射比例的数值为移动端类型的通用宽度与标准宽度的比值。

电脑端类型的通用高度可以是指针对电脑端类型配置的通用的高度尺寸，电脑端类型的通用宽度可以是指针对电脑端类型配置的通用的宽度尺寸，电脑端类型的通用高度和通用宽度，可以是指针对电脑端类型配置的通用尺寸，也即电脑端中满足网页显示需求的尺寸。电脑端类型的尺寸的单位是绝对单位。电脑端类型匹配的显示尺寸映射关系为电脑端类型匹配的尺寸与源网页资源数据(开发设计稿的尺寸)中的尺寸的比值为尺寸映射比例，该尺寸映射比例的数值为电脑端类型的通用宽度与标准宽度的比值。在电脑端中，不同电脑端的高度几乎相同，而宽度不同。由此，可以采集不同电脑端设备的屏幕的高度，确定为通用高度。

可选的，电脑端类型可以根据通用高度和宽高比，确定电脑端类型的通用宽度。为了使移动端和电脑端的不同尺寸的浏览器中显示的网页布局统一，在电脑端中显示的网页的宽高比与移动端网页相同宽高比相同。可以计算通用高度与宽高比的乘积，得到电脑端类型的通用宽度。计算电脑端类型的通用宽度与标准宽度的比值，确定为尺寸映射比例的数值。其中，标准宽度和标准高度的宽高比，通常是根据移动端显示的网页的宽高比进行统一配置，从而避免电脑端和移动端的显示效果不统一。

通过移动端和电脑端的不同显示需求和情况，分别计算对应的显示尺寸映射关系，从而准确将源网页资源数据的尺寸转换为适配终端类型的尺寸，从而提高目标网页资源数据中尺寸的适配性，丰富网页资源数据的应用场景。

可选的，所述标准宽度的单位为像素；所述移动端类型的通用宽度的单位为视口宽度，所述电脑端类型的通用高度和通用宽度的单位为像素。

如前例，标准宽度为网页的宽度的最小尺寸，例如，标准宽度为320px。移动端类型的通用宽度为100的视口宽度，即100vw。相应的，单位映射比例为100vw/320px。此外，针对电脑端类型，根据通用高度、标准宽度和标准高度计算得到通用宽度为540px。尺寸映射比例为540px/320px。

在一个具体的例子中，开发设计稿以标准宽度为320px进行开发设计的网页如图2b所示，以移动端类型的通用宽度为100的视口宽度的网页，在移动端的显示效果如图2c所示。现有的以电脑端类型的通用宽度为100的视口宽度的网页，在电脑端的显示效果如图2d所示，图2d电脑端仅显示了资料区域，资料区域上面的头像和昵称区域都未能显示。以电脑端类型的通用宽度为540px的网页，在电脑端的显示效果如图2e所示，图2e中，电脑端完整显示了网页内容，且布局与移动端类型的网页布局相同。

通过配置开发设计稿的单位为像素，可以使开发人员仅开发一份开发设计稿，降低了开发成本，同时，配置移动端类型的尺寸单位为视口宽度，可以适配不同移动端的浏览器尺寸，等比缩放网页进行显示，以及配置电脑端类型的尺寸为像素，避免电脑端等比缩放网页进行显示，并按照固定尺寸进行显示，可以在电脑端的浏览器中完整显示网页，从而实现根据不同终端类型，采用不同显示尺寸映射关系，以最合适的方式显示网页，提高网页的显示效果。

本发明实施例通过终端类型，确定目标映射类型，并获取目标映射类型匹配的目标显示尺寸映射关系，建立终端类型与目标显示尺寸映射关系之间的对应关系，可以准确根据终端类型获取适配终端的显示尺寸映射关系，从而得到适配终端的显示尺寸，以使该终端类型的终端以该显示尺寸渲染并显示目标网页，最终实现适配终端类型的尺寸显示目标网页，提高目标网页的显示效果，并精准控制目标网页的显示尺寸。

实施例三

图3为本发明实施例三中的一种网页资源数据生成装置的示意图。实施例三是实现本发明上述实施例提供的网页资源数据生成方法的相应装置，该装置可采用软件和/或硬件的方式实现，并一般可集成计算机设备中。

相应的，本实施例的装置可以包括：

终端类型获取模块310，用于获取源网页资源数据和终端类型；

尺寸映射关系获取模块320，用于根据所述终端类型，获取与所述终端类型匹配的目标显示尺寸映射关系；

目标网页资源数据生成模块330，用于根据所述目标显示尺寸映射关系，对所述源网页资源数据中的尺寸进行调整，形成与所述终端类型匹配的目标网页资源数据，其中，所述目标网页资源数据用于在与所述终端类型匹配的目标终端中，以显示尺寸显示目标网页，所述显示尺寸根据所述目标显示尺寸映射关系确定。

本发明实施例通过获取终端类型匹配的目标显示尺寸映射关系，并根据目标显示尺寸映射关系，对源网页资源数据进行调整形成目标网页资源数据，以显示尺寸显示目标网页，可以实现将网页资源数据调整成适配终端类型的网页资源数据，以适应终端类型的可视区域尺寸显示目标网页，解决了现有技术中需要针对每个终端类型开发网页资源数据，导致开发成本高、开发周期长和维护成本高的问题，可以开发一份源网页资源数据，并适配终端类型转换成匹配的目标网页资源数据，减少网页资源数据的开发数据量，可以缩短开发周期，减少网页开发成本，减少网页维护成本。

进一步的，所述尺寸映射关系获取模块320，包括：映射类型确定单元，用于根据所述终端类型，确定目标映射类型，所述终端类型包括：移动端类型或电脑端类型，所述映射类型包括单位映射类型和尺寸映射类型；获取与所述目标映射类型匹配的目标显示尺寸映射关系，确定为与所述终端类型匹配的目标显示尺寸映射关系。

进一步的，所述终端类型为移动端类型，所述目标映射类型为单位映射类型；所述目标网页资源数据生成模块330，包括：不同单位尺寸映射单元，用于根据所述目标显示尺寸映射关系包括的第一度量和第二度量之间的单位映射比例，分别计算所述源网页资源数据包括的各第一尺寸与所述单位映射比例的乘积，得到各所述第一尺寸对应的第二尺寸，所述第一尺寸的单位为第一度量，所述第二尺寸的单位为第二度量；将所述源网页资源数据中各第一尺寸分别替换为对应的第二尺寸，形成与所述终端类型匹配的目标网页资源数据，所述目标网页资源数据用于移动端根据各所述第二尺寸和当前浏览器尺寸，确定各所述第二尺寸对应的显示尺寸，并以各所述显示尺寸显示所述目标网页中的各网页元素。

进一步的，所述终端类型为电脑端类型；所述目标映射类型为尺寸映射类型；所述目标网页资源数据生成模块330，包括：相同单位尺寸映射单元，用于根据所述目标显示尺寸映射关系包括的第一尺寸和第三尺寸之间的尺寸映射比例，分别计算所述源网页资源数据包括的各第一尺寸与所述尺寸映射比例的乘积，得到各所述第一尺寸对应的第三尺寸，所述第一尺寸的单位与所述第三尺寸的单位相同；将所述源网页资源数据中各第一尺寸分别替换为对应的第三尺寸，形成与所述终端类型匹配的目标网页资源数据，所述目标网页资源数据用于电脑端将各所述第三尺寸确定为显示尺寸，并以各所述显示尺寸显示所述目标网页中的各网页元素。

进一步的，所述目标网页资源数据生成模块330，包括：打包转换单元，用于获取与所述终端类型匹配的目标打包软件，所述目标打包软件配置有所述目标显示尺寸映射关系；在所述源网页资源数据的编译过程中，通过所述目标打包软件，根据所述目标显示尺寸映射关系对所述源网页资源数据进行编译打包，形成目标网页数据包，所述目标网页数据包包括所述目标网页资源数据。

进一步的，所述网页资源数据生成装置还包括：显示尺寸映射关系计算模块，用于在根据所述终端类型，获取与所述终端类型匹配的目标显示尺寸映射关系之前，配置标准宽度；获取移动端类型的通用宽度；根据所述标准宽度和所述移动端类型的通用宽度，确定所述移动端类型匹配的显示尺寸映射关系；获取电脑端类型的通用高度，并确定所述电脑端类型的通用宽度；根据所述标准宽度和所述电脑端类型的通用宽度，确定所述移动端类型匹配的显示尺寸映射关系。

进一步的，所述标准宽度的单位为像素；所述移动端类型的通用宽度的单位为视口宽度，所述电脑端类型的通用高度和通用宽度的单位为像素。

上述装置可执行本发明实施例所提供的方法，具备执行方法相应的功能组件和有益效果。

实施例四

图4为本发明实施例四提供的一种计算机设备的结构示意图。图4示出了适于用来实现本发明实施方式的示例性计算机设备12的框图。图4显示的计算机设备12仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图4所示，计算机设备12以通用计算设备的形式表现。计算机设备12的组件可以包括但不限于：一个或者多个处理器或者处理单元16，系统存储器28，连接不同系统组件(包括系统存储器28和处理单元16)的总线18。计算机设备12可以是挂接在总线上的设备。

总线18表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(Industry StandardArchitecture，ISA)总线，微通道体系结构(Micro Channel Architecture，MCA)总线，增强型ISA总线、视频电子标准协会(Video Electronics Standards Association，VESA)局域总线以及外围组件互连(PerIPheral Component Interconnect，PCI)总线。

计算机设备12典型地包括多种计算机系统可读介质。这些介质可以是任何能够被计算机设备12访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储器28可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)30和/或高速缓存存储器32。计算机设备12可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统34可以用于读写不可移动的、非易失性磁介质(图4未显示，通常称为“硬盘驱动器”)。尽管图4中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如紧凑磁盘只读存储器(Compact Disc Read-Only Memory，CD-ROM)，数字视盘(Digital Video Disc-Read Only Memory，DVD-ROM)或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。系统存储器28可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序组件，这些程序组件被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序组件42的程序/实用工具40，可以存储在例如系统存储器28中，这样的程序组件42包括但不限于操作系统、一个或者多个应用程序、其它程序组件以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序组件42通常执行本发明所描述的实施例中的功能和/或方法。

计算机设备12也可以与一个或多个外部设备14(例如键盘、指向设备、显示器24等)通信，还可与一个或者多个使得用户能与该计算机设备12交互的设备通信，和/或与使得该计算机设备12能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(Input/Output，I/O)接口22进行。并且，计算机设备12还可以通过网络适配器20与一个或者多个网络(例如局域网(Local AreaNetwork，LAN)，广域网(Wide Area Network，WAN)通信。如图所示，网络适配器20通过总线18与计算机设备12的其它组件通信。应当明白，尽管图4中未示出，可以结合计算机设备12使用其它硬件和/或软件组件，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列(Redundant Arrays of Inexpensive Disks，RAID)系统、磁带驱动器以及数据备份存储系统等。

处理单元16通过运行存储在系统存储器28中的程序，从而执行各种功能应用以及数据处理，例如实现本发明任意实施例所提供的方法。

实施例五

本发明实施例五提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本申请所有发明实施例提供的网页资源数据生成方法：

也即，该程序被处理器执行时实现：获取源网页资源数据和终端类型；根据所述终端类型，获取与所述终端类型匹配的目标显示尺寸映射关系；根据所述目标显示尺寸映射关系，对所述源网页资源数据中的尺寸进行调整，形成与所述终端类型匹配的目标网页资源数据，其中，所述目标网页资源数据用于在与所述终端类型匹配的目标终端中，以显示尺寸显示目标网页，所述显示尺寸根据所述目标显示尺寸映射关系确定。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、RAM、只读存储器(Read OnlyMemory，ROM)、可擦式可编程只读存储器(Erasable Programmable Read Only Memory，EPROM)、闪存、光纤、便携式CD-ROM、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括——但不限于——电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于——无线、电线、光缆、无线电频率(RadioFrequency，RF)等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括LAN或WAN——连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (10)

1.一种网页资源数据生成方法，其特征在于，包括：

获取源网页资源数据和终端类型；

根据所述终端类型，获取与所述终端类型匹配的目标显示尺寸映射关系；

根据所述目标显示尺寸映射关系，对所述源网页资源数据中的尺寸进行调整，形成与所述终端类型匹配的目标网页资源数据，其中，所述目标网页资源数据用于在与所述终端类型匹配的目标终端中，以显示尺寸显示目标网页，所述显示尺寸根据所述目标显示尺寸映射关系确定。

2.根据权利要求1所述的方法，其特征在于，所述根据所述终端类型，获取与所述终端类型匹配的目标显示尺寸映射关系，包括：

根据所述终端类型，确定目标映射类型，所述终端类型包括：移动端类型或电脑端类型，所述映射类型包括单位映射类型和尺寸映射类型；

获取与所述目标映射类型匹配的目标显示尺寸映射关系，确定为与所述终端类型匹配的目标显示尺寸映射关系。

3.根据权利要求2所述的方法，其特征在于，所述终端类型为移动端类型，所述目标映射类型为单位映射类型；

所述根据所述目标显示尺寸映射关系，对所述源网页资源数据中的尺寸进行调整，形成与所述终端类型匹配的目标网页资源数据，包括：

根据所述目标显示尺寸映射关系包括的第一度量和第二度量之间的单位映射比例，分别计算所述源网页资源数据包括的各第一尺寸与所述单位映射比例的乘积，得到各所述第一尺寸对应的第二尺寸，所述第一尺寸的单位为第一度量，所述第二尺寸的单位为第二度量；

将所述源网页资源数据中各第一尺寸分别替换为对应的第二尺寸，形成与所述终端类型匹配的目标网页资源数据，所述目标网页资源数据用于移动端根据各所述第二尺寸和当前浏览器尺寸，确定各所述第二尺寸对应的显示尺寸，并以各所述显示尺寸显示所述目标网页中的各网页元素。

4.根据权利要求2所述的方法，其特征在于，所述终端类型为电脑端类型；所述目标映射类型为尺寸映射类型；

所述根据所述目标显示尺寸映射关系，对所述源网页资源数据中的尺寸进行调整，形成与所述终端类型匹配的目标网页资源数据，包括：

根据所述目标显示尺寸映射关系包括的第一尺寸和第三尺寸之间的尺寸映射比例，分别计算所述源网页资源数据包括的各第一尺寸与所述尺寸映射比例的乘积，得到各所述第一尺寸对应的第三尺寸，所述第一尺寸的单位与所述第三尺寸的单位相同；

将所述源网页资源数据中各第一尺寸分别替换为对应的第三尺寸，形成与所述终端类型匹配的目标网页资源数据，所述目标网页资源数据用于电脑端将各所述第三尺寸确定为显示尺寸，并以各所述显示尺寸显示所述目标网页中的各网页元素。

5.根据权利要求1所述的方法，其特征在于，所述根据所述目标显示尺寸映射关系，对所述源网页资源数据中的尺寸进行调整，形成与所述终端类型匹配的目标网页资源数据，包括：

获取与所述终端类型匹配的目标打包软件，所述目标打包软件配置有所述目标显示尺寸映射关系；

在所述源网页资源数据的编译过程中，通过所述目标打包软件，根据所述目标显示尺寸映射关系对所述源网页资源数据进行编译打包，形成目标网页数据包，所述目标网页数据包包括所述目标网页资源数据。

6.根据权利要求1所述的方法，其特征在于，在根据所述终端类型，获取与所述终端类型匹配的目标显示尺寸映射关系之前，还包括：

配置标准宽度；

获取移动端类型的通用宽度；

根据所述标准宽度和所述移动端类型的通用宽度，确定所述移动端类型匹配的显示尺寸映射关系；

获取电脑端类型的通用高度，并确定所述电脑端类型的通用宽度；

根据所述标准宽度和所述电脑端类型的通用宽度，确定所述移动端类型匹配的显示尺寸映射关系。

7.根据权利要求6所述的方法，其特征在于，所述标准宽度的单位为像素；所述移动端类型的通用宽度的单位为视口宽度，所述电脑端类型的通用高度和通用宽度的单位为像素。

8.一种网页资源数据生成装置，其特征在于，配置于图形处理器，包括：

终端类型获取模块，用于获取源网页资源数据和终端类型；

尺寸映射关系获取模块，用于根据所述终端类型，获取与所述终端类型匹配的目标显示尺寸映射关系；

目标网页资源数据生成模块，用于根据所述目标显示尺寸映射关系，对所述源网页资源数据中的尺寸进行调整，形成与所述终端类型匹配的目标网页资源数据，其中，所述目标网页资源数据用于在与所述终端类型匹配的目标终端中，以显示尺寸显示目标网页，所述显示尺寸根据所述目标显示尺寸映射关系确定。

9.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-7中任一所述的网页资源数据生成方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-7中任一所述的网页资源数据生成方法。

Images