屏幕多页自适应展示方法、存储介质及电子设备与流程

1.本发明属于网页设计的技术领域，涉及一种页面展示方法，特别是涉及一种屏幕多页自适应展示方法、存储介质及电子设备。


背景技术：

2.在网页浏览过程中，有时用户需要对照浏览两个网页的信息，用户可以拖动需对照浏览的网页标签，在新窗口中显示。这种方法是使用两个不同的窗口来对照，需要手动调整两个窗口的大小及相对位置。
3.现有的网站项目为了自适应不同分辨率的屏幕，在开发过程中，采用响应式媒体查询方式根据每一种分辨率来开发相应的适配代码。该方式存在以下两个问题：一是客户端机器的分辨率多种多样，开发中需要使用穷举法进行不同分辨率的适配，不仅增加了工作量，且无法做到全覆盖，势必会造成在部分客户端上展示效果失真。二是部分复杂页面即使使用响应式的方式开发，但由于页面内容太多，客户端分辨率太低已超过媒体查询极限，也会造成展示效果的差异。
4.因此，如何提供一种屏幕多页自适应展示方法、存储介质及电子设备，以解决现有技术无法在网页多页面显示时，对任意客户端的屏幕分辨率进行自适应等缺陷，成为本领域技术人员亟待解决的技术问题。


技术实现要素：

