CN110968385A - 比例显示方法和装置 - Google Patents

Abstract

本发明公开了一种比例显示方法和装置。该方法包括：浏览器获取页面的样式文件，其中，样式文件中存储有浏览器执行的媒体查询事件与当前浏览器页面的尺寸的对应关系；根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸信息；根据确定的当前浏览器页面的尺寸以及浏览器页面中的移动端内容区域的尺寸计算比值，得到缩放比例，其中，移动端内容区域的宽度和高度的比例预先被设置为固定值；将缩放比例显示在浏览器页面中移动端内容区域的预设位置处。通过本发明，达到了降低页面中移动端的内容区域缩放比例计算方案复杂度的效果。

Description

比例显示方法和装置

技术领域

本发明涉及计算机领域，具体而言，涉及一种比例显示方法和装置。

背景技术

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

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

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

针对相关技术中页面中移动端的内容区域缩放比例计算方案复杂的问题，目前尚未提出有效的解决方案。

发明内容

本发明的主要目的在于提供一种比例显示方法和装置，以解决页面中移动端的内容区域缩放比例计算方案复杂的问题。

为了实现上述目的，根据本发明的一个方面，提供了一种比例显示方法，该方法包括：浏览器获取页面的样式文件，其中，所述样式文件中存储有浏览器执行的媒体查询事件与当前浏览器页面的尺寸的对应关系；根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸信息；根据确定的当前浏览器页面的尺寸以及浏览器页面中的移动端内容区域的尺寸计算比值，得到缩放比例，其中，所述移动端内容区域的宽度和高度的比例预先被设置为固定值；将所述缩放比例显示在浏览器页面中移动端内容区域的预设位置处。

进一步地，根据当前页面中所执行的事件确定当前浏览器页面的尺寸信息包括：根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸区间；将所述尺寸区间的最小值确定为当前浏览器页面的尺寸。

进一步地，根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸信息包括：根据当前页面中所执行的媒体查询事件确定当前浏览器页面的高度像素值尺寸区间，和/或根据当前页面中所执行的媒体查询事件确定当前浏览器页面的宽度像素值尺寸区间。

进一步地，将所述缩放比例显示在浏览器页面中移动端内容区域的预设位置处包括：将所述缩放比例对应的伪元素显示在浏览器页面中移动端内容区域的预设位置处。

进一步地，将所述缩放比例显示在浏览器页面中移动端内容区域的预设位置处包括：将所述缩放比例数值对应的伪元素显示在浏览器页面中移动端内容区域的左上角、右上角、左下角或右下角中的任意一个。

为了实现上述目的，根据本发明的另一方面，还提供了一种比例显示装置，该装置包括：获取单元，用于浏览器获取页面的样式文件，其中，所述样式文件中存储有浏览器执行的媒体查询事件与当前浏览器页面的尺寸的对应关系；确定单元，用于根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸信息；计算单元，用于根据确定的当前浏览器页面的尺寸以及浏览器页面中的移动端内容区域的尺寸计算比值，得到缩放比例，其中，所述移动端内容区域的宽度和高度的比例预先被设置为固定值；显示单元，用于将所述缩放比例显示在浏览器页面中移动端内容区域的预设位置处。

进一步地，确定单元包括：第一确定模块，用于根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸区间；第二确定模块，用于将所述尺寸区间的最小值确定为当前浏览器页面的尺寸。

进一步地，所述第一确定模块包括：第一确定子模块，用于根据当前页面中所执行的媒体查询事件确定当前浏览器页面的高度像素值尺寸区间，和/或第二确定子模块，用于根据当前页面中所执行的媒体查询事件确定当前浏览器页面的宽度像素值尺寸区间。

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

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

本发明通过浏览器获取页面的样式文件，其中，所述样式文件中存储有浏览器执行的媒体查询事件与当前浏览器页面的尺寸的对应关系；根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸信息；根据确定的当前浏览器页面的尺寸以及浏览器页面中的移动端内容区域的尺寸计算比值，得到缩放比例，其中，所述移动端内容区域的宽度和高度的比例预先被设置为固定值；将所述缩放比例显示在浏览器页面中移动端内容区域的预设位置处，解决了页面中移动端的内容区域缩放比例计算方案复杂的问题，进而达到了降低页面中移动端的内容区域缩放比例计算方案复杂度的效果。

附图说明

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

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

图2是根据本发明实施例的移动端内容区域的界面的示意图；

图3是根据本发明实施例的通过伪元素显示缩放比例界面的示意图；

