CN106648581B - 页面显示方法及装置 - Google Patents
页面显示方法及装置 Download PDFInfo
- Publication number
- CN106648581B CN106648581B CN201610822458.4A CN201610822458A CN106648581B CN 106648581 B CN106648581 B CN 106648581B CN 201610822458 A CN201610822458 A CN 201610822458A CN 106648581 B CN106648581 B CN 106648581B
- Authority
- CN
- China
- Prior art keywords
- position information
- target element
- display screen
- terminal display
- target
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请提出一种页面显示方法及装置，首先获取待显示的页面中包含的各元素的属性；然后根据所述元素的第一位置信息及元素的类型，判断与目标类型匹配的目标元素是否偏离了终端显示屏的预设位置；若是，则根据所述目标元素的第一位置信息，确定所述目标元素的第二位置信息；最后根据所述目标元素的第二位置信息，将所述目标元素显示在终端显示屏上。由此，实现了在页面显示时，根据终端显示屏的区域及元素的属性和位置，调整元素所在的坐标系，从而使各个元素都能显示在终端显示屏的相应位置，优化了页面显示的效果，提升了用户体验。
Description
技术领域
本申请涉及计算机技术领域，尤其涉及一种页面显示方法及装置。
背景技术
随着互联网的普及，尤其是移动互联网的爆发，第五代超文本标记语言(Hypertext markup language5，简称HTML5或H5)页面的需求日益增强。其中，应用较广泛的主要为在手机端浏览的H5页面，这种页面可以通过翻页方式进行浏览。
现有技术，不需要任何编程技能，就可以通过可视化界面操作，制作H5页面。在网页制作过程中，每个元素都以屏幕左上角为参考点进行定位，但是，对于以翻页的方式进行浏览的H5页面来说，页面宽度固定，终端设备上每一屏显示的都是单独的一个页面，而不同手机宽高比不同，这使得当屏幕高度较小时，会导致页面元素溢出或者需要重点突出的元素无法位于屏幕的中心位置等问题，页面显示效果差、给用户交互带来不便。
发明内容
本申请旨在至少在一定程度上解决相关技术中的技术问题之一。
为此，本申请的第一个目的在于提出一种页面显示方法，该方法实现了在页面显示时，根据终端显示屏的区域及元素的属性和位置，调整元素所在的坐标系，从而使各个元素都能显示在终端显示屏的相应位置，优化了页面显示的效果，提升了用户体验。
本申请的第二个目的在于提出一种页面显示装置。
为达上述目的，本申请第一方面实施例提出了一种页面显示方法，包括：获取待显示的页面中包含的各元素的属性，所述元素的属性，包括元素的第一位置信息及元素的类型；根据所述各元素的第一位置信息及元素的类型，判断与目标类型匹配的目标元素是否偏离了终端显示屏的预设位置；若是，则根据所述目标元素的第一位置信息，确定所述目标元素的第二位置信息，其中所述第一位置信息与所述第二位置信息分别与不同的坐标系对应；根据所述目标元素的第二位置信息，将所述目标元素显示在终端显示屏上。
本申请实施例的页面显示方法，首先获取待显示的页面中包含的各元素的属性；然后根据所述元素的第一位置信息及元素的类型，判断与目标类型匹配的目标元素是否偏离了终端显示屏的预设位置；若是，则根据所述目标元素的第一位置信息，确定所述目标元素的第二位置信息；最后根据所述目标元素的第二位置信息，将所述目标元素显示在终端显示屏上。由此，实现了在页面显示时，根据终端显示屏的区域及元素的属性和位置，调整元素所在的坐标系，从而使各个元素都能显示在终端显示屏的相应位置，优化了页面显示的效果，提升了用户体验。
为达上述目的，本申请第二方面实施例提出了一种页面显示装置，包括：第一获取模块，用于获取待显示的页面中包含的各元素的属性，所述元素的属性，包括元素的第一位置信息及元素的类型；第一判断模块，用于根据所述各元素的第一位置信息及元素的类型，判断与目标类型匹配的目标元素是否偏离了终端显示屏的预设位置；确定模块，用于与目标类型匹配的目标元素偏离了终端显示屏的预设位置时，则根据所述目标元素的第一位置信息，确定所述目标元素的第二位置信息，其中所述第一位置信息与所述第二位置信息分别与不同的坐标系对应；显示模块，用于根据所述目标元素的第二位置信息，将所述目标元素显示在终端显示屏上。
本申请实施例的页面显示装置，首先获取待显示的页面中包含的各元素的属性；然后根据所述元素的第一位置信息及元素的类型，判断与目标类型匹配的目标元素是否偏离了终端显示屏的预设位置；若是，则根据所述目标元素的第一位置信息，确定所述目标元素的第二位置信息；最后根据所述目标元素的第二位置信息，将所述目标元素显示在终端显示屏上。由此，实现了在页面显示时，根据终端显示屏的区域及元素的属性和位置，调整元素所在的坐标系，从而使各个元素都能显示在终端显示屏的相应位置，优化了页面显示的效果，提升了用户体验。
附图说明
本发明上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：
图1是本申请一个实施例的页面显示方法的流程图；
图2A-2C为目标元素在调整前后在终端显示屏上显示的示意图；
图3是本申请另一个实施例的页面显示方法的流程图；
图4A和4B为目标元素及第一元素显示在终端显示屏上的示意图；
图5是本申请一个实施例的页面显示装置的结构示意图；
图6是本申请另一个实施例的页面显示装置的结构示意图。
具体实施方式
下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本申请，而不能理解为对本申请的限制。
下面参考附图描述本申请实施例的页面显示方法及装置。
图1是本申请一个实施例的页面显示方法的流程图。
如图1所示，该页面显示方法包括：
步骤101，获取待显示的页面中包含的各元素的属性，所述元素的属性，包括元素的第一位置信息及元素的类型。
其中，本申请实施例提供的页面显示方法的执行主体为本申请实施例提供的页面显示装置，该装置可以被配置在任何终端中，例如，手机，电脑等。
具体的，本申请各实施例针对现有技术中，以屏幕左上角为参考点进行元素定位的页面显示方法，会导致元素溢出及页面显示效果差的问题，提出一种根据终端显示屏幕的尺寸，调整页面中元素所在的坐标系以进行完整页面显示的方法。
其中，元素的属性，可以包括元素的第一位置信息、元素的类型及元素的宽度或者高度等与元素有关的特性。元素的第一位置信息，是指元素在以终端显示屏左上角为坐标原点的坐标系中的位置，用来表征元素在待显示的页面中的位置。元素的类型是指用于表征元素种类的信息，比如元素的类型可以是商标的logo、按钮、音乐、视频等。
需要说明的是，由于元素通常具有一定的宽度或者高度，因此本申请各实施例中在定位各元素时，以该元素最靠近坐标原点的点作为该元素的定位点。
步骤102，根据所述各元素的第一位置信息及元素的类型，判断与目标类型匹配的目标元素是否偏离了终端显示屏的预设位置。
其中，预设位置可以是终端显示屏的中心区域，底部区域或者其他区域，此处不作限定。目标类型是指预先设定的在预设的位置，要显示的元素类型，目标元素，是指类型与目标类型匹配的元素。
通常情况下，不同类型的元素根据不同的需要，一般显示在终端显示屏上的不同位置。例如，视频、图片、企业的logo等，为了更加突出醒目，一般显示在终端显示屏的中心区域；用于交互的按钮等，一般显示在终端显示屏的底部区域。因此，在本申请实施例中，可以根据需要预先设定与终端显示屏的不同区域对应的要显示的目标类型。例如，预先设定在终端显示屏的中心区域显示视频、图片、企业的logo等，在终端显示屏的底部区域显示按钮、链接等。
另外，可以理解的是，获取待显示的页面中包含的各元素的属性后，可以根据各元素的第一位置信息，确定各元素显示在在终端显示屏上的区域。例如，假设终端显示屏的高度为600像素(px)，宽度为400px，某元素本身的宽高均为100px，若此元素的第一位置信息为X方向150px，Y方向250px，则根据此元素的第一位置信息，可以确定此元素将显示在终端显示屏的中心区域；而若此元素的第一位置信息为X方向150px，Y方向500px，则根据此元素的第一位置信息，可以确定此元素将显示在终端显示屏的底部区域，等等。
具体实现时，可以预先在终端显示屏的各个区域设定所要显示的目标类型，从而即可根据各元素的第一位置信息及元素类型，确定各个目标元素是否偏离了终端显示屏的预设位置。
即上述步骤102，包括：判断与第一目标类型匹配的第一目标元素是否偏离了所述终端显示屏的中心区域；和/或，判断与第二目标类型匹配的第二目标元素是否溢出了所述终端显示屏的底部。
其中，第一目标类型可以是如视频类型、图片类型等需要突出显示的元素的类型。第二目标类型可以是如交互按钮、链接等通常显示在终端显示屏底部的元素的类型。另外，终端显示屏的中心区域和底部区域的划分，可以根据通常情况下，第一目标类型元素和第二目标类型元素的显示规律及终端显示屏的尺寸确定。
举例来说，若元素类型为视频、图片、企业的logo等的元素通常显示在终端显示屏的中心区域，那么假设终端显示屏的宽高分别为400px和600px，则可以预先设定终端显示屏的中心区域为，在以终端显示屏左上角为原点的坐标系中，X方向100px-300px、Y方向200px-400px的区域，且应显示的元素类型为视频、图片、企业的logo等；在终端显示屏的X方向200px-300px、Y方向550px-600px的区域应显示的元素类型为按钮、链接等。从而当获取待显示的页面中各元素的第一位置信息及元素的类型后，若确定待显示的页面中包含视频及按钮元素，且视频元素的宽高均为200px，第一位置信息为X方向100px，Y方向100px，按钮元素的宽高均为50像素，第一位置信息为X方向200px，Y方向600px，则根据视频元素及交互按钮元素的第一位置信息，可以确定视频元素将偏离终端显示屏上的中心区域，按钮元素将溢出终端显示屏的底部。
步骤103，若是，则根据所述目标元素的第一位置信息，确定所述目标元素的第二位置信息，其中所述第一位置信息与所述第二位置信息分别与不同的坐标系对应。
步骤104，根据所述目标元素的第二位置信息，将所述目标元素显示在终端显示屏上。
其中，第二位置信息，指目标元素相对终端显示屏其他位置的信息。在本申请实施例中，可以是目标元素相对终端显示屏左下角的位置信息，也可以是目标元素相对终端显示屏横向中线的位置信息，此处不作限制。
可以理解的是，当终端显示屏的高度较小时，若目标元素按第一位置信息在终端显示屏进行显示，有可能造成页面底部的元素溢出终端显示屏底部，页面正中心的元素偏离终端显示屏的中心区域。此时，为了避免上述情况的出现，可以根据目标元素的第一位置信息，确定目标元素的第二位置信息，并根据目标元素的第二位置信息，将目标元素显示在终端显示屏上。
具体确定目标元素的第二位置信息时，可以根据目标元素的第一位置信息，确定目标元素相对终端显示屏左下角的位置信息。例如，在确定按钮元素会溢出终端显示屏的底部区域时，可以根据按钮相对页面左上角的位置信息，确定按钮相对终端显示屏左下角的位置信息，然后根据位置信息，将按钮显示在终端显示屏的底部。由于以终端显示屏左下角为坐标原点，按钮不会溢出。
或者，在确定目标元素的第一位置信息后，可以以终端显示屏的左边界与横向中心线的交点为原点建立坐标系，根据目标元素的第一位置信息，确定目标元素在新的坐标系中的位置信息。例如，在确定视频元素偏离了终端显示屏的中心区域时，可以以终端显示屏的左边界与横向中心线的交点为原点建立坐标系，根据视频相对页面左上角的位置信息，确定视频在新的坐标系中的位置信息，然后根据位置信息，将视频显示在终端显示屏的中心区域。由于以终端显示屏的左边界与横向中心线的交点为原点，视频将显示在终端显示屏的正中心，优化了页面显示的效果。
需要注意的是，在根据目标元素的第一位置信息，确定目标元素的第二位置信息之前，还包括：获取所述终端显示屏的尺寸信息，以根据目标元素的第一位置信息，确定所述目标元素相对终端显示屏其他位置的信息，进而将目标元素显示在终端显示屏上。
下面以第二位置信息为以终端显示屏的左下角为坐标原点时，目标元素在坐标系中的位置为例，结合图2A和2B，对上述方法进行详细的说明。图2A和2B为目标元素在调整前后在终端显示屏上显示的示意图。
如图2A和2B所示，假设页面的尺寸为宽400px、高640px，终端显示屏的宽400px，高600px，目标元素本身的宽高分别为100px、80px，图中“·”为该元素的定位点。在以屏幕左上角为原点的坐标系中，该元素的第一位置信息为X方向140px，Y方向540px，若按第一位置信息显示在终端显示屏，则如图2A或2B虚线所示，可以确定该元素将溢出终端显示屏的底部。此时，可以根据该元素的第一位置信息，确定该元素相对终端显示屏左下角的位置信息，即第二位置信息。
具体的，可以通过下面两种方式，确定该元素的第二位置信息。
方式一
根据所述目标元素的第一位置信息，确定所述目标元素与原页面底端的第一距离；根据所述第一距离，确定所述目标元素在以所述终端显示屏左下角为原点的第一坐标系中的位置信息。
其中，第一距离可以是目标元素定位点与原页面底端的距离，也可以是目标元素底端或其它位置与原页面底端的距离，此处不作限定。
下面以第一距离是目标元素底端与原页面底端的距离为例进行说明。如图2A所示，根据该元素的第一位置信息(X方向140px、Y方向540px)、原页面的尺寸(宽400px、高640px)及该元素的高度值(80px)，可以确定该元素底端与原页面底端的第一距离为20px，则根据该距离，可以将第二位置信息设为X方向140px，Y方向20px，即该元素底端与终端显示屏底端仍保持20px的距离。
方式二
确定所述目标元素在以所述终端显示屏左下角为原点的第一坐标系中的纵向坐标值为零，以使所述目标元素的底部边界与所述终端显示屏的底部边界重合，其中，沿所述终端显示屏高度方向为所述第一坐标系的纵轴方向。
如图2B所示，将该元素的第二位置信息设为X方向140px,Y方向0px,以使目标元素的底部边界与终端显示屏的底部边界重合。
确定目标元素的第二位置信息后，即可根据第二位置信息，将元素显示在终端显示屏的底部区域，如图2A和2B实线所示。通过调整元素所在的坐标系，可以将该目标元素显示在终端显示屏的合适位置。
另外，可以理解的是，第二位置信息为以终端显示屏的左边界与横向中心线的交点为原点，目标元素在坐标系中的位置时，可以根据以下方式确定目标元素的第二位置信息，即目标元素相对终端显示屏横向中线的位置信息：
根据所述目标元素的第一位置信息，确定所述目标元素在原页面中与所述页面中线间的距离值；
根据所述距离值，确定所述目标元素在以设定的点为原点的第二坐标系中的位置信息，其中，设定的点为所述终端显示屏的左边界与横向中心线的交点。
具体的，所述目标元素在原页面中与所述页面中线间的距离值可以是目标元素定位点与页面中间线的距离值，也可以是目标元素顶端、底端或其他位置与所述页面中间线的距离值，此处不作限定。
下面以该距离是目标元素底端与原页面中间线的距离值为例进行说明。假设页面的尺寸为宽400px、高640px，终端显示屏的高度为600px，宽度为400px，目标元素本身的宽高均为200px，页面中间线如图2C中部虚线所示，终端显示屏中间线如图2C中部实线所示。在以屏幕左上角为原点的坐标系中，该元素的第一位置信息为X方向100px，Y方向220px，如图2C虚线所示，则若按该元素的第一位置信息显示在终端显示屏上，该元素将偏离终端显示屏的中心区域，处于中心区域偏下的位置。此时，可以根据该元素的第一位置信息，确定该元素底端在原页面中与页面中线间的距离值为220+200-640/2＝100px；根据该距离值，即可确定该元素的第二位置信息为X方向100px，Y方向600/2-100＝200px，即该元素底端与终端显示屏中线仍保持100px的距离。
确定目标元素的第二位置信息后，即可根据第二位置信息，将元素显示在终端显示屏的中心区域，如图2C实线所示。通过调整元素所在的坐标系，可以将该目标元素显示在终端显示屏的合适位置。
值得注意的是，若根据元素的第一位置信息及元素的类型，判断与目标类型匹配的目标元素偏离了终端显示屏的预设位置，且待显示的页面中还有其它元素也偏离了终端显示屏的预设位置，则调整目标元素所在的坐标系，以将该目标元素显示在终端显示屏的合适位置时，可以同时将偏离了预设位置的其它元素所在的坐标系进行调整，以使其它元素也可以显示在终端显示屏上。例如，假设与预设的终端显示屏底部区域的目标类型匹配的元素为链接，且链接左边的元素为文本框，若链接溢出了终端显示屏底部，则文本框也会溢出终端显示屏底部，此时，在调整链接的坐标系时，可以将文本框与链接同时进行调整，以将链接和文本框都显示在终端显示屏的合适位置。
本申请实施例的页面显示方法，首先获取待显示的页面中包含的各元素的属性；然后根据所述元素的第一位置信息及元素的类型，判断与目标类型匹配的目标元素是否偏离了终端显示屏的预设位置；若是，则根据所述目标元素的第一位置信息，确定所述目标元素的第二位置信息；最后根据所述目标元素的第二位置信息，将所述目标元素显示在终端显示屏上。由此，实现了在页面显示时，根据终端显示屏的区域及元素的属性和位置，调整元素所在的坐标系，从而使各个元素都能显示在终端显示屏的相应位置，优化了页面显示的效果，提升了用户体验。
通过上述分析可知，可以通过首先获取待显示的页面中包含的各元素的属性；然后根据所述元素的第一位置信息及元素的类型，判断与目标类型匹配的目标元素是否偏离了终端显示屏的预设位置；若是，则根据所述目标元素的第一位置信息，确定所述目标元素的第二位置信息；最后根据所述目标元素的第二位置信息，将所述目标元素显示在终端显示屏上。但是，将目标元素显示在终端显示屏上后，可能会与页面中的其他元素产生重叠，下面结合图3，对上述情况进行具体的说明。
图3是本申请另一个实施例的页面显示方法的流程图。
如图3所示，该页面显示方法可以包括以下步骤：
步骤301，获取待显示的页面中包含的各元素的属性，所述元素的属性，包括元素的第一位置信息及元素的类型。
步骤302，根据所述各元素的第一位置信息及元素的类型，判断与目标类型匹配的目标元素是否偏离了终端显示屏的预设位置。
步骤303，在终端显示屏的预设位置中，包含与目标类型匹配的目标元素时，根据所述目标元素的第一位置信息，确定所述目标元素的第二位置信息。
其中，上述步骤301-步骤303的具体实现过程和原理，可以参照上述实施例中步骤101-步骤103的详细描述，此处不再赘述。
步骤304，判断所述目标元素是否与所述页面中的其它元素有重叠区域。
可以理解的是，所述第一位置信息和第二位置信息分别与不同的坐标系对应，当确定了目标元素的第二位置信息后，若将目标元素按第二位置信息进行显示，其它元素仍按第一位置信息显示，则目标元素很可能和其它元素产生重叠。因此，根据目标元素的第一位置信息，确定目标元素的第二位置信息之后，需要判断目标元素是否与页面中的其它元素有重叠区域。
下面，以目标元素的第二位置信息是相对终端显示屏左下角的位置信息为例，判断目标元素是否与页面中的其它元素有重叠区域，其它情况时的判断方法类似，此处不再赘述。
具体的，可以以第一元素表示页面中的其它元素，假设目标元素的第二位置信息为(X1、Y1、△X1、△Y1)，页面中的第一元素的第一位置信息为(X2、Y2、△X2、△Y2)，终端显示屏的高度为Y。其中，X1和X2分别表示两个元素X方向的位置，Y1和Y2分别表示两个元素Y方向的位置，△X1和△X2分别表示两个元素的宽度，△Y1和△Y2分别表示两个元素的高度。
具体实现时，可以按照下面的步骤判断所述目标区域是否与所述页面中的其它区域有重叠区域：判断X2+△X2是否小于X1，若是，则确定目标元素与第一元素不重叠；否则，判断Y1+△Y1+Y2+△Y2是否大于Y；若是，确定目标元素与第一元素重叠；否则，确定目标元素与第一元素不重叠。
下面结合图4A和4B，对上述方法进行详细的说明。图4A和4B为目标元素及第一元素显示在终端显示屏上的示意图。
假设终端显示屏的宽高分别为400px、600px，第一元素和目标元素分别按第一位置信息和第二位置信息显示在终端显示屏中。图中“·”为该元素的定位点。若第一元素的第一位置信息为(50px，460px，100px，80px)，目标元素的第二位置信息为(200px，10px，100px，80px)，首先判断X2+△X2是否小于X1，因50+100＝150小于200，则可以确定目标元素与第一元素不重叠，如图4A所示。若第一元素的第一位置信息为(150px，410px，100px，80px)，目标元素的第二位置信息为(200px，10px，100px，80px)，首先判断X2+△X2是否小于X1，因150+100＝250大于200，则判断Y1+△Y1+Y2+△Y2是否大于Y，因410+80+10+80＝580小于600，则确定目标元素与第一元素不重叠，如图4B所示。
步骤305，若是，则对所述目标元素中、与其它元素的重叠区域进行半透明处理。
具体的，当确定目标元素与页面中的其它元素有重叠区域时，则将目标元素中、与其它元素的重叠区域进行半透明处理，半透明处理过程的具体原理，现有技术中已有涉及，此处不再赘述。
步骤306，根据所述目标元素的第二位置信息，将所述目标元素显示在终端显示屏上。
其中，上述步骤306的具体实现过程和原理，可以参照上述实施例中步骤103的详细描述，此处不再赘述。
本申请实施例的页面显示方法，首先获取待显示的页面中包含的各元素的属性；然后根据所述元素的第一位置信息及元素的类型，判断与目标类型匹配的目标元素是否偏离了终端显示屏的预设位置中；若是，则根据所述目标元素的第一位置信息，确定所述目标元素的第二位置信息；再判断所述目标元素是否与所述页面中的其它元素有重叠区域；若是，则对所述目标元素中、与其它元素的重叠区域进行半透明处理；最后根据所述目标元素的第二位置信息，将所述目标元素显示在终端显示屏上。由此，实现了在页面显示时，根据终端显示屏的区域及元素的属性和位置，调整元素所在的坐标系，且通过对元素之间的重叠区域进行处理，使各个元素都能显示在终端显示屏的相应位置，优化了页面显示的效果，提升了用户体验。
图5是本申请一个实施例的页面显示装置的结构示意图。
如图5所示，该页面显示装置包括：
第一获取模块51，用于获取待显示的页面中包含的各元素的属性，所述元素的属性，包括元素的第一位置信息及元素的类型；
第一判断模块52，用于根据所述各元素的第一位置信息及元素的类型，判断与目标类型匹配的目标元素是否偏离了终端显示屏的预设位置；
确定模块53，用于与目标类型匹配的目标元素偏离了终端显示屏的预设位置时，则根据所述目标元素的第一位置信息，确定所述目标元素的第二位置信息，其中所述第一位置信息与所述第二位置信息分别与不同的坐标系对应；
显示模块54，用于根据所述目标元素的第二位置信息，将所述目标元素显示在终端显示屏上。
其中，本实施例提供的页面显示装置，可以被配置在任何终端中，例如，手机，电脑等，用于执行如图1所示的页面显示方法。
其中，所述目标元素的第一位置信息，指所述目标元素相对所述页面左上角的位置信息；
所述第一判断模块52，具体用于：
判断与第一目标类型匹配的第一目标元素是否偏离了所述终端显示屏的中心区域；和/或，
判断与第二目标类型匹配的第二目标元素是否溢出了所述终端显示屏的底部。
需要说明的是，前述对图1所示的页面显示方法实施例的解释说明也适用于该实施例的页面显示装置，此处不再赘述。
本申请实施例的页面显示装置，首先获取待显示的页面中包含的各元素的属性；然后根据所述元素的第一位置信息及元素的类型，判断与目标类型匹配的目标元素是否偏离了终端显示屏的预设位置；若是，则根据所述目标元素的第一位置信息，确定所述目标元素的第二位置信息；最后根据所述目标元素的第二位置信息，将所述目标元素显示在终端显示屏上。由此，实现了在页面显示时，根据终端显示屏的区域及元素的属性和位置，调整元素所在的坐标系，从而使各个元素都能显示在终端显示屏的相应位置，优化了页面显示的效果，提升了用户体验。
图6是本申请另一个实施例的页面显示装置的结构示意图。
如图6所示，上述确定模块53，包括：
第一确定单元531，用于根据所述目标元素的第一位置信息，确定所述目标元素相对所述终端显示屏左下角的位置信息；和/或，
第二确定单元532，用于根据所述目标元素的第一位置信息，确定所述目标元素相对所述终端显示屏横向中线的位置信息。
其中，所述第一确定单元531，具体用于：
根据所述目标元素的第一位置信息，确定所述目标元素与原页面底端的第一距离；
根据所述第一距离，确定所述目标元素在以所述终端显示屏左下角为原点的第一坐标系中的位置信息。
进一步的，所述第一确定单元531，还用于：
确定所述目标元素在以所述终端显示屏左下角为原点的第一坐标系中的纵向坐标值为零，以使所述目标元素的底部边界与所述终端显示屏的底部边界重合，其中，沿所述终端显示屏高度方向为所述第一坐标系的纵轴方向。
进一步的，所述第二确定单元532，具体用于：
根据所述目标元素的第一位置信息，确定所述目标元素在原页面中与所述页面中线间的距离值；
根据所述距离值，确定所述目标元素在以设定的点为原点的第二坐标系中的位置信息，其中，设定的点为所述终端显示屏的左边界与横向中心线的交点。
进一步的，在如图5所示的基础上，该装置还包括：
第二获取模块55，用于获取所述终端显示屏的尺寸信息。
第二判断模块56，用于判断所述目标元素是否与所述页面中的其它元素有重叠区域；
处理模块57，用于所述目标元素与所述页面中的其它元素有重叠区域时，对所述目标元素中、与其它元素的重叠区域进行半透明处理。
需要说明的是，前述对图3所示的页面显示方法实施例的解释说明也适用于该实施例的页面显示装置，此处不再赘述。
本申请实施例的页面显示装置，首先获取待显示的页面中包含的各元素的属性；然后根据所述元素的第一位置信息及元素的类型，判断与目标类型匹配的目标元素是否偏离了终端显示屏的预设位置中；若是，则根据所述目标元素的第一位置信息，确定所述目标元素的第二位置信息；再判断所述目标元素是否与所述页面中的其它元素有重叠区域；若是，则对所述目标元素中、与其它元素的重叠区域进行半透明处理；最后根据所述目标元素的第二位置信息，将所述目标元素显示在终端显示屏上。由此，实现了在页面显示时，根据终端显示屏的区域及元素的属性和位置，调整元素所在的坐标系，且通过对元素之间的重叠区域进行处理，使各个元素都能显示在终端显示屏的相应位置，优化了页面显示的效果，提升了用户体验。
在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本申请的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。
此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。在本申请的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。
流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现定制逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本申请的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本申请的实施例所属技术领域的技术人员所理解。
在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，"计算机可读介质"可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。
应当理解，本申请的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。
本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。
此外，在本申请各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。
上述提到的存储介质可以是只读存储器，磁盘或光盘等。尽管上面已经示出和描述了本申请的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本申请的限制，本领域的普通技术人员在本申请的范围内可以对上述实施例进行变化、修改、替换和变型。
Claims (16)
1.一种页面显示方法，其特征在于，包括以下步骤：
获取待显示的页面中包含的各元素的属性，所述元素的属性，包括元素的第一位置信息及元素的类型；
根据所述各元素的第一位置信息及元素的类型，判断与目标类型匹配的目标元素是否偏离了终端显示屏的预设位置，其中，预先在终端显示屏的各个区域设定所要显示的目标类型，不同的目标类型对应不同区域的预设位置；
若是，则根据所述目标元素的第一位置信息，确定所述目标元素的第二位置信息，其中所述第一位置信息与所述第二位置信息分别与不同的坐标系对应，所述第一位置信息对应第一坐标系，所述第二位置信息对应第二坐标系，所述第一坐标系以终端显示屏左上角为坐标原点，所述第二坐标系以所述终端显示屏其它位置为坐标原点；
根据所述目标元素的第二位置信息，将所述目标元素显示在终端显示屏上。
2.如权利要求1所述的方法，其特征在于，所述判断与目标类型匹配的目标元素是否偏离了终端显示屏的预设位置，包括：
判断与第一目标类型匹配的第一目标元素是否偏离了所述终端显示屏的中心区域；和/或，
判断与第二目标类型匹配的第二目标元素是否溢出了所述终端显示屏的底部。
3.如权利要求1所述的方法，其特征在于，所述目标元素的第一位置信息，指所述目标元素相对所述页面左上角的位置信息；
所述根据所述目标元素的第一位置信息，确定所述目标元素的第二位置信息，包括：
根据所述目标元素的第一位置信息，确定所述目标元素相对所述终端显示屏左下角的位置信息；和/或，
根据所述目标元素的第一位置信息，确定所述目标元素相对所述终端显示屏横向中线的位置信息。
4.如权利要求3所述的方法，其特征在于，根据所述目标元素的第一位置信息，确定所述目标元素相对所述终端显示屏左下角的位置信息，包括：
根据所述目标元素的第一位置信息，确定所述目标元素与原页面底端的第一距离；
根据所述第一距离，确定所述目标元素在以所述终端显示屏左下角为原点的第一坐标系中的位置信息。
5.如权利要求3所述的方法，其特征在于，所述根据所述目标元素的第一位置信息，确定所述目标元素相对所述终端显示屏左下角的位置信息，包括：
确定所述目标元素在以所述终端显示屏左下角为原点的第一坐标系中的纵向坐标值为零，以使所述目标元素的底部边界与所述终端显示屏的底部边界重合，其中，沿所述终端显示屏高度方向为所述第一坐标系的纵轴方向。
6.如权利要求3-5任一所述的方法，其特征在于，所述根据所述目标元素的第一位置信息，确定所述目标元素相对所述终端显示屏横向中线的位置信息，包括：
根据所述目标元素的第一位置信息，确定所述目标元素在原页面中与所述页面中线间的距离值；
根据所述距离值，确定所述目标元素在以设定的点为原点的第二坐标系中的位置信息，其中，设定的点为所述终端显示屏的左边界与横向中心线的交点。
7.如权利要求1所述的方法，其特征在于，所述根据所述目标元素的第一位置信息，确定所述目标元素的第二位置信息之前，还包括：
获取所述终端显示屏的尺寸信息。
8.如权利要求7所述的方法，其特征在于，所述根据所述目标元素的第一位置信息，确定所述目标元素的第二位置信息之后，还包括：
判断所述目标元素是否与所述页面中的其它元素有重叠区域；
若是，则对所述目标元素中、与其它元素的重叠区域进行半透明处理。
9.一种页面显示装置，其特征在于，包括：
第一获取模块，用于获取待显示的页面中包含的各元素的属性，所述元素的属性，包括元素的第一位置信息及元素的类型；
第一判断模块，用于根据所述各元素的第一位置信息及元素的类型，判断与目标类型匹配的目标元素是否偏离了终端显示屏的预设位置，其中，预先在终端显示屏的各个区域设定所要显示的目标类型，不同的目标类型对应不同区域的预设位置；
确定模块，用于与目标类型匹配的目标元素偏离了终端显示屏的预设位置时，则根据所述目标元素的第一位置信息，确定所述目标元素的第二位置信息，其中所述第一位置信息与所述第二位置信息分别与不同的坐标系对应，所述第一位置信息对应第一坐标系，所述第二位置信息对应第二坐标系，所述第一坐标系以终端显示屏左上角为坐标原点，所述第二坐标系以所述终端显示屏其它位置为坐标原点；
显示模块，用于根据所述目标元素的第二位置信息，将所述目标元素显示在终端显示屏上。
10.如权利要求9所述的装置，其特征在于，所述第一判断模块，具体用于：
判断与第一目标类型匹配的第一目标元素是否偏离了所述终端显示屏的中心区域；和/或，
判断与第二目标类型匹配的第二目标元素是否溢出了所述终端显示屏的底部。
11.如权利要求9所述的装置，其特征在于，所述目标元素的第一位置信息，指所述目标元素相对所述页面左上角的位置信息；
所述确定模块，包括：
第一确定单元，用于根据所述目标元素的第一位置信息，确定所述目标元素相对所述终端显示屏左下角的位置信息；和/或，
第二确定单元，用于根据所述目标元素的第一位置信息，确定所述目标元素相对所述终端显示屏横向中线的位置信息。
12.如权利要求11所述的装置，其特征在于，所述第一确定单元，具体用于：
根据所述目标元素的第一位置信息，确定所述目标元素与原页面底端的第一距离；
根据所述第一距离，确定所述目标元素在以所述终端显示屏左下角为原点的第一坐标系中的位置信息。
13.如权利要求11所述的装置，其特征在于，所述第一确定单元，还用于：
确定所述目标元素在以所述终端显示屏左下角为原点的第一坐标系中的纵向坐标值为零，以使所述目标元素的底部边界与所述终端显示屏的底部边界重合，其中，沿所述终端显示屏高度方向为所述第一坐标系的纵轴方向。
14.如权利要求11-13任一所述的装置，其特征在于，所述第二确定单元，具体用于：
根据所述目标元素的第一位置信息，确定所述目标元素在原页面中与所述页面中线间的距离值；
根据所述距离值，确定所述目标元素在以设定的点为原点的第二坐标系中的位置信息，其中，设定的点为所述终端显示屏的左边界与横向中心线的交点。
15.如权利要求9所述的装置，其特征在于，该装置，还包括：
第二获取模块，用于获取所述终端显示屏的尺寸信息。
16.如权利要求15所述的装置，其特征在于，该装置，还包括：
第二判断模块，用于判断所述目标元素是否与所述页面中的其它元素有重叠区域；
处理模块，用于所述目标元素与所述页面中的其它元素有重叠区域时，对所述目标元素中、与其它元素的重叠区域进行半透明处理。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610822458.4A CN106648581B (zh) | 2016-09-13 | 2016-09-13 | 页面显示方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610822458.4A CN106648581B (zh) | 2016-09-13 | 2016-09-13 | 页面显示方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106648581A CN106648581A (zh) | 2017-05-10 |
| CN106648581B true CN106648581B (zh) | 2021-03-23 |
Family
ID=58852425
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610822458.4A Active CN106648581B (zh) | 2016-09-13 | 2016-09-13 | 页面显示方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106648581B (zh) |
Families Citing this family (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109388763A (zh) * | 2017-08-08 | 2019-02-26 | 北京国双科技有限公司 | 网页文本内容显示方法和装置 |
| CN108681531B (zh) * | 2018-05-09 | 2020-11-13 | 天津字节跳动科技有限公司 | 文档输入的控制方法及装置 |
| CN109086108B (zh) * | 2018-06-29 | 2021-04-27 | 福建天晴数码有限公司 | 一种界面布局合理性检测的方法及系统 |
| CN109739501A (zh) * | 2018-12-18 | 2019-05-10 | 北京字节跳动网络技术有限公司 | 在绝对定位布局中实现流式效果的方法、装置及电子设备 |
| CN109918165B (zh) * | 2019-03-12 | 2022-07-01 | 北京小米移动软件有限公司 | 界面显示方法、装置和存储介质 |
| CN111580924B (zh) * | 2020-05-19 | 2023-06-27 | 北京字节跳动网络技术有限公司 | 页面展示方法、装置、电子设备及可读存储介质 |
| CN112395033A (zh) * | 2020-11-18 | 2021-02-23 | 中国平安人寿保险股份有限公司 | 网页自适应方法及相关产品 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103648055A (zh) * | 2013-12-09 | 2014-03-19 | 乐视致新电子科技（天津）有限公司 | 智能电视浏览器的屏幕自适应方法和装置、智能电视 |
| CN104978433A (zh) * | 2015-07-16 | 2015-10-14 | 无锡天脉聚源传媒科技有限公司 | 一种网页显示方法及装置 |
Family Cites Families (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| DE10030765A1 (de) * | 2000-06-23 | 2002-01-10 | Realspace Gmbh | Verfahren, Computerprogrammprodukt, Computersystem, Netzwerkserver und Netzwerkclient zum Einbinden eines Programmelementes in eine Browserseite |
| CN103150361B (zh) * | 2013-02-27 | 2017-02-08 | 优视科技有限公司 | 一种网页显示方法及装置 |
| CN103530026B (zh) * | 2013-10-31 | 2018-05-18 | 北京国双科技有限公司 | 网页弹出框定位方法和装置 |
| CN104639969A (zh) * | 2013-11-12 | 2015-05-20 | 中兴通讯股份有限公司 | 一种页面全屏显示方法和装置 |
| CN105373593B (zh) * | 2015-10-14 | 2018-12-21 | 北京锤子数码科技有限公司 | 一种展示网页中目标元素的方法及装置 |
-
2016
- 2016-09-13 CN CN201610822458.4A patent/CN106648581B/zh active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103648055A (zh) * | 2013-12-09 | 2014-03-19 | 乐视致新电子科技（天津）有限公司 | 智能电视浏览器的屏幕自适应方法和装置、智能电视 |
| CN104978433A (zh) * | 2015-07-16 | 2015-10-14 | 无锡天脉聚源传媒科技有限公司 | 一种网页显示方法及装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106648581A (zh) | 2017-05-10 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106648581B (zh) | 页面显示方法及装置 | |
| US9747010B2 (en) | Electronic content visual comparison apparatus and method | |
| US9672539B2 (en) | Advertisement generation apparatus and terminal device | |
| US10318605B2 (en) | Method and device for relocating input box to target position in mobile terminal browser, storage medium | |
| US9720582B2 (en) | Responsive image rendition authoring | |
| CN108959303B (zh) | 一种展示图片生成、布局生成方法和数据处理服务器 | |
| US8743150B2 (en) | Display processing device and display control method | |
| CN105912336A (zh) | 一种移动端前端开发多屏适配方法 | |
| CN104793874A (zh) | 一种界面显示方法及电子设备 | |
| US20140006936A1 (en) | Responsive document breakpoints systems and methods | |
| CN105630746A (zh) | 页面显示的方法和终端设备 | |
| KR20170009792A (ko) | 융합 콘텐츠를 위한 콘텐츠 저작 장치 및 콘텐츠 저작 장치의 융합 콘텐츠 생성 방법 | |
| CN110443772B (zh) | 图片处理方法、装置、计算机设备和存储介质 | |
| CN103236042A (zh) | 图片自适应处理方法及装置 | |
| CN110780872B (zh) | 元素排布方法、装置、计算机可读存储介质及设备 | |
| CN110688037A (zh) | 一种控件的显示方法、存储介质及移动终端 | |
| US20140033024A1 (en) | Multi-item page layout modifications by gap editing | |
| CN104765564A (zh) | 一种截图方法及装置 | |
| KR20160053545A (ko) | 전자 문서 편집기에서의 객체에 대한 편집 명령 입력 방법 | |
| CN108132716A (zh) | 浏览页的调整方法、设备及计算机可读存储介质 | |
| CN106598315B (zh) | 触控显示设备及其背景图置换方法 | |
| JP2005107871A (ja) | 画像表示方法と装置、該方法によるプログラムとこれを格納した記録媒体 | |
| US10846360B2 (en) | Display control apparatus and display control method | |
| US20110289436A1 (en) | Display apparatus and control method thereof | |
| US10628629B2 (en) | Method, device, and client terminal apparatus for displaying page |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| EE01 | Entry into force of recordation of patent licensing contract |
Application publication date: 20170510 Assignee: Beijing Intellectual Property Management Co.,Ltd. Assignor: BEIJING BAIDU NETCOM SCIENCE AND TECHNOLOGY Co.,Ltd. Contract record no.: X2023110000095 Denomination of invention: Page display method and device Granted publication date: 20210323 License type: Common License Record date: 20230821 |
|
| EE01 | Entry into force of recordation of patent licensing contract |