CN107256259B - 页面显示方法、装置、电子设备以及存储介质 - Google Patents

Abstract

本发明公开了一种页面显示方法、装置、电子设备以及存储介质。其中，基于页面中第一元素的样式设计信息，设定第二元素的样式，以将第二元素与第一元素绑定为关联整体，关联显示在页面中；响应于第一元素的缩放变化，重新设定第二元素的位置和/或尺寸，使得重新设定后的第二元素的变化比例与第一元素的变化比例基本一致。由此，可以将不同的元素绑定为关联整体关联显示在页面中，并且响应于一个元素的缩放，另一个元素可以实现等比缩放。

Description

页面显示方法、装置、电子设备以及存储介质

技术领域

本发明涉及页面显示技术领域，特别是涉及一种页面显示方法、装置、电子设备以及存储介质。

背景技术

随着互联网的不断普及与发展，基于页面浏览信息逐渐成为人们获取信息的主要方式。目前供用户浏览的页面可以显示文字、图片、视频等多种类型的内容，以充分满足用户的浏览需求。

以页面中显示的图片为例，页面显示的图片中可以具有图形元素和文字元素，由于页面中的图片大部分是位图，位图的分辨率随着尺寸的变化而变化，因此在将图片放大时，图片本身具有的文字元素会随之放大造成失真，给用户一种页面粗糙的感觉，降低用户的浏览体验。

为了避免这种情况的发生，对于需要与图片关联显示的文字，例如需要嵌入在图片中进行显示的文字，可以利用CSS(层叠样式表)将需要与图片关联显示的文字插入图片中，即可以通过代码实现文字和图片的关联显示，由于文字是基于代码布局在页面中的，因此在图片缩放时，不会出现由于文字失真而造成的页面粗糙感。

但是这种情况下如何使得图片缩放时，基于图片布局的文字也能随着图片进行比例一致的缩放，是目前面临的主要问题。

发明内容

本发明的主要目的在于提供一种能够页面显示方法、装置、电子设备以及存储介质，其能够实现不同元素的等比例缩放。

根据本发明的一个方面，提供了一种页面显示方法，包括：基于页面中第一元素的样式设计信息，设定第二元素的样式，以将第二元素与第一元素绑定为关联整体，关联显示在页面中；以及响应于第一元素的缩放变化，重新设定第二元素的位置和/或尺寸，使得重新设定后的第二元素的变化比例与第一元素的变化比例基本一致。

由此，利用本发明可以将两个独立的元素绑定为关联整体关联显示在页面中，并且响应于一个元素的缩放，另一个元素可以实现等比缩放。

优选地，第一元素的尺寸是以屏幕宽度为自变量设定的，重新设定第二元素的位置和/或尺寸的步骤可以包括：以第一元素为参考基准、屏幕宽度为自变量设定第二元素相对于第一元素的位置信息，以使得响应于第一元素的缩放变化，第二元素相对于第一元素的相对位置比例关系基本不变。

由此，第一元素可以响应于当前屏幕宽度的变化进行自适应缩放，而响应于第一元素的缩放变化，第二元素的位置信息可以发生相应变化，以使得第二元素相对于第一元素的相对位置比例关系基本不变。

优选地，页面中具有多个第二元素，多个第二元素之间具有预定的层级关系，子节点对应的第二元素的尺寸是以其父节点对应的第二元素的尺寸为基准单位设置的，重新设定第二元素的位置和/或尺寸的步骤可以包括：根据第一元素的缩放比例，重新设定父节点对应的第二元素的尺寸，以使得重新设定后的第二元素的尺寸与第一元素的缩放比例基本一致。

由此，在第一元素发生缩放变化后，仅需要重新设定父节点的第二元素的尺寸，使得重新设定后的父节点的第二元素的尺寸与第一元素的缩放比例一致或基本一致，就可以实现所有的第二元素的尺寸与第一元素的缩放比例一致或基本一致。

优选地，页面的页面文件中设有一个或多个针对不同屏幕宽度或屏幕宽度范围的样式设计，重新设定第二元素的位置和/或尺寸的步骤还可以包括：响应于第一元素的缩放变化，从一个或多个样式设计中选取与当前屏幕宽度接近的样式设计；基于选取的样式设计重新设定第二元素的尺寸。

由此，可以避免用户最开始看到的第二元素的尺寸与第一元素的尺寸严重不一致的情况的发生。