图4是根据本发明实施例的比例显示装置的示意图。

具体实施方式

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

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

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

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

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

步骤S102：浏览器获取页面的样式文件，其中，样式文件中存储有浏览器执行的媒体查询事件与当前浏览器页面的尺寸的对应关系；

步骤S104：根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸信息；

步骤S106：根据确定的当前浏览器页面的尺寸以及浏览器页面中的移动端内容区域的尺寸计算比值，得到缩放比例，其中，移动端内容区域的宽度和高度的比例预先被设置为固定值；

步骤S108：将缩放比例显示在浏览器页面中移动端内容区域的预设位置处。

该实施例采用浏览器获取页面的样式文件，其中，样式文件中存储有浏览器执行的媒体查询事件与当前浏览器页面的尺寸的对应关系；根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸信息；根据确定的当前浏览器页面的尺寸以及浏览器页面中的移动端内容区域的尺寸计算比值，得到缩放比例，其中，移动端内容区域的宽度和高度的比例预先被设置为固定值；将缩放比例显示在浏览器页面中移动端内容区域的预设位置处，解决了页面中移动端的内容区域缩放比例计算方案复杂的问题，进而达到了降低页面中移动端的内容区域缩放比例计算方案复杂度的效果。

在本发明实施例中，页面的样式文件中存储有多条媒体查询代码，媒体查询包括条件和内容(执行的事件)，在满足条件限定浏览器在特定条件下执行内容代码，如高度大于600则显示某个文字，因此在某个文字被显示之后，可以确定当前高度已经大于600了，这样可以确定当前浏览器页面的尺寸信息为600，根据当前浏览器页面尺寸和移动端内容区域尺寸计算比值得到缩放比例，例如70％，将这一缩放比例在移动端内容区域的预设位置处显示，以使用户能够查看到当前移动端内容区域的缩放比例。

可选的，根据当前页面中所执行的事件确定当前浏览器页面的尺寸信息包括：根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸区间；将尺寸区间的最小值确定为当前浏览器页面的尺寸。

由于媒体查询事件中的条件是一个尺寸区间，有可能是区间中的任意一个数值，因而可以将这个尺寸区间中的最小值确定为当前浏览器页面的尺寸，以方便后续计算。

可选的，根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸信息包括：根据当前页面中所执行的媒体查询事件确定当前浏览器页面的高度像素值尺寸区间，和/或根据当前页面中所执行的媒体查询事件确定当前浏览器页面的宽度像素值尺寸区间。

具体的，确定浏览器页面的尺寸可以是高度像素尺寸或者宽度像素尺寸，可以两者同时获取，也可以仅获取其中一个。

可选的，将缩放比例显示在浏览器页面中移动端内容区域的预设位置处包括：将缩放比例对应的伪元素显示在浏览器页面中移动端内容区域的预设位置处。

可选的，将缩放比例显示在浏览器页面中移动端内容区域的预设位置处包括：将缩放比例数值对应的伪元素显示在浏览器页面中移动端内容区域的左上角、右上角、左下角或右下角中的任意一个。

预设位置可以是移动端内容区域的任意位置，比较常用的是四个角，也可以根据用户需要设置在内容区域中的任意位置。

本发明实施例的技术方案可以降低计算缩放比例的性能消耗。

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

图2是根据本发明实施例的移动端内容区域的界面的示意图，如图2所示，该缩放比例73％显示在右上角，其字体字号可以根据用户需要预先设置。

图中的缩放比例是通过伪元素显示的，如下：

percent的计算通过媒体查询传入宽度实现，借助预编译等手段，可实现较细力度的缩放比例显示，如下：

利用媒体查询计算出当前的缩放比例，再借助伪类元素显示这一比例，极大提高了浏览器缩放时动态显示缩放比例的性能。同时，借助预编译等手段，可以在少量代码中兼容大部分浏览器，是一个高效的解决方案。

图3是根据本发明实施例的通过伪元素显示缩放比例界面的示意图，如图3所示，样式文件包含媒体查询代码，媒体查询构成：条件和内容，条件限定浏览器在特定条件下执行内容代码，如高度大于600，如浏览器当前高度为1450，有个媒体查询限定浏览器高度大于1400，则此媒体查询内容会被浏览器执行，媒体查询限定浏览器高度大于1400执行，现取1400作为浏览器高度计算预览区域宽、高。如算出预览区域高为800。给定预览区域理想高度值如1000，此时相对理想区域高度来说，缩放比例为80％。

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

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

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