5.鉴于以上所述现有技术的缺点，本发明的目的在于提供一种屏幕多页自适应展示方法、存储介质及电子设备，用于解决现有技术无法在网页多页面显示时，对任意客户端的屏幕分辨率进行自适应的问题。
6.为实现上述目的及其他相关目的，本发明一方面提供一种屏幕多页自适应展示方法，所述屏幕多页自适应展示方法包括：获取划分的屏幕数量；根据设备显示面板尺寸和所述屏幕数量，确定网页浏览控件的缩放比例；按照所述缩放比例，加载与所述屏幕数量相同的网页浏览控件；利用所述网页浏览控件将待显示的网页进行定向跳转，以多页面方式呈现网页内容。
7.于本发明的一实施例中，所述获取划分的屏幕数量的步骤包括：根据用户的网页浏览需求确定所要划分的屏幕数量。
8.于本发明的一实施例中，所述根据设备显示面板尺寸和所述屏幕数量，确定网页浏览控件的缩放比例的步骤，包括：获取所述网页浏览控件的宽度；设置网页标准显示分辨率宽；获取所述网页浏览控件的内核缩放比例；根据所述网页浏览控件的宽度、所述网页标准显示分辨率宽和所述内核缩放比例确定所述缩放比例。
9.于本发明的一实施例中，所述根据所述网页浏览控件的宽度、所述网页标准显示分辨率宽和所述内核缩放比例确定所述缩放比例的步骤，包括：将所述网页浏览控件的宽度与所述网页标准显示分辨率宽的比值进行对数计算后所得的结果作为第一参数；将所述
内核缩放比例进行对数计算后所得的结果作为第二参数；令所述第一参数与所述第二参数的比值作为所述缩放比例。
10.于本发明的一实施例中，所述按照所述缩放比例，加载与所述屏幕数量相同的网页浏览控件的步骤，包括：获取与多页面展示对应的可执行文件的运行指令；根据所述运行指令，加载与所述屏幕数量相同的网页浏览控件。
11.于本发明的一实施例中，所述根据所述运行指令，加载与所述屏幕数量相同的网页浏览控件的步骤，包括：若所述屏幕数量为n，则确定网页多页面方式为n个页面；加载n个所述网页浏览控件。
12.于本发明的一实施例中，所述利用所述网页浏览控件将待显示的网页进行定向跳转，以多页面方式呈现网页内容的步骤，包括：以所述缩放比例为入参，调用缩放函数；运行所述缩放函数，利用加载的网页浏览控件将待显示的网页进行定向跳转，以多页面方式呈现网页内容。
13.于本发明的一实施例中，所述网页浏览控件为cef控件。
14.为实现上述目的及其他相关目的，本发明另一方面提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现所述的屏幕多页自适应展示方法。
15.为实现上述目的及其他相关目的，本发明最后一方面提供一种电子设备，包括：处理器及存储器；所述存储器用于存储计算机程序，所述处理器用于执行所述存储器存储的计算机程序，以使所述电子设备执行所述的屏幕多页自适应展示方法。
16.如上所述，本发明所述的屏幕多页自适应展示方法、存储介质及电子设备，具有以下有益效果：
17.本发明针对网页项目进行多页面显示时，无需编写响应式媒体查询代码即可实现客户端不同分辨率显示屏的自动适配，对分辨率高低没有限制。本发明的多页面展示是指软分屏，且多页面显示效果与设计之初一致，最大程度地保证各页面的画面不失真。另一方面，本发明还可以减少开发人员编写各种适配代码所需的时间。本发明以exe可执行文件为载体，在解决大屏同时多页展示需求的同时，能提供对硬件设备的扩展，解决网页无法调用系统硬件的问题。
附图说明
18.图1显示为本发明的屏幕多页自适应展示方法于一实施例中的原理流程图。
19.图2显示为本发明的屏幕多页自适应展示方法于一实施例中的缩放比例确定流程图。
20.图3显示为本发明的屏幕多页自适应展示方法于一实施例中的控件加载流程图。
21.图4显示为本发明的屏幕多页自适应展示方法于一实施例中的网页多页显示流程图。
22.图5a显示为本发明的屏幕多页自适应展示方法于一实施例中的多页显示示意图。
23.图5b显示为本发明的屏幕多页自适应展示方法于另一实施例中的多页显示示意图。
24.图6显示为本发明的屏幕多页自适应展示方法于一实施例中的多页展示应用场景
图。
25.图7显示为本发明的屏幕多页自适应展示方法于一实施例中的第一页面场景图。
26.图8显示为本发明的屏幕多页自适应展示方法于一实施例中的第二页面场景图。
27.图9显示为本发明的屏幕多页自适应展示方法于一实施例中的第三页面场景图。
28.图10显示为本发明的屏幕多页自适应展示方法于一实施例中的第四页面场景图。
29.图11显示为本发明的电子设备于一实施例中的结构连接示意图。
30.元件标号说明
[0031]5ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
电子设备
[0032]
51
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
处理器
[0033]
52
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
存储器
[0034]
521
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
随机存取存储器
[0035]
522
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
高速缓存存储器
[0036]
523
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
存储系统
[0037]
524
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
实用工具
[0038]
525
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
程序模块
[0039]
53
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
总线
[0040]
54
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
外部设备
[0041]
55
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
显示器
[0042]
56
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
i/o接口
[0043]
57
ꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀꢀ
网络适配器
[0044]
s11～s14
ꢀꢀꢀꢀꢀꢀꢀꢀ
步骤
[0045]
s121～s124
ꢀꢀꢀꢀꢀꢀ
步骤
[0046]
s131～s132
ꢀꢀꢀꢀꢀꢀ
步骤
[0047]
s141～s142
ꢀꢀꢀꢀꢀꢀ
步骤
具体实施方式
[0048]
以下通过特定的具体实例说明本发明的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本发明的其他优点与功效。本发明还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本发明的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。
[0049]
需要说明的是，以下实施例中所提供的图示仅以示意方式说明本发明的基本构想，遂图示中仅显示与本发明中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制，其实际实施时各组件的型态、数量及比例可为一种随意的改变，且其组件布局型态也可能更为复杂。
[0050]
本发明所述的屏幕多页自适应展示方法、存储介质及电子设备可以针对客户端显示器各种分辨率进行适配，在减少开发人员编写各种适配代码所需的时间的同时，还可以保证所有页面与设计展示效果的一致。
[0051]
以下将结合图1至图11详细阐述本实施例的一种屏幕多页自适应展示方法、存储
介质及电子设备的原理及实施方式，使本领域技术人员不需要创造性劳动即可理解本实施例的屏幕多页自适应展示方法、存储介质及电子设备。
[0052]
请参阅图1，显示为本发明的屏幕多页自适应展示方法于一实施例中的原理流程图。如图1所示，所述屏幕多页自适应展示方法具体包括以下几个步骤：
[0053]
s11，获取划分的屏幕数量。
[0054]
于一实施例中，根据用户的网页浏览需求确定所要划分的屏幕数量。由此，可以根据不同的网页浏览需求，为用户提供网页多页面展示的定制化设计。
[0055]
s12，根据设备显示面板尺寸和所述屏幕数量，确定网页浏览控件的缩放比例。
[0056]
具体地，若屏幕数量为4，则分页展示后4个网页显示区域可以是尺寸相同的，也可以是尺寸不同的，本发明不作限定。由此，与每个页面对应的网页浏览控件的缩放比例可以是相同的，也可以是不同的。
[0057]
请参阅图2，显示为本发明的屏幕多页自适应展示方法于一实施例中的缩放比例确定流程图。如图2所示，s12具体包括以下步骤：
[0058]
s121，获取所述网页浏览控件的宽度。
[0059]
具体地，将所述网页浏览控件的宽度所对应的参数定义为cefwidth。
[0060]
s122，设置网页标准显示分辨率宽。
[0061]
具体地，将网页标准显示分辨率宽所对应的参数定义为screenx。
[0062]
s123，获取所述网页浏览控件的内核缩放比例。
[0063]
具体地，将所述网页浏览控件的内核缩放比例所对应的参数定义为scale。
[0064]
于实际应用中，所述网页浏览控件为cef(chromium embedded framework，嵌入式chromium框架)控件，cef控件是个基于google chromium项目的开源web browser控件，支持windows，linux，mac平台。
[0065]
其中，chromium内核缩放级别的比例因子为1.2，比例因子通过幂运算确定所述内核缩放比例。具体内核缩放比例scale的计算过程举例如下：
[0066]
1.2^(-2.0)＝1.0/1.44＝69.4％；
[0067]
1.2^2.0＝1.44＝144％；
[0068]
1.2^1.0＝1.2＝120％；
[0069]
1.2^0＝1.0＝100％。
[0070]
s124，根据所述网页浏览控件的宽度、所述网页标准显示分辨率宽和所述内核缩放比例确定所述缩放比例。
[0071]
具体地，s124具体包括以下步骤：
[0072]
(1)将所述网页浏览控件的宽度与所述网页标准显示分辨率宽的比值进行对数计算后所得的结果作为第一参数。
[0073]
具体地，所述网页浏览控件的宽度为cefwidth，所述网页标准显示分辨率宽为screenx，则第一参数表示为math.log(cefwidth/screenx)。
[0074]
(2)将所述内核缩放比例进行对数计算后所得的结果作为第二参数。
[0075]
具体地，所述内核缩放比例为scale，则第二参数表示为math.log(scale)。
[0076]
(3)令所述第一参数与所述第二参数的比值作为所述缩放比例。
[0077]
具体地，将所述缩放比例定义为zoom，则所述缩放比例的计算如下：
[0078]
zoom＝math.log(cefwidth/screenx)/math.log(scale)
[0079]
s13，按照所述缩放比例，加载与所述屏幕数量相同的网页浏览控件。
[0080]
请参阅图3，显示为本发明的屏幕多页自适应展示方法于一实施例中的控件加载流程图。
[0081]
如图3所示，s13具体包括以下步骤：
[0082]
s131，获取与多页面展示对应的可执行文件的运行指令。
[0083]
具体地，可执行文件为exe文件或其他格式的可执行文件，响应于用户双击该exe文件，生成运行指令。
[0084]
s132，根据所述运行指令，加载与所述屏幕数量相同的网页浏览控件。
[0085]
具体地，根据所述运行指令，加载可执行的程序，由可执行的程序中确定屏幕数量，进而确定要加载的网页浏览控件的数量。
[0086]
具体地，s132具体包括以下步骤：
[0087]
(1)若所述屏幕数量为n，则确定网页多页面方式为n个页面。
[0088]
具体地，若n为4，则所述屏幕数量为4个，则确定网页多页面方式为4个页面展示。
[0089]
(2)加载n个所述网页浏览控件。
[0090]
具体地，加载4个所述网页浏览控件。
[0091]
s14，利用所述网页浏览控件将待显示的网页进行定向跳转，以多页面方式呈现网页内容。
[0092]
请参阅图4，显示为本发明的屏幕多页自适应展示方法于一实施例中的网页多页显示流程图。如图4所示，s14具体包括以下步骤：
[0093]
s141，以所述缩放比例为入参，调用缩放函数。
[0094]
具体地，所述缩放比例zoom为入参，则调用缩放函数browser.setzoomlevel(zoom)。由此，网站的网页各个页面可根据缩放比例进行自动缩放。
[0095]
s142，运行所述缩放函数，利用加载的网页浏览控件将待显示的网页进行定向跳转，以多页面方式呈现网页内容。
[0096]
具体地，利用加载的网页浏览控件，将待显示的网页通过路由进行定向跳转。
[0097]
进一步地，响应于用户双击该exe文件，呈现用户登录界面，验证用户输入的用户名、密码等登录信息，并在验证成功后加载与所述屏幕数量相同的网页浏览控件，利用所述网页浏览控件将待显示的网页进行定向跳转，以多页面方式呈现网页内容。
[0098]
于实际应用中，本发明所述的屏幕多页自适应展示方法的实现形式是以浏览器内核为基础形成的exe文件等可执行文件。例如，用户在不同的客户端运行exe文件时，自动去读取该客户端的显示面板尺寸和所述屏幕数量，以便确定网页浏览控件的缩放比例，由此可以灵活适配不同客户端显示器的尺寸，进一步在适配尺寸的同时保证高分辨率的显示。
[0099]
进一步地，本发明所述的屏幕多页自适应展示方法所呈现的分屏页面具有报警功能，例如某分屏所呈现的检测数据超出预设检测阈值后，报警信息通过可执行文件传送至客户端，调用客户端的扬声器等硬件，使客户端进行报警，例如声音报警、灯光报警等方式。由此，本发明以exe可执行文件为载体，在解决大屏同时多页展示需求的同时，能提供对硬件设备的扩展，解决网页无法调用系统硬件的问题。
[0100]
请参阅图5a，显示为本发明的屏幕多页自适应展示方法于一实施例中的多页显示
示意图。如图5a所示，在一显示屏中对网站所显示的网页进行四页面展示，其中，网页屏幕1在显示屏左上方，网页屏幕2在显示屏右上方，网页屏幕3在显示屏左下方，网页屏幕4在显示屏右下方，网页屏幕1、网页屏幕2、网页屏幕3和网页屏幕4均分显示屏的显示区域，实现尺寸相同，位置不同的四页面形式。
[0101]
请参阅图5b，显示为本发明的屏幕多页自适应展示方法于另一实施例中的多页显示示意图。如图5b所示，在一显示屏中对网站所显示的网页进行四分页，其中，网页屏幕1在显示屏左侧，网页屏幕2、网页屏幕3和网页屏幕4由上往下排列于显示屏的右侧，网页屏幕1与网页屏幕2、网页屏幕3、网页屏幕4所占的显示区域不同，实现尺寸不同，位置不同的四页面形式。
[0102]
请参阅图6，显示为本发明的屏幕多页自适应展示方法于一实施例中的多页展示应用场景图。如图6所示，呈现了一个网站的4个不同网页，其中，左上方的第一页面显示该网站公告模块的公告内容，右上方的第二页面显示该网站中监控模块的船舶总览，左下方的第三页面显示该网站中监控模块的码头总览，右下方的第四页面显示该网站中监控模块的人员监控。请参阅图7，显示为本发明的屏幕多页自适应展示方法于一实施例中的第一页面场景图。如图7所示，呈现了图6第一页面中公告模块的具体公告内容，该实施例中的网站为船舶运输的智能理货管控平台，具体包括公告模块、监控模块、数据模块、报警模块、人员模块和设备模块等信息模块。
[0103]
请参阅图8，显示为本发明的屏幕多页自适应展示方法于一实施例中的第二页面场景图。如图8所示，呈现了图6第二页面中监控模块的船舶总览内容，包括延迟开航预警、实时泊位图、计划泊位图、船舶类型及船时量等信息。
[0104]
请参阅图9，显示为本发明的屏幕多页自适应展示方法于一实施例中的第三页面场景图。如图9所示，呈现了图6第三页面中监控模块的码头总览内容，包括不同码头的计划靠泊数、计划离泊数以及实际作业路，还包括年度实时箱量、月度实时箱量、昼夜实时箱量、本工班出勤/派工明细，其中，各个码头的统计信息还可通过矢量地图的方式呈现。
[0105]
请参阅图10，显示为本发明的屏幕多页自适应展示方法于一实施例中的第四页面场景图。如图10所示，呈现了图6第四页面中监控模块的人员监控内容，包括不同职位的人员姓名、每个人员对应的人员编号及箱量、播放报警等设置信息。
[0106]
进一步地，第一页面、第二页面、第三页面和第四页面所显示的内容以及所涉及的操作是相互独立的，四个页面分别有自己的操作菜单，在其中一个页面中进行操作，例如图6中的第一页面，即图7中，点击页面上方的“报警”图标，则报警信息通过可执行文件传送至客户端，调用客户端的扬声器等硬件，使客户端进行报警。一个页面操作时及显示的内容与其他页面的操作及显示的内容互不影响，以此，在多页面展示时可以保证每个子页面的独立性。
[0107]
本发明所述的屏幕多页自适应展示方法的保护范围不限于本实施例列举的步骤执行顺序，凡是根据本发明的原理所做的现有技术的步骤增减、步骤替换所实现的方案都包括在本发明的保护范围内。
[0108]
本实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现所述屏幕多页自适应展示方法。
[0109]
本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通
过计算机程序相关的硬件来完成。前述的计算机程序可以存储于一计算机可读存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的计算机可读存储介质包括：rom、ram、磁碟或者光盘等各种可以存储程序代码的计算机存储介质。
[0110]
本发明提供一种电子设备，包括：处理器及存储器；所述存储器用于存储计算机程序，所述处理器用于执行所述存储器存储的计算机程序，以使所述电子设备执行所述的屏幕多页自适应展示方法。
[0111]
请参阅图11，显示为本发明的电子设备于一实施例中的结构连接示意图。如图11所示，电子设备5以通用计算设备的形式表现。电子设备5的组件可以包括但不限于：一个或者多个处理器51，存储器52，连接不同系统组件(包括处理器51和存储器52)的总线53。
[0112]
总线53表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器、外围总线、图形加速端口、处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于isa(industry standard architecture，工业标准体系结构)总线，mca(microchannel architecture，微通道体系结构)总线，增强型isa总线、vesa(video electronics standards association，视频电子标准协会)局域总线以及pci(peripheral component interconnect，外围组件互连)总线。
[0113]
电子设备5典型地包括多种计算机系统可读介质。这些介质可以是任何能够被电子设备5访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。
[0114]
存储器52可以包括易失性存储器形式的计算机系统可读介质，例如ram(random access memory，随机存取存储器)521和/或高速缓存存储器522。电子设备5可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统523可以用于读写不可移动的、非易失性磁介质，通常称为“硬盘驱动器”。可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘读写的光盘驱动器，可移动非易失性光盘例如是cd-rom(compact disc read-only memory，只读光盘)，dvd-rom(digital video disc，数字视频光盘)或者其它光介质。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线53相连。存储器52可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。
[0115]
具有一组(至少一个)程序模块525的程序/实用工具524，可以存储在例如存储器52中，这样的程序模块525包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块525通常执行本发明所描述的实施例中的功能和/或方法。
[0116]
计算机系统也可以与一个或多个外部设备54(例如键盘、指向设备、显示器55等)通信，还可与一个或者多个使得用户能与该计算机系统交互的设备通信，和/或与使得该计算机系统能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(i/o)接口56进行。并且，计算机系统还可以通过网络适配器57与一个或者多个网络通信，例如lan(local area network，局域网)，wan(wide area network，广域网)和/或公共网络，例如因特网。网络适配器57通过总线53与计算机系统的其它模块通信。应当明白，尽管图中未示出，可以结合计算机系统使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、raid
(redundant arrays of independent disks，磁盘阵列)系统、磁带驱动器以及数据备份存储系统等。
[0117]
于实际应用中，所述电子设备可以是包括存储器、存储控制器、一个或多个处理单元(cpu)、外设接口、rf电路、音频电路、扬声器、麦克风、输入/输出(i/o)子系统、显示屏、其他输出或控制设备，以及外部端口等组件的计算机；所述计算机包括但不限于如台式电脑、笔记本电脑、平板电脑、智能手机、智能电视、个人数字助理(personal digital assistant，简称pda)等个人电脑，所述电子设备还可以是智能眼镜、智能手表或其他可穿戴设备。在另一些实施方式中，所述电子设备还可以是服务器，所述服务器可以根据功能、负载等多种因素布置在一个或多个实体服务器上，也可以是由分布的或集中的服务器集群构成的云服务器，本实施例不作限定。
[0118]
综上所述，本发明所述屏幕多页自适应展示方法、存储介质及电子设备针对网页项目进行分屏显示时，无需编写响应式媒体查询代码即可实现客户端不同分辨率显示屏的自动适配，对分辨率高低没有限制。本发明支持软分屏，且分屏的显示效果与设计之初一致，最大程度地保证各分屏的画面不失真。另一方面，本发明还可以减少开发人员编写各种适配代码所需的时间。本发明以exe可执行文件为载体，在解决大屏同时多页展示需求的同时，能提供对硬件设备的扩展，解决网页无法调用系统硬件的问题。本发明有效克服了现有技术中的种种缺点而具有高度产业利用价值。
[0119]
上述实施例仅例示性说明本发明的原理及其功效，而非用于限制本发明。任何熟悉此技术的人士皆可在不违背本发明的精神及范畴下，对上述实施例进行修饰或改变。因此，举凡所属技术领域中具有通常知识者在未脱离本发明所揭示的精神与技术思想下所完成的一切等效修饰或改变，仍应由本发明的权利要求所涵盖。