优选地，页面中具有多个第二元素，多个第二元素之间具有预定的层级关系，子节点的第二元素的尺寸是以其父节点的第二元素的尺寸为基准尺寸设置的，重新设定第二元素的位置和/或尺寸的步骤还可以包括：响应于第一元素的缩放变化执行完毕，根据第一元素的缩放比例，重新设定父节点的第二元素的尺寸，以使得重新设定后的第二元素的尺寸与第一元素的缩放比例基本一致。

由此，在对第一元素进行缩放时，可以首先基于预设的样式范围对第二元素的尺寸进行粗调，避免用户最开始看到的第二元素的尺寸与第一元素的尺寸严重不一致的情况发生，然后可以利用第一种尺寸设定方式通过执行js，对第二元素的尺寸进行精细调节，以实现等比例缩放。

优选地，第一元素为分辨率不随显示尺寸变化而变化的元素，或者为分辨率随显示尺寸变化而变化的元素，第二元素为分辨率不随显示尺寸变化而变化的元素。

根据本发明的另一个方面，还提供了一种页面显示装置，包括：设定模块，用于基于页面中第一元素的样式设计信息，设定第二元素的样式，以将第二元素与第一元素绑定为关联整体，关联显示在页面中；重新设定模块，用于响应于第一元素的缩放变化，重新设定第二元素的位置和/或尺寸，使得重新设定后的第二元素的变化比例与第一元素的变化比例基本一致。

优选地，第一元素的尺寸是以屏幕宽度为自变量设定的，重新设定模块以第一元素为参考基准、屏幕宽度为自变量设定第二元素相对于第一元素的位置信息，以使得响应于第一元素的缩放变化，第二元素相对于第一元素的相对位置比例关系基本不变。

优选地，页面中具有多个第二元素，多个第二元素之间具有预定的层级关系，子节点对应的第二元素的尺寸是以其父节点对应的第二元素的尺寸为基准单位设置的，重新设定模块根据第一元素的缩放比例，重新设定父节点对应的第二元素的尺寸，以使得重新设定后的第二元素的尺寸与第一元素的缩放比例基本一致。

优选地，页面的页面文件中设有一个或多个针对不同屏幕宽度或屏幕宽度范围的样式设计，重新设定模块响应于第一元素的缩放变化，从一个或多个样式设计中选取与当前屏幕宽度接近的样式设计，并基于选取的样式设计重新设定第二元素的尺寸。

优选地，页面中具有多个第二元素，多个第二元素之间具有预定的层级关系，子节点的第二元素的尺寸是以其父节点的第二元素的尺寸为基准尺寸设置的，重新设定模块响应于第一元素的缩放变化执行完毕，根据第一元素的缩放比例，重新设定父节点的第二元素的尺寸，以使得重新设定后的第二元素的尺寸与第一元素的缩放比例基本一致。

根据本发明的另一个方面，还提供了一种电子设备，包括：显示器；处理器；以及存储器，其上存储有可执行代码，当可执行代码被处理器执行时，使处理器执行上文述及的页面显示方法。

根据本发明的另一个方面，还提供了一种非暂时性机器可读存储介质，其上存储有可执行代码，当可执行代码被电子设备的处理器执行时，使处理器执行上文述及的页面显示方法。

综上，本发明的页面显示方法、装置、电子设备以及存储介质，可以根据第一元素的样式设计信息，另行设定第二元素的样式，可以实现将两个独立的元素绑定为关联整体关联显示在页面中，并且响应于一个元素的缩放，另一个元素可以实现等比缩放。

附图说明

通过结合附图对本公开示例性实施方式进行更详细的描述，本公开的上述以及其它目的、特征和优势将变得更加明显，其中，在本公开示例性实施方式中，相同的参考标号通常代表相同部件。

图1是用户实现本发明实施例的环境示意图。

图2是示出了根据本发明一实施例的页面显示方法的示意性流程图。

图3是示出了根据本发明一实施例的页面显示装置的结构的示意性方框图。

图4是示出了根据本发明一实施例的电子设备的结构的示意性方框图。

图5是示出了文字布局在图片内时的示意图。

具体实施方式

下面将参照附图更详细地描述本公开的优选实施方式。虽然附图中显示了本公开的优选实施方式，然而应该理解，可以以各种形式实现本公开而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

在描述本发明之前，首先就本发明的适用场景进行说明。对于那些原本作为一个整体显示在页面中，但是分辨率会随着尺寸的变化而变化的元素，在对页面执行放大操作时，这些元素会出现一定程度上的失真，用户看起来会有一种模糊感。

