具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明的主要解决方案是：获取第一终端的第一屏幕分辨率、第二终端的第二屏幕分辨率以及目标网页页面在所述第一终端显示时的原始图像分辨率；根据所述第一屏幕分辨率确定第一根元素字体尺寸，根据所述第二屏幕分辨率确定第二根元素字体尺寸；根据所述第一根元素字体尺寸、所述第二根元素字体尺寸和所述原始图像分辨率确定所述目标网页页面在所述第二终端显示时的图像分辨率。

由于通过area标签属性生成具有热点区域的网页页面时，热点区域的坐标点不会随着显示窗口的调整而变化，而不同移动终端对应的coords属性坐标是不同的，使得设置有热点区域的网页页面无法适配不同的移动终端。因而，本发明提出上述解决方案，旨在使设置有热点区域的网页页面适配不同的移动终端，以提高具有热点区域的网页页面在不同移动终端上显示时的显示效果。

参照图1，图1为本发明实施例方案涉及的硬件运行环境的显示终端结构示意图。

如图1所示，该显示终端可以包括：通信总线1002，处理器1001，例如CPU，用户接口1003，网络接口1004，存储器1005。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。存储器1005可以是高速RAM存储器，也可以是稳定的存储器(non-volatile memory)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。

本领域技术人员可以理解，图1中示出的显示终端结构并不构成对显示终端的限定，可以包括比图示更多或更少的部件，或组合某些部件，或者不同的部件布置。

在图1所示的显示终端中，网络接口1004主要用于连接后台服务器，与后台服务器进行数据通信；用户接口1003主要用于连接客户端(用户端)，与客户端进行数据通信；而处理器1001可以用于调用存储器1005中存储的页面适配程序，并执行以下页面适配方法的各个实施例的相关步骤。

参照图2，图2为本发明页面适配方法的第一实施例流程图，本实施例中，所述页面适配方法包括以下步骤：

步骤S10：获取第一终端的第一屏幕分辨率、第二终端的第二屏幕分辨率以及目标网页页面在所述第一终端显示时的原始图像分辨率；

步骤S20：根据所述第一屏幕分辨率确定第一根元素字体尺寸，根据所述第二屏幕分辨率确定第二根元素字体尺寸；

步骤S30：根据所述第一根元素字体尺寸、所述第二根元素字体尺寸和所述原始图像分辨率确定所述目标网页页面在所述第二终端显示时的图像分辨率。

需要说明的是，第一终端指的是目标网页页面当前适配的终端设备，如，电脑；第二终端指的是目标网页页面需要进行适配的终端设备，如，手机；目标网页页面指的是当前设置热点区域后，需要进行页面适配的网页页面；第一屏幕分辨率指的是第一终端的显示分辨率，第二屏幕分辨率指的是第二终端的显示分辨率，原始图像分辨率指的目标网页页面在第一终端上进行设置与显示时的图像分辨率。

为了提高页面适配的有效性，避免在无需进行页面适配时进行页面适配占用系统资源，可在进行页面适配之前，获取第一终端所属的终端类型（第一类型）和第二终端所属的终端类型（第二类型），然后将第一类型与第二类型进行比对，以确认是否需要对目标网页页面进行页面适配。若第二类型与第一类型一致，则说明第一屏幕分辨率与第二屏幕分辨率一致，无需进行页面适配。此时，可以原始图像分辨率作为目标网页页面在第二终端显示时的图像分辨率。若第二类型与第一类型不一致，则说明第一屏幕分辨率与第二屏幕分辨率不一致，需要进行页面适配，才能使目标网页页面适配于第二终端，以达到较好的显示效果，避免目标网页页面在第二终端上显示过小不便查阅，或目标网页页面在第二终端上显示过大导致图像清晰度欠佳或超出第二终端的显示界面。

在需要对目标网页页面进行页面适配时，为了提高页面适配的有效性，可基于根元素字体尺寸进行页面适配。具体可以是：根据第一终端对应的第一根元素字体尺寸、第二终端对应的第二根元素字体尺寸以及目标网页页面在第一终端显示时的原始图像分辨率确定目标网页页面在第二终端显示时的图像分辨率。其中，第一根元素字体尺寸可根据第一屏幕分辨率得到，第二根元素字体尺寸可根据第二屏幕分辨率得到。具体可以是：预先设置单位转换尺度，以将第一屏幕分辨率转换为第一根元素字体尺寸，将第二屏幕分辨率转换为第二根元素字体尺寸。这里，根元素字体尺寸指的是相对根元素（html）字体大小的尺寸单位，可根据不同终端的屏幕分辨率的不同，按照不同的基准进行动态调节。