获取单元10，用于浏览器获取页面的样式文件，其中，样式文件中存储有浏览器执行的媒体查询事件与当前浏览器页面的尺寸的对应关系；

确定单元20，用于根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸信息；

计算单元30，用于根据确定的当前浏览器页面的尺寸以及浏览器页面中的移动端内容区域的尺寸计算比值，得到缩放比例，其中，移动端内容区域的宽度和高度的比例预先被设置为固定值；

显示单元40，用于将缩放比例显示在浏览器页面中移动端内容区域的预设位置处。

该实施例采用获取单元10，用于浏览器获取页面的样式文件，其中，样式文件中存储有浏览器执行的媒体查询事件与当前浏览器页面的尺寸的对应关系；确定单元20，用于根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸信息；计算单元30，用于根据确定的当前浏览器页面的尺寸以及浏览器页面中的移动端内容区域的尺寸计算比值，得到缩放比例，其中，移动端内容区域的宽度和高度的比例预先被设置为固定值；显示单元40，用于将缩放比例显示在浏览器页面中移动端内容区域的预设位置处，解决了页面中移动端的内容区域缩放比例计算方案复杂的问题，进而达到了降低页面中移动端的内容区域缩放比例计算方案复杂度的效果。

可选地，确定单元包括：第一确定模块，用于根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸区间；第二确定模块，用于将尺寸区间的最小值确定为当前浏览器页面的尺寸。

可选地，第一确定模块包括：第一确定子模块，用于根据当前页面中所执行的媒体查询事件确定当前浏览器页面的高度像素值尺寸区间，和/或第二确定子模块，用于根据当前页面中所执行的媒体查询事件确定当前浏览器页面的宽度像素值尺寸区间。

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

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来降低页面中移动端的内容区域缩放比例计算方案复杂度。

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

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

浏览器获取页面的样式文件，其中，所述样式文件中存储有浏览器执行的媒体查询事件与当前浏览器页面的尺寸的对应关系；

根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸信息；

根据确定的当前浏览器页面的尺寸以及浏览器页面中的移动端内容区域的尺寸计算比值，得到缩放比例，其中，所述移动端内容区域的宽度和高度的比例预先被设置为固定值；

将所述缩放比例显示在浏览器页面中移动端内容区域的预设位置处。

2.根据权利要求1所述的方法，其特征在于，根据当前页面中所执行的事件确定当前浏览器页面的尺寸信息包括：

根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸区间；

将所述尺寸区间的最小值确定为当前浏览器页面的尺寸。

3.根据权利要求2所述的方法，其特征在于，根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸信息包括：

根据当前页面中所执行的媒体查询事件确定当前浏览器页面的高度像素值尺寸区间，和/或

根据当前页面中所执行的媒体查询事件确定当前浏览器页面的宽度像素值尺寸区间。

4.根据权利要求1所述的方法，其特征在于，将所述缩放比例显示在浏览器页面中移动端内容区域的预设位置处包括：

将所述缩放比例对应的伪元素显示在浏览器页面中移动端内容区域的预设位置处。

5.根据权利要求1所述的方法，其特征在于，将所述缩放比例显示在浏览器页面中移动端内容区域的预设位置处包括：

将所述缩放比例数值对应的伪元素显示在浏览器页面中移动端内容区域的左上角、右上角、左下角或右下角中的任意一个。

6.一种比例显示装置，其特征在于，包括：

获取单元，用于浏览器获取页面的样式文件，其中，所述样式文件中存储有浏览器执行的媒体查询事件与当前浏览器页面的尺寸的对应关系；

确定单元，用于根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸信息；

计算单元，用于根据确定的当前浏览器页面的尺寸以及浏览器页面中的移动端内容区域的尺寸计算比值，得到缩放比例，其中，所述移动端内容区域的宽度和高度的比例预先被设置为固定值；

显示单元，用于将所述缩放比例显示在浏览器页面中移动端内容区域的预设位置处。

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

第一确定模块，用于根据当前页面中所执行的媒体查询事件确定当前浏览器页面的尺寸区间；

第二确定模块，用于将所述尺寸区间的最小值确定为当前浏览器页面的尺寸。

8.根据权利要求7所述的装置，其特征在于，所述第一确定模块包括：

第一确定子模块，用于根据当前页面中所执行的媒体查询事件确定当前浏览器页面的高度像素值尺寸区间，和/或

第二确定子模块，用于根据当前页面中所执行的媒体查询事件确定当前浏览器页面的宽度像素值尺寸区间。

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

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

Images