例如，显示在页面中的图片大部分是位图，对于同时包含图形元素和文字元素的图片来说，在对页面或图片进行放大时，图片中的图形和文字的分辨率会随之下降，由于文字的分辨率的下降会明显给用户造成一种模糊感，从而会降低用户的浏览体验。特别是在各种运营活动的页面中，具有文字内容的图片被大量使用，在这些场合下图片的放大给用户带来的粗糙感尤为突出。再例如，显示在页面中的图片中可能包括多个图形部分，在对图片进行放大时，图片中较小或较为重要的图形部分的失真也会降低用户的浏览体验。

针对这种现象，发明人在深入研究后发现，对于页面中放大易失真的但是需要和其它关联元素作为整体显示的元素(为便于描述，这里称为目标元素)，可以将其和关联元素拆开显示在页面中，这样可以对目标元素进行特定处理以使得其放大时不易失真，由此在缩放时可以改善或解决由于目标元素的失真给用户造成的模糊感。例如，对于原本属于同一位图中的图片和文字来说，可以提取位图中的文字信息，将文字信息以代码的形式显示在页面中，即通过代码将文字插入页面中，由此在缩放时不会出现由于文字失真而造成的页面粗糙感。再例如，对于位图中较小或较重要的图形部分，也可以将其提取出来，然后将其转换为分辨率更高的位图或者分辨率不会随着尺寸的变化而变化的矢量图，然后将转换后的图片插入页面，由此也可以提高用户的浏览体验。

但是在将目标元素与关联元素分离后，如何使其仍能与关联元素作为整体显示在页面中，并且响应于页面的缩放操作，目标元素和关联元素能够实现等比例的缩放是面临的主要问题。

为此，本发明提出了一种可以实现等比缩放的页面显示方案，本发明的页面显示方案可以根据其它关联元素在页面中的样式设置信息，另行设计目标元素的样式，使得目标元素仍可以与其关联元素作为整体关联显示在页面中。其中，此处述及的关联显示是指在进行页面缩放时，目标元素能够与其关联元素进行等比例或近似等比例地缩放。需要说明的是，在无特别说明的情况下，本发明述及的“一致”可以表示一致或基本一致。

本发明提供的页面显示方案可应用于如图1所示的环境中。图1是用于实现本发明实施例的环境200的示意图。在一个实施例中，环境200中的终端设备10可以经由网络40实现与服务器20的信息收发。服务器20可以通过访问数据库30来获取终端设备10所需的内容。终端设备之间(例如，10_1与10_2……10_N之间)也可以经由网络40彼此通信。网络40可以是广义上的用于信息传递的网络，可以包括一个或多个通信网络，诸如无线通信网络、因特网、私域网、局域网、城域网、广域网或是蜂窝数据网络等。在一个实施例中，网络40也可以包括卫星网络，由此将终端设备10的GPS信号传送给服务器20。应当注意，如果向图示200中添加或从图示200中去除附加模块，不会改变本发明的示例实施例的底层概念。另外，虽然为了方便说明而在图中示出了从数据库30到服务器20的双向箭头，但本领域技术人员可以理解，上述数据收发也是可以通过网络40实现。

终端设备10是可用来进行网络访问的任何合适的便携式移动电子设备，包括但不限于智能电话、平板电脑或是其他便携式客户端。服务器20则是能够通过网络访问的提供交互服务所需信息的任何服务器。图中虽然示出了多个终端设备10-1…N以及单个服务器20和数据库30，并且在随后的描述中会选择其中的一个或部分终端设备加以描述(例如，终端设备10-1)，但是本领域技术人员应该立即的是，上述1…N个终端设备旨在表示真实网络中存在的多个终端设备，示出的单个服务器20和数据库30旨在表示本发明的技术方案涉及服务器及数据库的操作。对特定编号的终端设备以及单个服务器和数据库加以详述至少为了说明方便，而非暗示对终端设备和服务器的类型或是位置等具有限制。

服务器20可以预先执行图2所示的页面显示方法来配置页面文件。终端设备10可以通过安装在其上的互联网应用(例如，浏览器APP、新闻类APP)向对应的服务器20请求页面数据。响应于终端设备10的页面请求，服务器20可以向终端设备10发送配置好的页面文件，终端设备10仅需接收页面文件，按照页面文件中的源代码所体现的逻辑对页面文件进行解析、排版、渲染等处理即可实现在终端设备10上显示所请求的页面内容，而基于页面文件的源代码所体现的逻辑，就可以实现相应的显示效果。

实施例一、

图2是示出了根据本发明一实施例的页面显示方法的示意性流程图。如图2所示，方法于步骤S210开始。

在步骤S210，基于页面中第一元素的样式设计信息，设定第二元素的样式，以将第二元素与第一元素绑定为关联整体，关联显示在页面中。

