CN110968811B - 显示控制方法和装置 - Google Patents

Abstract

本发明公开了一种显示控制方法和装置。该方法包括：在检测到浏览器缩放变化时，获取占位图片的父元素的尺寸；根据占位图片的父元素的尺寸确定移动端内容区域的尺寸，其中，占位图片的父元素和移动端内容区域的父元素为同一个；控制移动端内容区域按照确定的尺寸显示。通过本发明，达到了使内容区域随浏览器窗口变化等比例缩放流程简单的效果。

Description

显示控制方法和装置

技术领域

本发明涉及显示领域，具体而言，涉及一种显示控制方法和装置。

背景技术

Css中，媒体查询可根据媒体特征限制样式表作用范围，伪元素的content由css控制，会直接展示在界面中。

举例在一个应用场景中，开发人员想要在计算机终端的网页页面中对一款APP在移动终端中的显示界面进行配置，期间可能会对浏览器界面大小进行缩放以修改代码或参数等内容，但在缩放浏览器时网页中显示的模拟移动终端的界面也会发生大小变化，变化后的大小和移动终端界面实际大小不同，开发人员需要知道当前模拟移动终端的界面的缩放比例，现有的方案是用JavaScript去监听浏览器的缩放事件，然后用代码根据移动端预览比例计算预览区域的宽度和高度，再修改相应元素的宽高。

但这样的方案具有很多缺点，例如，需要手动计算宽高、修改dom，会触发浏览器重绘和重排，有性能消耗。监听浏览器事件容易触发多次，需要程序做防抖、节流的优化，增加了许多额外的代码。监听事件需要考虑不同浏览器事件监听的写法，有额外兼容代码。

针对相关技术中网页中的移动端内容区域随浏览器窗口变化等比例缩放流程复杂的问题，目前尚未提出有效的解决方案。

发明内容

本发明的主要目的在于提供一种显示控制方法和装置，以解决网页中的移动端内容区域随浏览器窗口变化等比例缩放流程复杂的问题。

为了实现上述目的，根据本发明的一个方面，提供了一种显示控制方法，该方法包括：在检测到浏览器缩放变化时，获取占位图片的父元素的尺寸；根据所述占位图片的父元素的尺寸确定移动端内容区域的尺寸，其中，所述占位图片的父元素和所述移动端内容区域的父元素为同一个；控制所述移动端内容区域按照确定的尺寸显示。

进一步地，获取所述占位图片的父元素的尺寸包括：获取所述占位图片当前的高度值；获取所述占位图片的宽高比例；根据所述高度值和所述宽高比例得到所述占位图片的宽度值；将所述占位图片的高度值和宽度值作为所述占位图片的父元素的尺寸。

进一步地，在获取占位图片的父元素的尺寸之前，所述方法还包括：在网页中预设位置处插入所述占位图片；设置所述占位图片的高度为与浏览器高度相同，宽度随占位图片高度等比例变化，或，设置所述占位图片的宽度为浏览器宽度相同，高度随占位图片宽度等比例变化；为所述占位图片添加父元素。

进一步地，在根据所述占位图片的父元素的尺寸确定移动端内容区域的尺寸之前，所述方法还包括：设置所述占位图片的父元素与移动端内容区域的父元素相同。

进一步地，控制所述移动端内容区域按照确定的尺寸显示包括：将所述移动端内容区域的内容文件设置为覆盖在所述占位图片上层，且内容区域的位置、宽度和高度设置为与所述占位图片的位置、宽度和高度相同。

为了实现上述目的，根据本发明的另一方面，还提供了一种显示控制装置，该装置包括：获取单元，用于在检测到浏览器缩放变化时，获取占位图片的父元素的尺寸；确定单元，用于根据占位图片的父元素的尺寸确定移动端内容区域的尺寸，其中，占位图片的父元素和移动端内容区域的父元素为同一个；控制单元，用于控制移动端内容区域按照确定的尺寸显示。

进一步地，所述获取单元包括：第一获取模块，用于获取占位图片当前的高度值；第二获取模块，用于获取占位图片的宽高比例；计算模块，用于根据高度值和宽高比例得到占位图片的宽度值；处理模块，用于将占位图片的高度值和宽度值作为占位图片的父元素的尺寸。

进一步地，该装置还包括：插入单元，用于在获取占位图片的父元素的尺寸之前，在网页中预设位置处插入占位图片；设置单元，用于设置占位图片的高度为与浏览器高度相同，宽度随占位图片高度等比例变化，或，设置占位图片的宽度为浏览器宽度相同，高度随占位图片宽度等比例变化；添加单元，用于为占位图片添加父元素。

为了实现上述目的，根据本发明的另一方面，还提供了一种存储介质，包括存储的程序，其中，在所述程序运行时控制所述存储介质所在设备执行本发明所述的显示控制方法。

为了实现上述目的，根据本发明的另一方面，还提供了一种处理器，用于运行程序，其中，所述程序运行时执行本发明所述的显示控制方法。