例如，可将单位转换尺度设置为20rem，此时，若第一屏幕分辨率为640pi*320pi，第二屏幕分辨率为1280pi*320pi，则以屏幕宽度为基准时，对应得到的第一根元素尺寸为640pi/20rem=32pi/rem，第二根元素尺寸为1280pi/20pi=64pi/rem。当然，也可以是以屏幕高度为基准，可视具体情况进行合理选择。例如，在第一终端的屏幕宽度与第二终端的屏幕宽度与第二终端的屏幕宽度不一致时，以屏幕宽度为基准；在第一终端的屏幕高度与第二终端的屏幕高度不一致时，以屏幕高度为基准；在第一终端的屏幕宽度与第二终端的屏幕宽度不一致且第一终端的屏幕高度与第二终端的屏幕高度不一致时，可分别以屏幕宽度作为宽度基准，以屏幕高度作为高度基准等，此处不作具体限定。

在确定第一根元素字体尺寸和第二根元素字体尺寸之后，即可根据第一根元素字体尺寸、第二根元素字体尺寸和原始图像分辨率确定目标网页页面在第二终端显示时的图像分辨率。具体地，可根据第一根元素尺寸将目标网页页面在第一终端显示时的原始图像分辨率转换为第一根元素尺寸对应的目标尺寸，然后，根据目标尺寸和第二根元素尺寸确定目标网页页面在第二终端显示时的图像分辨率。例如，在第一根元素尺寸为32pi/rem，原始图像分辨率为320pi*160pi时，根据第一根元素尺寸转换得到的目标尺寸为320pi/(32pi/rem)=10rem，160pi/(32pi/rem)=5rem。也即，所得到的目标尺寸为10rem*5rem。此时，若第二根元素尺寸为64pi/rem，则得到目标网页页面在第二终端显示时的图像分辨率为10rem*64pi/rem=640pi，5rem*64pi/rem=320pi，也即，目标网页页面在第二终端显示时的图像分辨率为640pi*320pi。也即，可以第二根元素字体尺寸和第一根元素字体尺寸的商值作为目标网页页面在第二终端显示时的图像分辨率的缩放比例，将原始图像分辨率按照该缩放比例进行缩放即可确定目标网页页面在第二终端显示时的图像分辨率。

本实施例通过第一根元素字体尺寸、第二根元素字体尺寸和原始图像分辨率确定目标网页页面在第二终端显示时的图像分辨率，使得目标网页页面可以适配不同屏幕尺寸的终端设备，在不同的终端设备上都能达到较好的显示效果。

参照图3，图3为本发明页面适配方法的第二实施例流程图，本实施例中，步骤S10之前还包括：

步骤S01：加载并显示目标图像；

步骤S02：接收基于所述目标图像触发的热点区域的设置操作；

步骤S03：根据所述设置操作为所述目标图像设置至少一个热点区域，以获取所述目标网页页面。

在对目标网页页面进行页面适配之前，可在第一终端的目标网页页面设置界面上进行参数设置，以生成具有至少一个热点区域的目标网页页面，进而对目标网页页面进行页面适配，使其可以适配于第二终端。需要说明的是，热点区域指的是触发后可跳转至预先设置的跳转链接的图像区域。

可选地，可在目标网页页面的设置界面上输入图片地址以加载目标图像；或者是，在目标网页页面设置界面上的图片导入功能导入目标图像；或者是，通过图像扫描的方式导入目标图像等。为了提高目标网页页面配置的安全性，本实施例中，优选在目标网页页面设置界面上输入图片地址的方式加载目标图像并进行显示。需要说明的是，目标图像指的是需要添加热点区域以获取目标网页页面的图像。

在加载并显示目标图像后，可根据自身需求在目标网页页面设置界面上触发目标图像的热点区域的设置操作，如此，可根据所触发的设置操作为目标图像设置至少一个热点区域，使得可以灵活满足用户对目标网页页面的热点区域的设计需求。