如上文所述，本发明针对的是页面中放大易失真的但是需要和其它关联元素作为整体显示的目标元素，目的是在保证目标元素能够和其关联元素仍作为整体显示在页面中的同时，改善或解决目标元素的放大失真问题。

为了改善或解决目标元素的放大易失真的问题，可以将目标元素转换为放大不易失真的元素，即本发明述及的第二元素，例如可以将目标元素转换为分辨率不随尺寸的变化而变化的第二元素。其中，这里述及的转换并不代表一定需要执行具体的转换操作。例如，对于目标元素为文字、其它关联元素为图形，文字和图像存在与一个整体位图中的情形，可以提取位图中的文字内容，然后将文字内容以浏览器文字的形式呈现在页面中，即通过代码的形式将文字插入页面中，由此在缩放时不会出现由于文字失真而造成的页面粗糙感。再例如，对于包括多个图形部分的位图，较小的或较为重要的图形部分可以视为目标元素，其它图形部分可以视为其它关联元素，此时可以先将目标元素所对应的图形部分转换为分辨率不随尺寸的变化而变化的矢量图或者分辨率较高的其它格式的图形，以得到第二元素。

本文述及的第一元素与上文述及的其他关联元素相对应，是第二元素关联的需要与其作为整体显示的元素。由于本发明主要是针对第二元素进行的，因此第一元素的样式设计信息可以按照之前目标元素和其它关联元素作为整体显示在页面中的样式设计信息进行设计，并且第二元素可以是分辨率随着尺寸变化而变化的元素，或者也可以是分辨率不随尺寸变化而变化的元素，即第二元素可以等同上文述及的其它关联元素，也可以是对其它关联元素的分辨率进行重设定后得到的元素。其中，此处述及的样式设计信息主要包括显示在页面中的显示属性相关的信息，例如可以是页面中的CSS(样式层叠表)信息。

在设计第二元素在页面中的样式(即CSS属性信息)时，需要参考第一元素的样式设计，以将第二元素与第一元素绑定为关联整体，关联显示在页面中。这里所说的关联显示是指在进行页面缩放时，第二元素能够与第一元素进行等比例或近似等比例地缩放。

因此，第二元素的样式应被设计为，响应于第一元素的缩放变化，可以执行步骤S220，重新设定第二元素的位置和/或尺寸，使得重新设定后的第二元素的变化比例与第一元素的变化比例基本一致。

实施例二、

在本实施例中将对第一元素和第二元素的样式设计的具体可行实现方式做进一步说明。

在设计第一元素的样式时，可以以屏幕宽度为参考基准进行设置，其中，这里述及的屏幕宽度是指显示页面时的画布尺寸，而非显示页面的终端设备的显示器的物理屏幕宽度。具体地，可以以屏幕宽度为自变量设定第一元素的显示尺寸。例如，第一元素的显示尺寸可以被设置为(currentScreenWidth/screenWidth)*font-size。其中，currentScreenWidth为当前屏幕宽度，screenWidth为基准屏幕宽度，font-size为预先设定的尺寸参数，即当前屏幕宽度等于基准屏幕宽度时第一元素的显示尺寸。

在设计第二元素的样式时，主要包括对第二元素的位置设置和尺寸设置，以使得响应于第一元素的缩放，第二元素和第一元素间的相对位置比例关系基本不变，并且第二元素的尺寸能够随着第一元素的缩放进行比例一致或基本一致的缩放。

1、第二元素的位置设定

在设定第二元素的位置时，可以以第一元素的位置信息为参考基准进行设置，以使得第二元素相对于第一元素的相对位置比例关系基本不变。具体地，在以屏幕宽度为自变量设定第一元素的显示尺寸时，可以以第一元素为参考基准、屏幕宽度为自变量设定第二元素相对于第一元素的位置信息，以使得响应于第一元素的缩放变化，第二元素相对于第一元素的相对位置比例关系基本不变。

作为本发明的一个示例，可以首先确定初始状态下第二元素相对于第一元素的相对位置信息，此处述及的相对位置信息可以包括left信息(第二元素相对于第一元素左侧的位置信息)和top信息(第二元素相对于第一元素顶部的位置信息)，在对第一元素进行缩放操作时，可以根据当前屏幕宽度重新设定第二元素相对于第一元素的相对位置信息。由此，第二元素的与位置相关的css属性可以设计为left＝(currentScreenWidth/screenWidth)*初始left；top＝(currentScreenWidth/screenWidth)*初始top。

2、第二元素的尺寸设定