本发明通过在检测到浏览器缩放变化时，获取占位图片的父元素的尺寸；根据占位图片的父元素的尺寸确定移动端内容区域的尺寸，其中，占位图片的父元素和移动端内容区域的父元素为同一个；控制移动端内容区域按照确定的尺寸显示，解决了网页中的移动端内容区域随浏览器窗口变化等比例缩放流程复杂的问题，进而达到了使内容区域随浏览器窗口变化等比例缩放流程简单的效果。

附图说明

构成本申请的一部分的附图用来提供对本发明的进一步理解，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的显示控制方法的流程图；

图2是根据本发明实施例的一种代码显示界面的示意图；

图3是根据本发明实施例的显示控制装置的示意图。

具体实施方式

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本发明。

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

本发明实施例提供了一种显示控制方法。

图1是根据本发明实施例的显示控制方法的流程图，如图1所示，该方法包括以下步骤：

步骤S102：在检测到浏览器缩放变化时，获取占位图片的父元素的尺寸；

步骤S104：根据占位图片的父元素的尺寸确定移动端内容区域的尺寸，其中，占位图片的父元素和移动端内容区域的父元素为同一个；

步骤S106：控制移动端内容区域按照确定的尺寸显示。

该实施例采用在检测到浏览器缩放变化时，获取占位图片的父元素的尺寸；根据占位图片的父元素的尺寸确定移动端内容区域的尺寸，其中，占位图片的父元素和移动端内容区域的父元素为同一个；控制移动端内容区域按照确定的尺寸显示，解决了网页中的移动端内容区域随浏览器窗口变化等比例缩放流程复杂的问题，进而达到了使内容区域随浏览器窗口变化等比例缩放流程简单的效果。

本发明实施例的技术方案可以作为一种利用图片占位使移动端预览随浏览器窗口变化等比例缩放的技术方案，检测到浏览器缩放变化时，可以获取占位图片的父元素的尺寸，其中，父元素中具有该占位图片的当前宽高参数，可以通过获取父元素中的尺寸来确定当前的占位图片的宽高尺寸，以此来确定移动端内容区域的尺寸，可以保证移动端内容区域的尺寸与预设的占位图片的尺寸始终相同，使内容区域随浏览器窗口变化等比例缩放流程更加简单。

浏览器渲染某个元素时会计算这个元素的位置，计算位置时会有一些参考系，子元素可以设置绝对定位让这个参考设置为父元素，因此，父元素变化后计算子元素(内容区域)位置时根据父元素来计算，能保证内容区域随父元素变化，可以通过绝对定位来实现内容区域随父元素的变化。

可选的，获取所述占位图片的父元素的尺寸包括：获取占位图片当前的高度值；获取占位图片的宽高比例；根据高度值和宽高比例得到占位图片的宽度值；将占位图片的高度值和宽度值作为占位图片的父元素的尺寸。

在获取占位图片的父元素的尺寸时可以是获取占位图片当前的高度值，因为宽高比例预设设定为定值，因而可以根据高度值和宽高比例确定宽度值，确定出来之后可以将占位图片的宽高传递给父元素，作为父元素的尺寸，父元素的尺寸可以是父元素中保存的尺寸参数。

可选的，在获取占位图片的父元素的尺寸之前，在网页中预设位置处插入占位图片；设置占位图片的高度为与浏览器高度相同，宽度随占位图片高度等比例变化，或，设置占位图片的宽度为浏览器宽度相同，高度随占位图片宽度等比例变化；为占位图片添加父元素。

占位图片需要预先插入到网页中，插入时可以设置图片的高度与浏览器高度相同，宽度随图片高度等比例变化，或者设置图片宽度与浏览器相同，高度随图片宽度等比例变化，除了这样的设置方法还可以设置图片高度为浏览器高度的一半或者三分之一等，需要为占位图片添加父元素以实现尺寸传递。

可选的，在根据占位图片的父元素的尺寸确定移动端内容区域的尺寸之前，设置占位图片的父元素与移动端内容区域的父元素相同。

将占位图片的父元素与移动端内容区域的父元素设置为同一个，可以实现尺寸传递，保证移动端内容区域的内容显示在占位图片的区域。

可选的，控制移动端内容区域按照确定的尺寸显示包括：将移动端内容区域的内容文件设置为覆盖在占位图片上层，且内容区域的位置、宽度和高度设置为与占位图片的位置、宽度和高度相同。

可以将移动端内容区域的内容文件设置为覆盖在占位图片上层，这样，移动端内容可以始终覆盖住占位图片，占位图片始终被挡住不会在网页上显示出来。

本发明实施例还提供了一种优选实施方式。

图2是根据本发明实施例的一种代码显示界面的示意图，如图2所示，img作为占位使用，设置“max-height:100％；width:auto；”可使图片在浏览器缩放中保持比例。content区域是预览区域，用绝对定位铺满父元素即可随父元素保持比例。父元素需要设置“display:inline-block；width:auto；”使其能被图片撑开。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本发明实施例提供了一种显示控制装置，该装置可以用于执行本发明实施例的显示控制方法。