可选地，在根据设置操作为目标图像设置热点区域时，可以设置热点区域在目标图像中的显示参数以及热点区域的跳转链接，以根据跳转链接在目标图像中按照所设置的显示参数生成热点区域，以形成目标网页页面。可选地，可设置的显示参数包括：热点区域的形状，如方形或圆形等；热点区域的旋转角度，如左旋30度，右旋60度；热点区域的固定位置，如预设热点区域模型所在的位置；热点区域的尺寸，如长宽高或半径等，此处不作具体限定。

不同的显示参数可通过不同的设置方式进行设置。本实施例中，一方面，可通过第一设置操作设置热点区域的形状和旋转角度。可选地，第一设置操作可以是点击操作、输入操作和/或滑动操作等操作中的至少一种，此处不作具体限定。例如，可通过点击操作从预先设置的形状按钮中选择所需设置的形状，以及从预先设置的旋转角度的进度条中选择所需设置的旋转角度；或者，可通过输入操作直接输入形状名称或形状图案等标识信息以从热点区域中获取与该标识信息匹配的形状，还可输入旋转方向和/或旋转角度等；或者，可通过滑动操作进行形状的切换，以选择所需设置的形状，且可通过滑动操作进行旋转方向和旋转角度的选择等。

另一方面，可通过第二设置操作设置热点区域的位置和尺寸。可选地，第二设置操作可以是点击操作、拖拽操作、缩放操作和/或输入操作等操作中的至少一种，此处不作具体限定。例如，可通过点击操作将热点区域设置在所点击的位置（使热点区域的中心与点击的位置重合），且可通过多次点击操作设置热点区域的尺寸，如，在热点区域为圆形时，可通过第一次点击操作设置圆心，通过第二次点击操作操作设置半径（第二次点击操作的点击位置与第一点击操作的点击位置的距离）。或者，可通过拖拽操作将预设热点区域模型拖拽至目标位置，以将目标位置设置为热点区域的位置；然后，通过缩放操作设置热点区域的尺寸等。

再一方面，可通过第三设置操作设置跳转链接。可选地，第三设置操作可以是输入操作、导入操作或扫描操作等，此处不作具体限定。例如，可直接在目标网页页面设置界面上跳转链接的输入框中输入；或者是，通过网址导入功能导入；或者是通过扫描二维码得到等。

可选地，第一设置操作、第二设置操作、第三设置操作可以相同也可以不同。为了提高显示参数和跳转链接输入的便捷性，本实施例中第一设置操作、第二设置操作、第三设置操作优选为不同的设置操作。可选地，第一设置操作可以是点击操作，第二设置操作可以是拖拉拽操作，第三设置操作可以是输入操作。当然，同一显示参数也可同时支持多种不同的设置方式，可由用户根据自身使用习惯进行灵活选择，此处不作具体限定。

在根据设置操作设置热点区域在目标图像中的显示参数以及跳转链接之后，可借助预先设置的热点区域模型在目标图像中生成热点区域。具体地，可先将热点区域模式从初始形态转变为所设置的形状、转转角度以及尺寸对应的形态，然后在目标图像上拖拽形态转变后的热点区域模型以将热点区域模式拖拽至想要生成热点区域的位置，然后触发添加链接操作以将跳转链接添加至热点区域模型，然后生成热点区域模型的副本，并将其固定在热点区域模型当前所在的位置，而当前热点区域模型依然处于可编辑状态，可进行显示参数与跳转链接的调整，以便用于生成下一个热点区域。

需要说明的是，在触发添加链接操作之前，可任意设置当前热点区域的显示参数以及跳转链接；而在触发添加链接操作之后，当前热点区域的显示参数和跳转链接将不可更改，仅可更改下一热点区域的显示参数与跳转链接。

可选地，在生成热点区域后，可通过单击热点区域的方式快速删除该热点区域；进一步地，为了实现热点区域的批量删除，可通过选择框同时选中多个热点区域后，触发热点区域的删除操作。

本实施例通过在目标图像中添加热点区域以获取目标网页页面，使得在将目标网页页面适配于不同的终端设备时，目标网页页面中的热点区域也能适配于不同的终端设备，避免热点区域过大容易误操作或热点区域过小不便于触发等，能够提高热点区域操作的便捷性。

参照图4，图4为本发明页面适配方法的第三实施例流程图，本实施例中，步骤S03之后，所述页面适配方法还包括：

步骤S04：在接收到代码复制操作时，生成所述目标网页页面的页面布局代码，并获取所述目标网页页面所需应用的应用平台的类型；