可以首先确定第二元素的初始尺寸，然后根据缩放程度重新设定第二元素的尺寸。需要说明的是，在第二元素的数量较多时，逐个对第二元素的尺寸进行缩放的方式执行起来较为繁琐。为此，本发明提出了一种实现起来简单高效的尺寸设定方式。

具体来说，可以针对多个第二元素设置预定的层级关系，根据层级关系确定第二元素的尺寸。具体地，在设定子节点的第二元素的尺寸时，可以以其父节点对应的第二元素的尺寸为基准单位进行设置。例如，假设子节点A需要设定的尺寸大小为6，其父节点B需要设定的尺寸大小为12，则可以以12为基准单位1em(基准单位)，那么子节点A的尺寸即为0.5em。这样，在响应于第一元素的缩放，重新设定多个第二元素的尺寸时，由于子节点的尺寸都是以父节点的尺寸为基准单位进行设置的，因此仅需要重新设定父节点的第二元素的尺寸，使得重新设定后的父节点的第二元素的尺寸与第一元素的缩放比例一致或基本一致，就可以实现所有的第二元素的尺寸与第一元素的缩放比例一致或基本一致。

由于js的执行一般会落后于onload事件，因此，可能会出现第一元素缩放完成后，第二元素的尺寸的缩放还未完成的情况，由此可能会导致用户最开始看到的第二元素的尺寸与第一元素的尺寸严重不一致。

为此，本发明还提出了另一种确定第二元素的尺寸的方式。具体地，可以预先设定一个或多个针对不同屏幕宽度或屏幕宽度范围的样式设计，然后响应于第一元素的缩放，可以直接从多个样式设计中选取与当前屏幕宽度接近的样式设计，然后基于选取的样式设计就可以直接设定第二元素的尺寸。作为示例，可以在CSS中预先写入如下多个屏幕范围的样式：

@media all and(min-width:320px)and(max-width:359px)；

@media all and(min-width:360px)and(max-width:374px)；

@media all and(min-width:375px)and(max-width:479px)；

@media all and(min-width:480px)and(max-width:639px)；

@media all and(min-width:640px)。

这种方案能够避免用户最开始看到的第二元素的尺寸与第一元素的尺寸严重不一致的情况发生，但是由于预先设计的屏幕范围的样式仅是粗浅范围的样式，不能保证所选取的样式与实际缩放的尺度精准一致，因此为了保证第一元素和第二元素的缩放比例能够精准一致，可以将上述两种尺寸设定方案结合起来使用。

具体地，在对第一元素进行缩放时，可以首先基于预设的样式范围对第二元素的尺寸进行粗调，避免用户最开始看到的第二元素的尺寸与第一元素的尺寸严重不一致的情况发生，然后可以利用第一种尺寸设定方式通过执行js，对第二元素的尺寸进行精细调节，以实现等比例缩放。

至此，对第一元素和第二元素的样式设计的可行实现方式做了详细说明。基于上述说明就可以分别针对第一元素和第二元素设计具体的CSS样式，以使得第一元素和第二元素可以作为一个整体显示在页面中，并且在缩放操作时，第一元素和第二元素的尺寸和位置均能够进行等比例或近似等比例的缩放。

实施例三、

图3是示出了根据本发明一实施例的页面显示装置的结构的示意性方框图。其中，页面显示装置300的功能模块可以由实现本发明原理的硬件、软件或硬件和软件的结合来实现。本领域技术人员可以理解的是，图3所描述的功能模块可以组合起来或者划分成子模块，从而实现上述发明的原理。因此，本文的描述可以支持对本文描述的功能模块的任何可能的组合、或者划分、或者更进一步的限定。

下面仅就页面显示装置300可以具有的功能模块以及各功能模块可以执行的操作做简要说明，对于其中涉及的细节部分可以参见上文描述，这里不再赘述。

需要说明的是，图3所示的页面显示装置300可以位于服务器端，用于配置页面文件，也可以位于客户端，用于根据接收到的页面文件显示页面内容。如上文所述，可以由服务器端利用本发明的页面显示方案对页面文件进行配置，并响应于客户端的页面请求下发相应的页面文件，客户端在接收到页面文件后按照现有的页面文件处理逻辑对页面文件进行解析、排版、渲染即可实现在客户端上显示所请求的页面内容。因此在图3所示的页面显示装置300位于客户端时，此时页面显示装置300所包含的各功能模块可以由客户端已有的处理模块实现。换句话说，虽然下文描述的是页面显示装置300中的功能模块所执行的操作，但是显示装置300所执行的操作是基于接收到的页面配置文件然后按照其中源代码体现的逻辑所执行相应的处理。