图3是根据本发明实施例的显示控制装置的示意图，如图3所示，该装置包括：

获取单元10，用于在检测到浏览器缩放变化时，获取占位图片的父元素的尺寸；

确定单元20，用于根据占位图片的父元素的尺寸确定移动端内容区域的尺寸，其中，占位图片的父元素和移动端内容区域的父元素为同一个；

控制单元30，用于控制移动端内容区域按照确定的尺寸显示。

该实施例采用获取单元10，用于在检测到浏览器缩放变化时，获取占位图片的父元素的尺寸；确定单元20，用于根据占位图片的父元素的尺寸确定移动端内容区域的尺寸，其中，占位图片的父元素和移动端内容区域的父元素为同一个；控制单元30，用于控制移动端内容区域按照确定的尺寸显示，从而解决了网页中的移动端内容区域随浏览器窗口变化等比例缩放流程复杂的问题，进而达到了使内容区域随浏览器窗口变化等比例缩放流程简单的效果。

可选的，所述获取单元包括：第一获取模块，用于获取占位图片当前的高度值；第二获取模块，用于获取占位图片的宽高比例；计算模块，用于根据高度值和宽高比例得到占位图片的宽度值；处理模块，用于将占位图片的高度值和宽度值作为占位图片的父元素的尺寸。

可选的，该装置还包括：插入单元，用于在获取占位图片的父元素的尺寸之前，在网页中预设位置处插入占位图片；设置单元，用于设置占位图片的高度为与浏览器高度相同，宽度随占位图片高度等比例变化，或，设置占位图片的宽度为浏览器宽度相同，高度随占位图片宽度等比例变化；添加单元，用于为占位图片添加父元素。

所述显示控制装置包括处理器和存储器，上述获取单元、确定单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来使内容区域随浏览器窗口变化等比例缩放流程简单。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(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 (8)

1.一种显示控制方法，其特征在于，包括：

在检测到浏览器缩放变化时，获取占位图片的父元素的尺寸；

根据所述占位图片的父元素的尺寸确定移动端内容区域的尺寸，其中，所述占位图片的父元素和所述移动端内容区域的父元素为同一个；

控制所述移动端内容区域按照确定的尺寸显示；

其中，在获取占位图片的父元素的尺寸之前，所述方法还包括：

在网页中预设位置处插入所述占位图片；

设置所述占位图片的高度为与浏览器高度相同，宽度随占位图片高度等比例变化，或，设置所述占位图片的宽度为浏览器宽度相同，高度随占位图片宽度等比例变化；

为所述占位图片添加父元素。

2.根据权利要求1所述的方法，其特征在于，获取所述占位图片的父元素的尺寸包括：

获取所述占位图片当前的高度值；

获取所述占位图片的宽高比例；

根据所述高度值和所述宽高比例得到所述占位图片的宽度值；

将所述占位图片的高度值和宽度值作为所述占位图片的父元素的尺寸。

3.根据权利要求1所述的方法，其特征在于，在根据所述占位图片的父元素的尺寸确定移动端内容区域的尺寸之前，所述方法还包括：

设置所述占位图片的父元素与移动端内容区域的父元素相同。

4.根据权利要求1所述的方法，其特征在于，控制所述移动端内容区域按照确定的尺寸显示包括：

将所述移动端内容区域的内容文件设置为覆盖在所述占位图片上层，且内容区域的位置、宽度和高度设置为与所述占位图片的位置、宽度和高度相同。

5.一种显示控制装置，其特征在于，包括：

获取单元，用于在检测到浏览器缩放变化时，获取占位图片的父元素的尺寸；

确定单元，用于根据占位图片的父元素的尺寸确定移动端内容区域的尺寸，其中，占位图片的父元素和移动端内容区域的父元素为同一个；

控制单元，用于控制移动端内容区域按照确定的尺寸显示；

插入单元，用于在获取占位图片的父元素的尺寸之前，在网页中预设位置处插入占位图片；

设置单元，用于设置占位图片的高度为与浏览器高度相同，宽度随占位图片高度等比例变化，或，设置占位图片的宽度为浏览器宽度相同，高度随占位图片宽度等比例变化；

添加单元，用于为占位图片添加父元素。

6.根据权利要求5的装置，其特征在于，所述获取单元包括：

第一获取模块，用于获取占位图片当前的高度值；

第二获取模块，用于获取占位图片的宽高比例；

计算模块，用于根据高度值和宽高比例得到占位图片的宽度值；

处理模块，用于将占位图片的高度值和宽度值作为占位图片的父元素的尺寸。

7.一种存储介质，其特征在于，所述存储介质包括存储的程序，其中，在所述程序运行时控制所述存储介质所在设备执行权利要求1至4中任意一项所述的显示控制方法。

8.一种处理器，其特征在于，所述处理器用于运行程序，其中，所述程序运行时执行权利要求1至4中任意一项所述的显示控制方法。

Images