步骤S05：将所述页面布局代码转换成所述类型的应用平台适配的目标页面布局代码，以将所述目标页面布局代码应用于所述类型的应用平台。

在根据显示参数和跳转链接在目标图像中生成至少一个热点区域后，若接收到代码复制操作，则可自动生成与当前应用平台适配的目标网页页面的页面布局代码。例如，在H5浏览器进行网页页面的热点区域的配置时，对应生成的页面布局代码为与H5浏览器适配的页面布局代码。然而，不同平台类型对应的页面布局不同，对应适配的页面布局代码也会有所不同。因而，在生成目标网页页面的页面布局之后，还需要根据预先选择的应用平台的类型将目标网页页面的页面布局代码转换为与所选择的应用平台类型（如，微信小程序）适配的目标页面布局代码，使得在将目标页面布局代码应用于所选择的应用平台类型时，不会出现乱码以及布局错乱等问题。

具体地，要将目标网页页面的页面布局代码转换为目标页面布局代码，一方面要实现分区与节点的映射，另一方面还要实现超链接功能的映射。以H5浏览器和微信小程序为例，可将H5浏览器对应的页面布局代码中的Div标签映射为微信小程序对应的页面布局代码中的view标签；并且，H5浏览器对应的页面布局代码中a链接的href功能可通过微信小程序的自定义组件的功能进行映射。具体可以是：将页面布局代码解析成抽象语法树后，按照当前应用平台与待应用的应用平台之间的节点映射关系和功能映射关系对抽象语法树进行遍历和替换以生成新的抽象语法树，然后对新的抽象语法树进行编译以生成目标页面布局代码。

可选地，在根据显示参数和跳转链接在目标图像中生成至少一个热点区域后，在接收到代码复制操作时，若目标网页页面应用于第二终端，则可先执行获取第一终端的第一屏幕分辨率、第二终端的第二屏幕分辨率以及目标网页页面在第一终端显示时的原始图像分辨率的步骤，以确定目标网页页面在第二终端显示时的图像分辨率，然后结合目标网页页面的页面布局以及所确定的图像分辨率生成页面布局代码，并将页面布局代码转换为目标页面布局代码，如此，既可以使得页面布局代码可适用于不同的应用平台，而且使得不同的终端设备在运行页面代码时，能够按照不同终端设备的显示尺寸进行显示。

本实施例通过将页面布局代码转换成所选地的应用平台所适配的目标页面布局代码，使得可将目标页面布局代码应用于所选择的应用平台，避免因代码不适配导致出现乱码以及布局错乱等问题，而影响目标网页页面在所选择的应用平台进行显示时的显示效果。

参照图5，图5为本发明页面适配方法一具体的应用实例的流程示意图。该应用实例中的页面适配方法包括以下步骤：

步骤S1：基于HTML+JS+CSS前端技术搭建图片热点区域生成系统；

步骤S2：配置图片地址，跳转链接，跨平台类型，图像热点区域形状类型等参数值；

步骤S3：动态添加，修改，删除超链接，并拖拽调整热点该图片的位置；

步骤S4：根据生成的热点区域模型计算适配不同的移动端并且生成不同跨平台支持的代码；

例如，现阶段h5移动端适配大多会采用css rem单位布局，rem单位是相对于html标签的font-size属性值，所以只需要用js计算不同移动端设备的font-size值，即能保证在不同移动端rem不变的情况下热点区域相对于图像的位置都在同一个位置。

步骤S5：一键快速复制生成的热点区域代码，方便运营人员快速操作；

如此，能够整合所有不同平台场景，达到跨平台适配的效果；而且，能够快速配置banner图片区域超链接，以提升运营人员的运营效率；并且，能够减少企业投入的研发成本，节约开发时间。其中，基于HTML+JS+CSS前端技术搭建图片热点区域生成系统的界面图，如图6所示。

此外，本发明实施例还提供一种显示终端，所述显示终端包括存储器、处理器及存储在所述处理器上并可在处理器上运行的页面适配程序，所述处理器执行所述页面适配程序时实现如上所述页面适配方法的步骤。

此外，本发明实施例还提供一种可读存储介质，所述可读存储介质上存储有页面适配程序，所述页面适配程序被处理器执行时实现如上所述的页面适配方法的步骤。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，电视，或者网络设备等)执行本发明各个实施例所述的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。