参见图3，页面显示装置300包括设定模块310和重新设定模块320。

设定模块310可以基于页面中第一元素的样式设计信息，设定第二元素的样式，以将第二元素与第一元素绑定为关联整体，关联显示在页面中。

重新设定模块320可以响应于第一元素的缩放变化，重新设定第二元素的位置和/或尺寸，使得重新设定后的第二元素的变化比例与第一元素的变化比例基本一致。

作为本发明的一个可选实施例，第一元素的尺寸是以屏幕宽度为自变量设定的，重新设定模块320可以以第一元素为参考基准、屏幕宽度为自变量设定第二元素相对于第一元素的位置信息，以使得响应于第一元素的缩放变化，第二元素相对于第一元素的相对位置比例关系基本不变。

作为本发明的一个可选实施例，页面中具有多个第二元素，多个第二元素之间具有预定的层级关系，子节点对应的第二元素的尺寸是以其父节点对应的第二元素的尺寸为基准单位设置的，重新设定模块320可以根据第一元素的缩放比例，重新设定父节点对应的第二元素的尺寸，以使得重新设定后的第二元素的尺寸与第一元素的缩放比例基本一致。

作为本发明的一个可选实施例，页面的页面文件中设有一个或多个针对不同屏幕宽度或屏幕宽度范围的样式设计，重新设定模块320可以响应于第一元素的缩放变化，从一个或多个样式设计中选取与当前屏幕宽度接近的样式设计，并基于选取的样式设计重新设定第二元素的尺寸。

作为本发明的一个可选实施例，页面中具有多个第二元素，多个第二元素之间具有预定的层级关系，子节点的第二元素的尺寸是以其父节点的第二元素的尺寸为基准尺寸设置的，重新设定模块320可以响应于第一元素的缩放变化执行完毕，根据第一元素的缩放比例，重新设定父节点的第二元素的尺寸，以使得重新设定后的第二元素的尺寸与第一元素的缩放比例基本一致。

实施例四、

本发明的页面显示方法还可以由一种电子设备实现。图4示出了根据本发明一个实施例的电子设备400的示意性框图。其中，电子设备400可以是图1所示的终端设备10。

如图4所示，本发明的电子设备400可以包括：显示器410、处理器420和存储器430。存储器430上可以存储有可执行代码，当可执行代码被处理器执行时，使处理器420执行本发明的页面显示方法。具体实现可以参见上文中图2的相关描述，在此不再赘述。

具体应用例

下面以第一元素为图片、第二元素为文字为例就本发明的页面显示方法的具体应用做进一步说明。

为了丰富页面内容，给用户更强的视觉冲击，在各种运营活动的页面中，图片被大量使用。由于页面中的图片大部分是位图，在将图片放大时，图片中本身具有的文字会随之放大造成失真，给用户一种页面粗糙的感觉。

为了避免这种情况的发生，对于需要与图片关联显示的文字，例如需要嵌入在图片中进行显示的文字，可以利用CSS(层叠样式表)将需要与图片关联显示的文字插入图片中，即可以通过代码实现文字和图片的关联显示，由于文字是基于代码布局在页面中的，因此在图片缩放时，不会出现由于文字失真而造成的页面粗糙感。

但是这种情况下如何使得图片缩放时，基于图片布局的文字也能随着图片进行比例一致的缩放，是目前面临的主要问题。

对于图片，可以利用现有的设定方式设定其CSS属性，例如，图片的CSS属性可以设计为，

position：relative；font-size:16*(currentScreenWidth/screenWidth)。其中，currentScreenWidth为当前屏幕宽度，screenWidth为初始状态下图片参考的基准屏幕宽度。对于文字而言，则需要设定其位置和存储，以使得在图片进行缩放时，文字和图片的相对位置比例关系基本不变，并且文字的大小的缩放比例与图片的缩放比例一致或基本一致。

1、文字位置的确定

如前文所述，本申请述及的文字是指基于图片布局在页面中的文字。图5示出了“图片”、“文字”在页面中的一种布局关系示意图。其中，图5是示出了文字布局在图片内的一种情形，应该知道，文字还可以布局在图片外部的上方、下方、左侧、右侧等等。文字与图片间的具体位置关系可以根据实际需要呈现给用户的显示效果确定。

可以通过CSS设置文字的样式。例如，其样式可以设计为position:absolute；font-size:(fsize/16)em。其中，font-size用于指示文字的位置，可以包括left和top，其中left为文字距离图片左边框的距离，top为文字距离图片上边框的距离，文字的基准大小为fsize。

