CN110020291B - 网页布局的处理方法及装置 - Google Patents

网页布局的处理方法及装置 Download PDF

Info

Publication number
CN110020291B
CN110020291B CN201710929829.3A CN201710929829A CN110020291B CN 110020291 B CN110020291 B CN 110020291B CN 201710929829 A CN201710929829 A CN 201710929829A CN 110020291 B CN110020291 B CN 110020291B
Authority
CN
China
Prior art keywords
display
target
parameters
parameter
webpage
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
Application number
CN201710929829.3A
Other languages
English (en)
Other versions
CN110020291A (zh
Inventor
娄文康
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Gridsum Technology Co Ltd
Original Assignee
Beijing Gridsum Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Gridsum Technology Co Ltd filed Critical Beijing Gridsum Technology Co Ltd
Priority to CN201710929829.3A priority Critical patent/CN110020291B/zh
Publication of CN110020291A publication Critical patent/CN110020291A/zh
Application granted granted Critical
Publication of CN110020291B publication Critical patent/CN110020291B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请公开了一种网页布局的处理方法及装置。该方法包括:获取终端的显示屏幕的显示参数,其中,显示参数至少包括下述之一:显示屏幕的宽度、显示屏幕的高度;根据显示屏幕的显示参数和预设参考阈值,计算网页中待显示的目标元素的显示参数,其中,网页为在终端的显示界面上创建的网页;根据所述目标元素的显示参数,在所述网页中显示所述目标元素。通过本申请,解决了相关技术中在进行网页布局时,由于无法调整网页的显示宽度和高度,导致用户体验度差的问题。

Description

网页布局的处理方法及装置
技术领域
本申请涉及互联网技术领域,具体而言,涉及一种网页布局的处理方法及装置。
背景技术
相关技术中,在进行网页布局时,一般是使用div标签对网页中的HTML元素的显示页面分为多个子元素,每个子元素中可以包括不同的显示内容,用户可以通过点击网页中的各个子元素所在的内容,浏览该页面,而每个子元素中都会有对应的显示百分比,在进行网页布局时,很多的浏览器是通过设置网页的各个子元素的宽度,进行网页的布局,但是在相关技术中,通过设置网页的子元素的宽度进行网页布局时,往往会存在显示的子元素边缘重合的问题,网页布局单调,而且对于需要显示多个不同宽度的网页内容时,无法调整网页的显示宽度和高度,导致用户体验度差。
针对相关技术中在进行网页布局时,由于无法调整网页的显示宽度和高度,导致用户体验度差的技术问题,目前尚未提出有效的解决方案。
发明内容
本申请的主要目的在于提供一种网页布局的处理方法及装置,以解决相关技术中在进行网页布局时,由于无法调整网页的显示宽度和高度,导致用户体验度差的问题。
为了实现上述目的,根据本申请的一个方面,提供了一种网页布局的处理方法。该方法包括:获取终端的显示屏幕的显示参数,其中,所述显示参数至少包括下述之一:所述显示屏幕的宽度、所述显示屏幕的高度;根据所述显示屏幕的显示参数和预设参考阈值,计算网页中待显示的目标元素的显示参数,其中,所述网页为在所述终端的显示界面上创建的网页;根据所述目标元素的显示参数,在所述网页中显示所述目标元素。
进一步地,在获取到所述终端的显示屏幕的宽度参数后,根据所述显示屏幕的显示参数和预设参考阈值,计算网页中待显示的目标元素的显示参数包括:将所述终端的显示屏幕的宽度参数按照第一预设参考阈值划分,得到显示子屏幕的宽度参数;获取目标元素;计算所述目标元素的宽度参数;根据所述目标元素的宽度参数和每个显示子屏幕的宽度参数,确定显示所述目标元素的显示子屏幕的数量;将所述目标元素的显示子屏幕的数量作为网页中待显示的目标元素的显示宽度参数。
进一步地,在获取到所述终端的显示屏幕的高度参数后,根据所述显示屏幕的显示参数和预设参考阈值,计算网页中待显示的目标元素的显示参数包括:将所述终端的显示屏幕的高度参数按照第二预设参考阈值划分,得到多个显示子屏幕的高度参数;获取目标元素;计算所述目标元素的高度参数;根据所述目标元素的高度参数和每个显示子屏幕的高度参数,确定显示所述目标元素的显示子屏幕的数量;将所述目标元素的显示子屏幕的数量作为网页中待显示的目标元素的显示高度参数。
进一步地,根据所述目标元素的显示参数,在所述网页中显示所述目标元素包括:判断所述目标元素的显示参数中是否包括非整数的显示参数;若所述目标元素的显示参数中包括非整数的显示参数,确定目标显示参数,其中,所述目标显示参数为非整数的显示参数;对所述目标显示参数进行取整;基于所述网页的目标元素的整数的显示参数和取整后的目标显示参数,在所述显示屏幕上显示所述网页的目标元素。
进一步地,基于所述网页的目标元素的整数的显示参数和取整后的目标显示参数,在所述显示屏幕上显示所述网页的目标元素包括:基于所述目标显示参数确定目标显示子参数,其中,所述目标显示子参数是所述目标显示参数取整后剩余的显示参数;基于所述目标显示子参数、所述网页的目标元素的整数的显示参数和取整后的目标显示参数,在所述显示屏幕上显示所述网页的目标元素。
为了实现上述目的,根据本申请的另一方面,提供了一种网页布局的处理装置。该装置包括:获取单元,用于获取终端的显示屏幕的显示参数,其中,所述显示参数至少包括下述之一:所述显示屏幕的宽度、所述显示屏幕的高度;计算单元,用于根据所述显示屏幕的显示参数和预设参考阈值,计算网页中待显示的目标元素的显示参数,其中,所述网页为在所述终端的显示界面上创建的网页;显示单元,用于根据所述目标元素的显示参数,在所述网页中显示所述目标元素。
进一步地,所述计算单元包括:第一划分模块,用于在获取到所述终端的显示屏幕的宽度参数后,将所述终端的显示屏幕的宽度参数按照第一预设参考阈值划分,得到显示子屏幕的宽度参数;第一获取模块,用于获取目标元素;第一计算模块,用于计算所述目标元素的宽度参数;第一确定模块,用于根据所述目标元素的宽度参数和每个显示子屏幕的宽度参数,确定显示所述目标元素的显示子屏幕的数量;第二确定模块,用于将所述目标元素的显示子屏幕的数量作为网页中待显示的目标元素的显示宽度参数。
进一步地,所述计算单元还包括:第二划分模块,用于在获取到所述终端的显示屏幕的高度参数后,将所述终端的显示屏幕的高度参数按照第二预设参考阈值划分,得到多个显示子屏幕的高度参数;第二获取模块,用于获取目标元素;第二计算模块,用于计算所述目标元素的高度参数;第三确定模块,用于根据所述目标元素的高度参数和每个显示子屏幕的高度参数,确定显示所述目标元素的显示子屏幕的数量;第四确定模块,用于将所述目标元素的显示子屏幕的数量作为网页中待显示的目标元素的显示高度参数。
为了实现上述目的,根据本申请的另一方面,提供了一种存储介质,所述存储介质包括存储的程序,其中,所述程序执行上述任意一项所述的网页布局的处理方法。
为了实现上述目的,根据本申请的另一方面,提供了一种处理器,所述处理器用于运行程序,其中,所述程序运行时执行上述任意一项所述的网页布局的处理方法。
通过本申请,可以先获取终端的显示屏幕的显示参数,并根据显示屏幕的显示参数和预设参考阈值,计算网页中待显示的目标元素的显示参数,然后根据网页的目标元素的显示参数,在网页上显示该目标元素。在实施例中,可以通过显示屏幕的显示参数,灵活调整目标元素的显示参数,包括调整目标元素在网页中显示高度、宽度参数,从而让使用者可以灵活的在网页中进行布局,调整网页中各个目标元素的高度、宽度参数,进而解决相关技术中在进行网页布局时,由于无法调整网页的显示宽度和高度,导致用户体验度差的问题,达到灵活调整网页布局的效果。
附图说明
构成本申请的一部分的附图用来提供对本申请的进一步理解,本申请的示意性实施例及其说明用于解释本申请,并不构成对本申请的不当限定。在附图中:
图1是根据本申请实施例的网页布局的处理方法的流程图;以及
图2是根据本发明实施例的一种网页布局的示意图;
图3是根据本申请的一种网页布局的处理装置的结构图。
具体实施方式
需要说明的是,在不冲突的情况下,本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。
为了使本技术领域的人员更好地理解本申请方案,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分的实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都应当属于本申请保护的范围。
需要说明的是,本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本申请的实施例。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
为了便于描述,以下对本申请实施例涉及的部分名词或术语进行说明:
W3C,万维网联盟(World Wide Web Consortium。1994年10月在麻省理工学院计算机科学实验室成立。
Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的,它简洁灵活,使得Web开发更加快捷。
网格(Grid):在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效地使用HTML和CSS的方法。
Bootstrap网格系统:Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。
Css:级联样式表,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言,由W3C定义和维护。
根据本申请的实施例,提供了一种网页布局的处理方法。
图1是根据本申请实施例的网页布局的处理方法的流程图。如图1所示,该方法包括以下步骤:
步骤S101,获取终端的显示屏幕的显示参数,其中,显示参数至少包括下述之一:显示屏幕的宽度、显示屏幕的高度。
可选的,本发明实施例可以应用于互联网网页布局开发中,通过对使用者的终端的显示屏幕的显示参数来控制显示元素。其中,上述的终端可以包括但不限于:PC机、移动终端。
对于上述步骤,获取到的终端的显示屏幕的显示参数可以是通过获取终端中的出厂配置参数中的显示参数,该显示参数可以包括显示屏幕的宽度、显示屏幕的高度,例如,获取到显示屏幕的宽度为33cm,高度为54cm。
可选的,本申请中的网页布局可以是web前端开发中,通过网格系统来配置显示在显示屏幕上的各个位置的显示元素的高度和宽度。
步骤S102,根据显示屏幕的显示参数和预设参考阈值,计算网页中待显示的目标元素的显示参数,其中,网页为在终端的显示界面上创建的网页。
上述的目标元素可以是在显示屏幕上进行显示的网页内容,该网页内容可以包括但不限于:网站链接地址、网页的标题和图片、视频标题和视频主题图片、搜索框等。
其中,每个网页中可以包括多个目标元素,用户可以通过点击显示屏幕上目标元素对应的位置,连接进入目标元素所在的网站。可选的,网页中的多个目标元素中每个目标元素在显示屏幕上地理位置、显示大小、显示的时间段都可以预先设置,在设置目标元素在显示屏幕上的显示参数时,可以通过显示屏幕的显示参数和预设参考阈值划分显示屏幕,以确定各个目标元素可以占据的位置、大小。
其中,上述的预设参考阈值可以根据实际的各个终端的显示屏幕的参数确定,例如,终端的长度为54cm,宽度为34cm,预设参考阈值为10。
可选的,上述的网页中可以显示不同方面的内容,例如,显示视频、网页、纪录片等内容,由于需要显示的内容较多,因此,可以划分显示区域,以显示多个目标元素,在显示多个目标元素时,可以突出显示目标元素的标题和标识图片,以让用户在浏览时,可以清楚准确的了解到该目标元素中包含的内容,以吸引用户浏览该目标元素中链接的内容。
步骤S103,根据目标元素的显示参数,在网页上显示目标元素。
可选的,在确定出各个目标元素的显示参数后,可以在终端的显示屏幕上显示网页的各个目标元素,其中,每个目标元素都可以确定出对应的显示参数,以确定目标元素的显示位置。
通过上述步骤,可以先获取终端的显示屏幕的显示参数,并根据显示屏幕的显示参数和预设参考阈值,计算网页中待显示的目标元素的显示参数,然后根据网页的目标元素的显示参数,在网页上显示该目标元素。在实施例中,可以通过显示屏幕的显示参数,灵活调整目标元素的显示参数,包括调整目标元素在网页中显示高度、宽度参数,从而让使用者可以灵活的在网页中进行布局,调整网页中各个目标元素的高度、宽度参数,进而解决相关技术中在进行网页布局时,由于无法调整网页的显示宽度和高度,导致用户体验度差的问题,达到灵活调整网页布局的效果。
对于上述的网页布局方法,其中,在获取到终端的显示屏幕的宽度参数后,根据显示屏幕的显示参数和预设参考阈值,计算网页中待显示的目标元素的显示参数包括:将终端的显示屏幕的宽度参数按照第一预设参考阈值划分,得到显示子屏幕的宽度参数;获取目标元素;计算目标元素的宽度参数;根据目标元素的宽度参数和每个显示子屏幕的宽度参数,确定显示目标元素的显示子屏幕的数量;将目标元素的显示子屏幕的数量作为网页中待显示的目标元素的显示宽度参数。
上述实施例中,是根据获取的终端的显示屏幕的宽度参数,对显示屏幕进行划分,以确定显示子屏幕,例如,在获取到终端的显示屏幕的宽度为40cm时,第一预设参考阈值为10,此时可以将显示屏幕划分为10份,每份有4cm。在划分好终端的显示屏幕之后,可以确定每个显示子屏幕的显示元素。
对于上述的网页布局方法中,在获取到终端的显示屏幕的高度参数后,根据显示屏幕的显示参数和预设参考阈值,计算网页中待显示的目标元素的显示参数包括:将终端的显示屏幕的高度参数按照第二预设参考阈值划分,得到多个显示子屏幕的高度参数;获取目标元素;计算目标元素的高度参数;根据目标元素的高度参数和每个显示子屏幕的高度参数,确定显示目标元素的显示子屏幕的数量;将目标元素的显示子屏幕的数量作为网页中待显示的目标元素的显示高度参数。
对于上述实施方式,可以是在获取到终端的显示屏幕的高度参数后,对显示屏幕进行划分,从而确定出多个显示子屏幕,相比于相关技术中只能进行宽度屏幕的划分,本发明实施例中可以对网页的高度显示屏幕进行划分,从而设置相应的显示元素在对应的显示高度子屏幕中。例如,检测到终端的显示屏幕高度为30cm,第二预设参考阈值为10,则可以将显示屏幕划分为10份,每份3cm,将多个显示元素设置在显示子屏幕中。
需要说明的是,本发明实施例中,可以对终端的显示屏幕的宽度和高度都进行划分,确定出多个显示子屏幕,在开始划分时,显示子屏幕的大小可以是一致的,然后,可以在将显示元素放置在显示子屏幕中时,可以向确定显示元素的各项参数,例如,显示元素的大小、显示元素的标题字数等。在确定显示元素的参数后,可以根据该参数确定出需要多少显示子屏幕,例如,显示元素A需要3个显示子屏幕,显示元素B需要2个显示子屏幕,这时就可以根据显示元素的参数,分配对应的显示子屏幕。
可选的,在划分终端的显示屏幕时,可以通过获取显示的高度参数和宽度参数,对显示屏幕进行高度和宽度结合划分,得到多个网格,例如,将根据显示屏幕的宽度,将显示屏幕划分12列、5行,每列存在一个单独的显示子屏幕,然后可以获取显示元素需要的高度和宽度,组合多列显示子屏幕。例如,在第一行设置12列子屏幕,每列宽度为1,第二行设置三列子屏幕,每列子屏幕的宽度为4,第三行设置两列子屏幕,其宽度分别为4和8,第四行设置两列子屏幕,每列宽度为6,第五行设置一列子屏幕,宽度为12,然后,就可以将相应大小的显示元素放置对应行的显示子屏幕中。
对于上述实施例,根据目标元素的显示参数,在网页上显示目标元素包括:判断目标元素的显示参数中是否包括非整数的显示参数;若目标元素的显示参数中包括非整数的显示参数,确定目标显示参数,其中,目标显示参数为非整数的显示参数;对目标显示参数进行取整;基于网页的目标元素的整数的显示参数和取整后的目标显示参数,在显示屏幕上显示网页的目标元素。
上述实施方式中,是在获取显示屏幕的参数后,若划分显示屏幕后,有剩余的显示参数后,需要调整显示子屏幕的划分,例如,获取到显示屏幕的高度为24cm,需要划分为10份,则每一份都会是2.4cm,这样会存在显示子屏幕的划分不合理的情况,需要调整显示屏幕的划分,以方便显示元素的放置位置的确定。可选的,在获取到显示屏幕为23.5cm时,出现非整数的显示屏幕参数,此时也需要调整划分显示子屏幕的数据,以确定出符合显示元素大小的显示子屏幕。
可选的,在网页布局的处理方法中,基于网页的目标元素的整数的显示参数和取整后的目标显示参数,在显示屏幕上显示网页的目标元素包括:基于目标显示参数确定目标显示子参数,其中,目标显示子参数是目标显示参数取整后剩余的显示参数;基于目标显示子参数、网页的目标元素的整数的显示参数和取整后的目标显示参数,在显示屏幕上显示网页的目标元素。其中,该显示屏幕可以为多种设备的显示屏幕,例如,用户终端的显示屏幕、PC的显示屏幕、平板的显示屏幕等。通过该显示屏幕可以灵活调整显示元素的显示参数。
上述实施方式中,在出现显示屏幕为非整数时,对于出现小数的部分单独划分显示子屏幕,并结合其他的非小数划分的显示子屏幕,从而确定出整个显示屏幕的划分方式,以调整显示元素使用的显示子屏幕的数量,和显示元素放置的位置。
下面通过一个优选的实施方式对本发明做出说明。
图2是根据本发明实施例的一种网页布局的示意图,如图2所示,在显示屏幕中中,分割为2*2块,假如横向采用正常的12列布局,则可以设置每行的每个元素宽度为6(即A和C所在的元素的宽度为6,B和D所在的元素的宽度也为6),高度则设置为50vh,这样的话每个元素均占高度和宽度的50%,就可以实现这种布局。而以前只有横向布局的话,是没有办法设置纵向高度为百分比的,只能设置为固定高度(比如100px)。
其中,本申请的页面高度可以设置为100vh(可以理解为100%),设置10个类,分别为row-1至row-10,每个类对应的高度属性分别为10vh、20vh至100vh。代表占页面整体高度的百分比。Vh是css的一个属性,代表页面可视区域高度。在页面中使用时,只需给需要的元素设置对应的row-1至row-10的类名,即可以实现想要的高度布局。比如给某个元素设置高度为10vh,则代表其所占高度为整个页面的10%(10vh/100vh)。
通过上述实施例,用户(开发者)可以更方便的设置页面的高度布局。再结合已有的横向布局的方案,可以方便的实现任意一种布局方案。通过将网页页面高度n等分,通过给不同元素设置不同的数值,从而使该元素占据对应比例的页面高度。
需要说明的是,在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行,并且,虽然在流程图中示出了逻辑顺序,但是在某些情况下,可以以不同于此处的顺序执行所示出或描述的步骤。
本申请实施例还提供了一种网页布局的处理装置,需要说明的是,本申请实施例的网页布局的处理装置可以用于执行本申请实施例所提供的用于网页布局的处理方法。以下对本申请实施例提供的网页布局的处理装置进行介绍。
图3是根据本申请的一种网页布局的处理装置的结构图,如图3所示,该装置包括:获取单元31,用于获取终端的显示屏幕的显示参数,其中,显示参数至少包括下述之一:显示屏幕的宽度、显示屏幕的高度;计算单元33,用于根据显示屏幕的显示参数和预设参考阈值,计算网页中待显示的目标元素的显示参数,其中,网页为在终端的显示界面上创建的网页;显示单元35,用于根据网页的目标元素的显示参数,在终端的显示屏幕上显示网页的目标元素。
在上述的网页布局的处理装置中,可以通过获取单元31先获取终端的显示屏幕的显示参数,并根据显示屏幕的显示参数和预设参考阈值,通过计算单元33计算网页中待显示的目标元素的显示参数,然后通过显示单元35根据目标元素的显示参数,在网页中显示目标元素。在实施例中,可以通过显示屏幕的显示参数,灵活调整目标元素的显示参数,包括调整目标元素在网页中显示高度、宽度参数,从而让使用者可以灵活的在网页中进行布局,调整网页中各个目标元素的高度、宽度参数,进而解决相关技术中在进行网页布局时,由于无法调整网页的显示宽度和高度,导致用户体验度差的问题,达到灵活调整网页布局的效果。
对于上述的处理装置,其中,计算单元可以包括:第一划分模块,用于在获取到终端的显示屏幕的宽度参数后,将终端的显示屏幕的宽度参数按照第一预设参考阈值划分,得到显示子屏幕的宽度参数;第一获取模块,用于获取目标元素;第一计算模块,用于计算目标元素的宽度参数;第一确定模块,用于根据目标元素的宽度参数和每个显示子屏幕的宽度参数,确定显示目标元素的显示子屏幕的数量;第二确定模块,用于将目标元素的显示子屏幕的数量作为网页中待显示的目标元素的显示宽度参数。
上述的计算单元还可以包括:第二划分模块,用于在获取到终端的显示屏幕的高度参数后,将终端的显示屏幕的高度参数按照第二预设参考阈值划分,得到多个显示子屏幕的高度参数;第二获取模块,用于获取目标元素;第二计算模块,用于计算目标元素的高度参数;第三确定模块,用于根据目标元素的高度参数和每个显示子屏幕的高度参数,确定显示目标元素的显示子屏幕的数量;第四确定模块,用于将目标元素的显示子屏幕的数量作为网页中待显示的目标元素的显示高度参数。
所述网页布局的处理装置包括处理器和存储器,上述获取单元31、计算单元33、显示单元35等均作为程序单元存储在存储器中,由处理器执行存储在存储器中的上述程序单元来实现相应的功能。
处理器中包含内核,由内核去存储器中调取相应的程序单元。内核可以设置一个或以上,通过调整内核参数来灵活调整网页布局。
为了实现上述目的,根据本申请的另一方面,提供了一种存储器,存储器包括存储的程序,其中,程序执行上述任意一项的网页布局的处理方法。
为了实现上述目的,根据本申请的另一方面,提供了一种处理器,处理器用于运行程序,其中,程序运行时执行上述任意一项的网页布局的处理方法。
存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM),存储器包括至少一个存储芯片。
本发明实施例提供了一种设备,设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序,处理器执行程序时实现以下步骤:获取终端的显示屏幕的显示参数,其中,显示参数至少包括下述之一:显示屏幕的宽度、显示屏幕的高度;根据显示屏幕的显示参数和预设参考阈值,计算网页中待显示的目标元素的显示参数,其中,网页为在终端的显示界面上创建的网页;根据目标元素的显示参数,在网页中显示目标元素。
可选地,上述处理器在执行程序时,还可以在获取到终端的显示屏幕的宽度参数后,将终端的显示屏幕的宽度参数按照第一预设参考阈值划分,得到显示子屏幕的宽度参数;获取目标元素;计算目标元素的宽度参数;根据目标元素的宽度参数和每个显示子屏幕的宽度参数,确定显示目标元素的显示子屏幕的数量;将目标元素的显示子屏幕的数量作为网页中待显示的目标元素的显示宽度参数。
可选地,上述处理器在执行程序时,还可以在获取到终端的显示屏幕的高度参数后,将终端的显示屏幕的高度参数按照第二预设参考阈值划分,得到多个显示子屏幕的高度参数;获取目标元素;计算目标元素的高度参数;根据目标元素的高度参数和每个显示子屏幕的高度参数,确定显示目标元素的显示子屏幕的数量;将目标元素的显示子屏幕的数量作为网页中待显示的目标元素的显示高度参数。
可选地,上述处理器在执行程序时,还可以判断目标元素的显示参数中是否包括非整数的显示参数;若目标元素的显示参数中包括非整数的显示参数,确定目标显示参数,其中,目标显示参数为非整数的显示参数;对目标显示参数进行取整;基于网页的目标元素的整数的显示参数和取整后的目标显示参数,在显示屏幕上显示网页的目标元素。
可选地,上述处理器在执行程序时,还可以基于目标显示参数确定目标显示子参数,其中,目标显示子参数是目标显示参数取整后剩余的显示参数;基于目标显示子参数、网页的目标元素的整数的显示参数和取整后的目标显示参数,在显示屏幕上显示网页的目标元素。本文中的设备可以是服务器、PC、PAD、手机等。
本申请还提供了一种计算机程序产品,当在数据处理设备上执行时,适于执行初始化有如下方法步骤的程序:获取终端的显示屏幕的显示参数,其中,显示参数至少包括下述之一:显示屏幕的宽度、显示屏幕的高度;根据显示屏幕的显示参数和预设参考阈值,计算网页中待显示的目标元素的显示参数,其中,网页为在终端的显示界面上创建的网页;根据目标元素的显示参数,在网页中显示目标元素。
可选地,上述数据处理设备在执行程序时,还可以在获取到终端的显示屏幕的宽度参数后,将终端的显示屏幕的宽度参数按照第一预设参考阈值划分,得到显示子屏幕的宽度参数;获取目标元素;计算目标元素的宽度参数;根据目标元素的宽度参数和每个显示子屏幕的宽度参数,确定显示目标元素的显示子屏幕的数量;将目标元素的显示子屏幕的数量作为网页中待显示的目标元素的显示宽度参数。
可选地,上述数据处理设备在执行程序时,还可以在获取到终端的显示屏幕的高度参数后,将终端的显示屏幕的高度参数按照第二预设参考阈值划分,得到多个显示子屏幕的高度参数;获取目标元素;计算目标元素的高度参数;根据目标元素的高度参数和每个显示子屏幕的高度参数,确定显示目标元素的显示子屏幕的数量;将目标元素的显示子屏幕的数量作为网页中待显示的目标元素的显示高度参数。
可选地,上述数据处理设备在执行程序时,还可以判断目标元素的显示参数中是否包括非整数的显示参数;若目标元素的显示参数中包括非整数的显示参数,确定目标显示参数,其中,目标显示参数为非整数的显示参数;对目标显示参数进行取整;基于网页的目标元素的整数的显示参数和取整后的目标显示参数,在显示屏幕上显示网页的目标元素。
可选地,上述数据处理设备在执行程序时,还可以基于目标显示参数确定目标显示子参数,其中,目标显示子参数是目标显示参数取整后剩余的显示参数;基于目标显示子参数、网页的目标元素的整数的显示参数和取整后的目标显示参数,在显示屏幕上显示网页的目标元素。
本领域内的技术人员应明白,本申请的实施例可提供为方法、系统、或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中,计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括暂存电脑可读媒体(transitory media),如调制的数据信号和载波。
还需要说明的是,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。
本领域技术人员应明白,本申请的实施例可提供为方法、系统或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
以上仅为本申请的实施例而已,并不用于限制本申请。对于本领域技术人员来说,本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等,均应包含在本申请的权利要求范围之内。

Claims (5)

1.一种网页布局的处理方法,其特征在于,包括:
获取终端的显示屏幕的显示参数,其中,所述显示参数至少包括下述之一:所述显示屏幕的宽度、所述显示屏幕的高度;
根据所述显示屏幕的显示参数和预设参考阈值,计算网页中待显示的目标元素的显示参数,其中,所述网页为在所述终端的显示界面上创建的网页;
根据所述目标元素的显示参数,在所述网页中显示所述目标元素;
其中,根据所述目标元素的显示参数,在所述网页中显示所述目标元素包括:判断所述目标元素的显示参数中是否包括非整数的显示参数;若所述目标元素的显示参数中包括非整数的显示参数,确定目标显示参数,其中,所述目标显示参数为非整数的显示参数;对所述目标显示参数进行取整;基于所述网页的目标元素的整数的显示参数和取整后的目标显示参数,在所述显示屏幕上显示所述网页的目标元素;
其中,在获取到所述终端的显示屏幕的宽度参数后,根据所述显示屏幕的显示参数和预设参考阈值,计算网页中待显示的目标元素的显示参数包括:将所述终端的显示屏幕的宽度参数按照第一预设参考阈值划分,得到显示子屏幕的宽度参数;获取目标元素;计算所述目标元素的宽度参数;根据所述目标元素的宽度参数和每个显示子屏幕的宽度参数,确定显示所述目标元素的显示子屏幕的数量;将所述目标元素的显示子屏幕的数量作为网页中待显示的目标元素的显示宽度参数;
其中,在获取到所述终端的显示屏幕的高度参数后,根据所述显示屏幕的显示参数和预设参考阈值,计算网页中待显示的目标元素的显示参数包括:将所述终端的显示屏幕的高度参数按照第二预设参考阈值划分,得到多个显示子屏幕的高度参数;获取目标元素;计算所述目标元素的高度参数;根据所述目标元素的高度参数和每个显示子屏幕的高度参数,确定显示所述目标元素的显示子屏幕的数量;将所述目标元素的显示子屏幕的数量作为网页中待显示的目标元素的显示高度参数。
2.根据权利要求1所述的方法,其特征在于,基于所述网页的目标元素的整数的显示参数和取整后的目标显示参数,在所述显示屏幕上显示所述网页的目标元素包括:
基于所述目标显示参数确定目标显示子参数,其中,所述目标显示子参数是所述目标显示参数取整后剩余的显示参数;
基于所述目标显示子参数、所述网页的目标元素的整数的显示参数和取整后的目标显示参数,在所述显示屏幕上显示所述网页的目标元素。
3.一种网页布局的处理装置,其特征在于,包括:
获取单元,用于获取终端的显示屏幕的显示参数,其中,所述显示参数至少包括下述之一:所述显示屏幕的宽度、所述显示屏幕的高度;
计算单元,用于根据所述显示屏幕的显示参数和预设参考阈值,计算网页中待显示的目标元素的显示参数,其中,所述网页为在所述终端的显示界面上创建的网页;
显示单元,用于根据所述目标元素的显示参数,在所述网页中显示所述目标元素;
其中,所述处理装置还用于:判断所述目标元素的显示参数中是否包括非整数的显示参数;若所述目标元素的显示参数中包括非整数的显示参数,确定目标显示参数,其中,所述目标显示参数为非整数的显示参数;对所述目标显示参数进行取整;基于所述网页的目标元素的整数的显示参数和取整后的目标显示参数,在所述显示屏幕上显示所述网页的目标元素;
其中,所述计算单元包括:第一划分模块,用于在获取到所述终端的显示屏幕的宽度参数后,将所述终端的显示屏幕的宽度参数按照第一预设参考阈值划分,得到显示子屏幕的宽度参数;第一获取模块,用于获取目标元素;第一计算模块,用于计算所述目标元素的宽度参数;第一确定模块,用于根据所述目标元素的宽度参数和每个显示子屏幕的宽度参数,确定显示所述目标元素的显示子屏幕的数量;第二确定模块,用于将所述目标元素的显示子屏幕的数量作为网页中待显示的目标元素的显示宽度参数;
其中,所述计算单元还包括:第二划分模块,用于在获取到所述终端的显示屏幕的高度参数后,将所述终端的显示屏幕的高度参数按照第二预设参考阈值划分,得到多个显示子屏幕的高度参数;第二获取模块,用于获取目标元素;第二计算模块,用于计算所述目标元素的高度参数;第三确定模块,用于根据所述目标元素的高度参数和每个显示子屏幕的高度参数,确定显示所述目标元素的显示子屏幕的数量;第四确定模块,用于将所述目标元素的显示子屏幕的数量作为网页中待显示的目标元素的显示高度参数。
4.一种存储介质,其特征在于,所述存储介质包括存储的程序,其中,所述程序执行权利要求1或2所述的网页布局的处理方法。
5.一种处理器,其特征在于,所述处理器用于运行程序,其中,所述程序运行时执行权利要求1或2所述的网页布局的处理方法。
CN201710929829.3A 2017-09-30 2017-09-30 网页布局的处理方法及装置 Active CN110020291B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710929829.3A CN110020291B (zh) 2017-09-30 2017-09-30 网页布局的处理方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710929829.3A CN110020291B (zh) 2017-09-30 2017-09-30 网页布局的处理方法及装置

Publications (2)

Publication Number Publication Date
CN110020291A CN110020291A (zh) 2019-07-16
CN110020291B true CN110020291B (zh) 2022-05-27

Family

ID=67186445

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710929829.3A Active CN110020291B (zh) 2017-09-30 2017-09-30 网页布局的处理方法及装置

Country Status (1)

Country Link
CN (1) CN110020291B (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112800357A (zh) * 2019-10-28 2021-05-14 北京国双科技有限公司 Web页面呈现方法、装置、设备及存储介质
CN112423029A (zh) * 2020-10-28 2021-02-26 深圳Tcl新技术有限公司 节目播放方法、显示设备及计算机可读存储介质
CN112395033A (zh) * 2020-11-18 2021-02-23 中国平安人寿保险股份有限公司 网页自适应方法及相关产品

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102243633A (zh) * 2010-05-11 2011-11-16 深圳市金蝶中间件有限公司 网页布局的方法及装置
CN103150361B (zh) * 2013-02-27 2017-02-08 优视科技有限公司 一种网页显示方法及装置
CN105740315B (zh) * 2015-12-31 2019-10-11 南京焦点领动云计算技术有限公司 一种多种屏幕响应式网页布局调整的方法
CN105739972A (zh) * 2016-01-21 2016-07-06 浪潮通用软件有限公司 一种实现控件自适应屏幕的方法和装置
CN106168959B (zh) * 2016-06-29 2019-12-17 合一网络技术(北京)有限公司 网页布局方法及装置

Also Published As

Publication number Publication date
CN110020291A (zh) 2019-07-16

Similar Documents

Publication Publication Date Title
CN105373567B (zh) 页面生成方法及客户端
CN110020291B (zh) 网页布局的处理方法及装置
KR20200037887A (ko) 합성 화상을 생성하는 방법 및 장치
WO2015196822A1 (zh) 一种网页适应屏幕排版方法及装置
CN105630792B (zh) 一种信息显示、推送方法及装置
CN105373593B (zh) 一种展示网页中目标元素的方法及装置
CN105094622A (zh) 调节表格列宽的方法及设备
CN111104117A (zh) 页面主题风格切换方法、装置、电子设备及计算机存储介质
CN109426415B (zh) 一种生成级联选择器的方法及装置
CN108572817B (zh) 基于业务建模的资源动态配置的方法、装置和介质
CN110968314A (zh) 一种页面生成方法及装置
CN109948083B (zh) 网页处理方法及装置
CN110968385A (zh) 比例显示方法和装置
CN108460003B (zh) 文本数据的处理方法和装置
CN110020343B (zh) 网页编码格式的确定方法和装置
CN106649374B (zh) 导航标签排序的方法及装置
CN107391144B (zh) 视图展示方法及装置
US10740539B2 (en) Page structure adjustments
CN111209009A (zh) 内容发布方法及装置、存储介质及电子设备
CN110309449A (zh) 页面渲染方法及装置
CN110968810A (zh) 网页数据处理方法和装置
CN113961184A (zh) 页面布局的处理方法、装置、存储介质及电子设备
CN106682228A (zh) 一种可视化动态绘制机柜排列的方法和装置
CN109948076B (zh) 数据可视化的配置方法及装置
CN112800357A (zh) Web页面呈现方法、装置、设备及存储介质

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
CB02 Change of applicant information
CB02 Change of applicant information

Address after: 100083 No. 401, 4th Floor, Haitai Building, 229 North Fourth Ring Road, Haidian District, Beijing

Applicant after: Beijing Guoshuang Technology Co.,Ltd.

Address before: 100086 Beijing city Haidian District Shuangyushu Area No. 76 Zhichun Road cuigongfandian 8 layer A

Applicant before: Beijing Guoshuang Technology Co.,Ltd.

GR01 Patent grant
GR01 Patent grant