在完成上述设定后，响应于用户对页面中显示的图片执行的缩放操作，图片可以自适应进行缩放，而通过计算当前屏幕大小currentScreenWidth＝window.innerWidth，就可以根据计算得到的当前屏幕大小重新确定文字的位置。

具体来说，可以根据计算得到的当前用户屏幕大小currentScreenWidth，确定文字的font-size，即文字的left、top。其中，文字的left＝(currentScreenWidth/screenWidth)*初始left；文字的top＝(currentScreenWidth/screenWidth)*初始top，由此，根据图片的缩放，就可以重新确定基于图片布局的文字的位置，使得重新定位后的文字和图片之间的相对位置关系和缩放之前的相对位置关系基本相同。其中，初始left、初始top是指文字在缩放前的left、top。

2、文字尺寸的确定

图片的缩放包括位置的变化和尺寸的缩放，相应地，基于图片布局的文字除了进行位置的变更，还应该进行尺寸的缩放。基于图片布局的文字可能有多个，如果对基于图片布局的文字逐个更改其尺寸，实现起来比较繁琐。为此，可以利用em特性快速实现文字的尺寸的缩放的方式。

具体来说，对于基于图片布局的文字，可以使用相对单位em标记文字的尺寸，其中，子节点对应的文字的尺寸是以其父节点对应的文字的尺寸为基准尺寸1em设置的。因此，通过改变父节点的文字的尺寸，所有采用em为单位的子节点的文字的尺寸都会相应发生改变。由此，可以根据图片的缩放尺寸，仅相应比例地改变父节点的文字的尺寸即可实现基于图片布局的所有文字的尺寸的缩放。

至此对本发明的图片文字等比缩放方案的基本实现过程做了详细说明。基于上文描述可知，本发明是通过js(JavaScript，一种直译式脚本语言)的执行来实现图片文字等比缩放的，但是由于js的执行一般是在浏览器触发onload事件后再执行的，即在图片缩放完成后再执行文字的缩放。由此可能导致用户最开始看到的文字尺寸可能与图片尺寸严重不一致。

针对这种情况，本申请发明人在深入研究后发现，可以预先设计针对若干屏幕范围的样式，在客户端用户对页面中的图片执行缩放操作时，可以根据屏幕缩放尺度，从预先设定的多个样式设计中选取与缩放尺寸接近的样式，基于所选取的样式设定文字的尺寸。由此，可以避免用户最开始看到的文字尺寸可能与图片尺寸严重不一致的情况的发生。

这种方案虽然能够避免用户最开始看到的文字尺寸可能与图片尺寸严重不一致的情况的发生，但是由于预先设计的屏幕范围的样式仅是粗浅范围的样式，不能保证所选取的样式与图片实际缩放的尺度精准一致，因此为了保证图片文字缩放的一致性，可以将这种方案与上文述及的文字尺寸设置方案结合起来。

具体地，在图片缩放时，可以首先基于预设的样式范围对基于图片布局的文字的尺寸进行粗调，避免用户最开始看到的文字尺寸与图片尺寸严重不一致的情况发生，然后可以通过执行js，对文字的尺寸进行精细调节，以实现图片文字的等比例缩放。

上文中已经参考附图详细描述了根据本发明的信息显示方法、装置及电子设备。此外，根据本发明的方法还可以实现为一种计算机程序或计算机程序产品，该计算机程序或计算机程序产品包括用于执行本发明的上述方法中限定的上述各步骤的计算机程序代码指令。

或者，本发明还可以实施为一种非暂时性机器可读存储介质(或计算机可读存储介质、或机器可读存储介质)，其上存储有可执行代码(或计算机程序、或计算机指令代码)，当所述可执行代码(或计算机程序、或计算机指令代码)被电子设备(或计算设备、服务器等)的处理器执行时，使所述处理器执行根据本发明的上述方法的各个步骤。

本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。

附图中的流程图和框图显示了根据本发明的多个实施例的系统和方法的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标记的功能也可以以不同于附图中所标记的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。

Claims (12)

1.一种页面显示方法，包括：

将页面中同一位图中的目标元素和第一元素分离；

将所述目标元素转换为分辨率不随尺寸的变化而变化的第二元素；

基于页面中所述第一元素的样式设计信息，设定所述第二元素的样式，以将所述第二元素与所述第一元素绑定为关联整体，关联显示在所述页面中；以及

响应于所述第一元素的缩放变化，重新设定所述第二元素的位置和/或尺寸，使得重新设定后的第二元素的变化比例与所述第一元素的变化比例基本一致。

2.根据权利要求1所述的页面显示方法，其中，所述第一元素的尺寸是以屏幕宽度为自变量设定的，所述重新设定所述第二元素的位置和/或尺寸的步骤包括：

以所述第一元素为参考基准、所述屏幕宽度为自变量设定所述第二元素相对于所述第一元素的位置信息，以使得响应于所述第一元素的缩放变化，所述第二元素相对于所述第一元素的相对位置比例关系基本不变。

3.根据权利要求2所述的页面显示方法，其中，所述页面中具有多个所述第二元素，多个所述第二元素之间具有预定的层级关系，子节点对应的第二元素的尺寸是以其父节点对应的第二元素的尺寸为基准单位设置的，所述重新设定所述第二元素的位置和/或尺寸的步骤包括：

根据所述第一元素的缩放比例，重新设定父节点对应的第二元素的尺寸，以使得重新设定后的第二元素的尺寸与所述第一元素的缩放比例基本一致。

4.根据权利要求2所述的页面显示方法，其中，所述页面的页面文件中设有一个或多个针对不同屏幕宽度或屏幕宽度范围的样式设计，所述重新设定所述第二元素的位置和/或尺寸的步骤还包括：

响应于所述第一元素的缩放变化，从所述一个或多个样式设计中选取与当前屏幕宽度接近的样式设计；

基于选取的样式设计重新设定所述第二元素的尺寸。

5.根据权利要求4所述的页面显示方法，其中，所述页面中具有多个所述第二元素，多个所述第二元素之间具有预定的层级关系，子节点的第二元素的尺寸是以其父节点的第二元素的尺寸为基准单位设置的，所述重新设定所述第二元素的位置和/或尺寸的步骤还包括：

响应于所述第一元素的缩放变化执行完毕，根据所述第一元素的缩放比例，重新设定父节点的第二元素的尺寸，以使得重新设定后的第二元素的尺寸与所述第一元素的缩放比例基本一致。

6.一种页面显示装置，包括：

设定模块，用于将页面中同一位图中的目标元素和第一元素分离，将所述目标元素转换为分辨率不随尺寸的变化而变化的第二元素，并基于页面中所述第一元素的样式设计信息，设定所述第二元素的样式，以将所述第二元素与所述第一元素绑定为关联整体，关联显示在所述页面中；

重新设定模块，用于响应于所述第一元素的缩放变化，重新设定所述第二元素的位置和/或尺寸，使得重新设定后的第二元素的变化比例与所述第一元素的变化比例基本一致。

7.根据权利要求6所述的页面显示装置，其中，所述第一元素的尺寸是以屏幕宽度为自变量设定的，所述重新设定模块以所述第一元素为参考基准、所述屏幕宽度为自变量设定所述第二元素相对于所述第一元素的位置信息，以使得响应于所述第一元素的缩放变化，所述第二元素相对于所述第一元素的相对位置比例关系基本不变。

8.根据权利要求7所述的页面显示装置，其中，所述页面中具有多个所述第二元素，多个所述第二元素之间具有预定的层级关系，子节点对应的第二元素的尺寸是以其父节点对应的第二元素的尺寸为基准单位设置的，所述重新设定模块根据所述第一元素的缩放比例，重新设定父节点对应的第二元素的尺寸，以使得重新设定后的第二元素的尺寸与所述第一元素的缩放比例基本一致。

9.根据权利要求7所述的页面显示装置，其中，所述页面的页面文件中设有一个或多个针对不同屏幕宽度或屏幕宽度范围的样式设计，所述重新设定模块响应于所述第一元素的缩放变化，从所述一个或多个样式设计中选取与当前屏幕宽度接近的样式设计，并基于选取的样式设计重新设定所述第二元素的尺寸。

10.根据权利要求9所述的页面显示装置，其中，所述页面中具有多个所述第二元素，多个所述第二元素之间具有预定的层级关系，子节点的第二元素的尺寸是以其父节点的第二元素的尺寸为基准尺寸设置的，所述重新设定模块响应于所述第一元素的缩放变化执行完毕，根据所述第一元素的缩放比例，重新设定父节点的第二元素的尺寸，以使得重新设定后的第二元素的尺寸与所述第一元素的缩放比例基本一致。

11.一种电子设备，包括：

显示器；

处理器；以及

存储器，其上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行如权利要求1至5中任何一项所述的页面显示方法。

12.一种非暂时性机器可读存储介质，其上存储有可执行代码，当所述可执行代码被电子设备的处理器执行时，使所述处理器执行如权利要求1至5中任一项所述的页面显示方法。