CN110188299A - 响应式页面处理方法、装置及电子设备 - Google Patents
响应式页面处理方法、装置及电子设备 Download PDFInfo
- Publication number
- CN110188299A CN110188299A CN201910445372.8A CN201910445372A CN110188299A CN 110188299 A CN110188299 A CN 110188299A CN 201910445372 A CN201910445372 A CN 201910445372A CN 110188299 A CN110188299 A CN 110188299A
- Authority
- CN
- China
- Prior art keywords
- page
- size
- initial
- display
- new
- 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.)
- Granted
Links
- 238000003672 processing method Methods 0.000 title claims abstract description 17
- 230000004044 response Effects 0.000 title abstract description 4
- 230000002452 interceptive effect Effects 0.000 claims abstract description 75
- 230000003993 interaction Effects 0.000 claims abstract description 63
- 230000008859 change Effects 0.000 claims abstract description 54
- 238000000034 method Methods 0.000 claims abstract description 31
- 238000012545 processing Methods 0.000 claims abstract description 15
- 238000004590 computer program Methods 0.000 description 13
- 238000010586 diagram Methods 0.000 description 11
- 230000006870 function Effects 0.000 description 10
- 230000008569 process Effects 0.000 description 9
- 239000000047 product Substances 0.000 description 7
- 239000007795 chemical reaction product Substances 0.000 description 5
- 238000011156 evaluation Methods 0.000 description 5
- 230000003287 optical effect Effects 0.000 description 4
- 230000000007 visual effect Effects 0.000 description 4
- 238000004891 communication Methods 0.000 description 3
- 238000010428 oil painting Methods 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 230000009466 transformation Effects 0.000 description 2
- 238000012800 visualization Methods 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 230000006978 adaptation Effects 0.000 description 1
- 230000008901 benefit Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising 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)
Abstract
本公开实施例中提供了一种响应式页面处理方法、装置及电子设备，属于数据处理技术领域，该方法包括：获取交互界面在初始页面中的初始显示尺寸以及即将显示的新页面中的动态变化尺寸；基于所述动态变化尺寸，在新页面中设置顶部栏和工具栏，使得所述顶部栏和所述工具栏在所述新页面和初始页面中的尺寸相同；按照与初始页面相同的尺寸设置初始页面中存在的文字按钮，并基于所述动态变化尺寸调整所述文字按钮的宽度；基于所述动态变化尺寸，按照预设显示比例确定视频交互区域和课件交互区域在所述新页面中的布局。通过本公开的方案，能够基于显示界面的尺寸对显示页面中的不同内容进行区分式处理，提高了页面交互的便利性。
Description
技术领域
本公开涉及响应式页面处理技术领域，尤其涉及一种响应式页面处理方法、装置及电子设备。
背景技术
随着计算机科学的快速发展，越来越多的计算机产品得到了应用，Web端产品便是其中的一种典型代表，Web端产品非常灵活，其显示页面可以根据实际的需要在不同的显示屏幕上进行可以放大缩小，从而满足不同设备的显示需要。例如，同一个Web端产品可以在PC机、手机、PAD等不同的设备上进行展示，基于同一个Web端登录账号，用户可以在不同的设备上查看同样的内容或更新同样的使用记录。
由于不同的Web端产品具有不同的显示尺寸，因此，Web端产品在进行展示的过程中，需要对显示的屏幕进行适配，常见的适配方法包括将产品界面根据Web页面尺寸同等比例放大缩小，这样会导致缩小后的产品界面产生相互遮挡的问题，同时产品界面也因为跟着同比例缩小导致产品中的按钮太小而不好点击，或者产品中的文案等内容太小而无法识别。
发明内容
有鉴于此，本公开实施例提供一种响应式页面处理方法、装置及电子设备，至少部分解决现有技术中存在的问题。
第一方面，本公开实施例提供了一种响应式页面处理方法，包括：
获取交互界面在初始页面中的初始显示尺寸以及即将显示的新页面中的动态变化尺寸；
基于所述动态变化尺寸，在新页面中设置顶部栏和工具栏，使得所述顶部栏和所述工具栏在所述新页面和初始页面中的尺寸相同；
按照与初始页面相同的尺寸设置初始页面中存在的文字按钮，并基于所述动态变化尺寸调整所述文字按钮的宽度；
基于所述动态变化尺寸，按照预设显示比例确定视频交互区域和课件交互区域在所述新页面中的布局。
根据本公开实施例的一种具体实现方式，所述方法还包括：
根据所述动态变化尺寸，计算新页面与初始页面的变化比例；
基于所述变化比例，设置交互界面中讨论区和课件提示区的显示尺寸。
根据本公开实施例的一种具体实现方式，所述基于所述动态变化尺寸，按照预设显示比例确定视频交互区域和课件交互区域在所述新页面中的布局，包括：
获取屏幕宽W1和屏幕高H1；
将所述屏幕高H1减去顶部栏的固定高度H2，得到核心区域的高度H3；
在所述核心区域中取出中间最大的预设比例区域放置所述视频交互区域和课件交互区域。
根据本公开实施例的一种具体实现方式，所述交互区域中还包括聊天区域，所述聊天区域的宽度与所述视频交互区域的宽度相同。
根据本公开实施例的一种具体实现方式，所述获取交互界面在初始页面中的初始显示尺寸以及即将显示的新页面中的动态变化尺寸，包括：
获取当前显示屏幕的显示尺寸，将当前显示屏幕的显示尺寸设置为所述初始页面的初始尺寸。
根据本公开实施例的一种具体实现方式，所述获取交互界面在初始页面中的初始显示尺寸以及即将显示的新页面中的动态变化尺寸，还包括：
获取所述交互界面所要切换的新屏幕的显示尺寸，将新屏幕的显示尺寸设置为所述新页面中的动态变化尺寸。
根据本公开实施例的一种具体实现方式，所述基于所述动态变化尺寸，在新页面中设置顶部栏和工具栏，包括：
获取新页面中交互界面的左顶点坐标和右顶点坐标；
基于所述左顶点坐标和所述右顶点坐标，对所述顶部栏和所述工具栏进行中心定位；
基于所述中心定位的结果，按照与初始页面中相同的尺寸来设置所述顶部栏和所述工具栏。
根据本公开实施例的一种具体实现方式，所述按照与初始页面相同的尺寸设置初始页面中存在的文字按钮，并基于所述动态变化尺寸调整所述文字按钮的宽度，包括：
获取所述文字按钮在初始页面中的子交互区域；
获取所述子交互区域在新页面中的新布局位置；
基于所述新布局位置，在所述子交互区域内设置所述文字按钮。
第二方面，本公开实施例提供了一种响应式页面处理装置，包括：
获取模块，用于获取交互界面在初始页面中的初始显示尺寸以及即将显示的新页面中的动态变化尺寸；
第一设置模块，用于基于所述动态变化尺寸，在新页面中设置顶部栏和工具栏，使得所述顶部栏和所述工具栏在所述新页面和初始页面中的尺寸相同；
第二设置模块，用于按照与初始页面相同的尺寸设置初始页面中存在的文字按钮，并基于所述动态变化尺寸调整所述文字按钮的宽度；
确定模块，用于基于所述动态变化尺寸，按照预设显示比例确定视频交互区域和课件交互区域在所述新页面中的布局。
第三方面，本公开实施例还提供了一种电子设备，该电子设备包括：
至少一个处理器；以及，
与该至少一个处理器通信连接的存储器；其中，
该存储器存储有可被该至少一个处理器执行的指令，该指令被该至少一个处理器执行，以使该至少一个处理器能够执行前述任第一方面或第一方面的任一实现方式中的响应式页面处理方法。
第四方面，本公开实施例还提供了一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质存储计算机指令，该计算机指令用于使该计算机执行前述第一方面或第一方面的任一实现方式中的响应式页面处理方法。
第五方面，本公开实施例还提供了一种计算机程序产品，该计算机程序产品包括存储在非暂态计算机可读存储介质上的计算程序，该计算机程序包括程序指令，当该程序指令被计算机执行时，使该计算机执行前述第一方面或第一方面的任一实现方式中的响应式页面处理方法。
本公开实施例中的响应式页面处理方案，包括获取交互界面在初始页面中的初始显示尺寸以及即将显示的新页面中的动态变化尺寸；基于所述动态变化尺寸，在新页面中设置顶部栏和工具栏，使得所述顶部栏和所述工具栏在所述新页面和初始页面中的尺寸相同；按照与初始页面相同的尺寸设置初始页面中存在的文字按钮，并基于所述动态变化尺寸调整所述文字按钮的宽度；基于所述动态变化尺寸，按照预设显示比例确定视频交互区域和课件交互区域在所述新页面中的布局。通过本公开的方案，能够基于显示界面的尺寸对显示页面中的不同内容进行区分式处理，提高了页面交互的便利性。
附图说明
为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。
图1为本公开实施例提供的一种响应式页面处理流程示意图；
图2为本公开实施例提供的一种响应式页面布局示意图；
图3为本公开实施例提供的另一种响应式页面处理流程示意图；
图4为本公开实施例提供的另一种响应式页面处理流程示意图；
图5为本公开实施例提供的响应式页面处理装置结构示意图；
图6为本公开实施例提供的电子设备示意图。
具体实施方式
下面结合附图对本公开实施例进行详细描述。
以下通过特定的具体实例说明本公开的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本公开的其他优点与功效。显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。本公开还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本公开的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。基于本公开中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。
需要说明的是，下文描述在所附权利要求书的范围内的实施例的各种方面。应显而易见，本文中所描述的方面可体现于广泛多种形式中，且本文中所描述的任何特定结构及/或功能仅为说明性的。基于本公开，所属领域的技术人员应了解，本文中所描述的一个方面可与任何其它方面独立地实施，且可以各种方式组合这些方面中的两者或两者以上。举例来说，可使用本文中所阐述的任何数目个方面来实施设备及/或实践方法。另外，可使用除了本文中所阐述的方面中的一或多者之外的其它结构及/或功能性实施此设备及/或实践此方法。
还需要说明的是，以下实施例中所提供的图示仅以示意方式说明本公开的基本构想，图式中仅显示与本公开中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制，其实际实施时各组件的型态、数量及比例可为一种随意的改变，且其组件布局型态也可能更为复杂。
另外，在以下描述中，提供具体细节是为了便于透彻理解实例。然而，所属领域的技术人员将理解，可在没有这些特定细节的情况下实践所述方面。
本公开实施例提供一种响应式页面处理方法。本实施例提供的响应式页面处理方法可以由一计算装置来执行，该计算装置可以实现为软件，或者实现为软件和硬件的组合，该计算装置可以集成设置在服务器、终端设备等中。
参见图1，本公开实施例提供的一种响应式页面处理方法，包括如下步骤：
S101，获取交互界面在初始页面中的初始显示尺寸以及即将显示的新页面中的动态变化尺寸。
交互界面是Web端程序在电子设备上运行时所呈现的界面，基于不同的电子设备(例如，手机、PAD、PC等)显示屏幕的不同，交互界面展示的尺寸也会有所不同。交互界面可以按照显示屏幕的尺寸(例如1024×768像素)来进行展示，同一个Web端程序的交互界面在不同设备上展示时，可以具有不同的长宽比及不同的尺寸。
Web端程序在运行的时候，会出现在不同显示尺寸之间进行切换的情况，此时需要基于不同的显示大小来对交互界面的尺寸进行适配。此时，需要获取交互界面在初始页面上的尺寸以及即将显示的新页面上的动态变化尺寸。
初始页面可以是Web端程序在运行之前默认分配的显示尺寸，当用户点击该Web端程序是，Web端程序自动获取当前电子设备显示环境的显示尺寸，并将该显示尺寸设定为动态变化尺寸，Web端程序在当前电子设备中显示的页面为新页面。
初始页面还可以是Web端程序运行过程中显示的页面，此时当前显示屏幕的显示尺寸便是初始尺寸，由于Web端程序在不同的显示屏幕之间进行切换、或用户切换了分辨率等原因，导致Web端程序的显示环境发生了变化。此时，可以将变化之后的显示环境的尺寸定义为动态变化尺寸，变化之后的显示环境中显示的页面为新页面。
S102，基于所述动态变化尺寸，在新页面中设置顶部栏和工具栏，使得所述顶部栏和所述工具栏在所述新页面和初始页面中的尺寸相同。
动态变化尺寸为新显示环境中交互界面的展示尺寸，当动态变化尺寸与初始显示尺寸不同时，便可以根据实际的需要来调整和设置交互界面上不同的交互区域或交互按钮的显示设置。
参见图2，图2展示了Web端程序交互界面的一个示例性样式。交互界面的顶端设置有顶部栏和工具栏，顶部栏用于展示当前交互界面的摘要信息，例如，顶部栏可以展示“lesson 1Nice to meet you”这样的课程标题信息，也可以展示其他类型的信息。工具栏位于顶部栏的下方，与顶部栏相连接，工具栏中包含有各种交互用的工具，例如橡皮擦、油画棒之类的。
顶部栏和工具栏具有预设的尺寸大小，顶部栏、工具栏过大或过小会影响到用户的视觉体验或交互体验，为此当动态变化尺寸确定完之后，可以获取交互界面的长、宽等像素信息，由此便可以进一步的确定顶部栏和工具栏的位置。作为一个例子，动态变化尺寸的长、宽大小为a×b像素，此时可以在(0.5a，0.95b)的坐标位置作为顶部栏的中心点来放置顶部栏，可以在(0.6a，0.9b)的坐标位置作为工具栏的中心点来放置工具栏。在方式顶部栏和工具栏的过程中，顶部栏和工具栏的大小保持不变。
S103，按照与初始页面相同的尺寸设置初始页面中存在的文字按钮，并基于所述动态变化尺寸调整所述文字按钮的宽度。
除了顶部栏和工具栏之外，交互界面中还存在文字按钮。参见图2，文字按钮可以例如“Finish”之类的完成按钮，用户点击文字按钮，能够基于实际的功能设置来完成相应的功能。
文字按钮由于含有文字内容而需要特定的显示高度，便于用户进行查看和点击操作，当文字按钮中的文字过大或过小时，都会导致用户的视觉和交互体验变差，为此，在获取到动态变化尺寸中的宽度值之后，可以计算宽度比例r如下：
宽度比例r＝动态变化尺寸宽度/初始变化尺寸宽度
此时，文字按钮中文字的宽度值＝初始宽度值*宽度比例，其中初始宽度值为文字在初始页面中的宽度值。同时保持文字的字号大小不变。
通过对文字按钮进行此类变换，保证了文字按钮的可视化。
S104，基于所述动态变化尺寸，按照预设显示比例确定视频交互区域和课件交互区域在所述新页面中的布局。
视频交互区域和课件交互区域是交互界面中的主要显示内容，参见图2，视频交互区域用于通过视频的方式来对参与交互界面的人进行视觉交互，而课件交互区域则是通过图片的方式来显示交互的内容(例如，上课的内容)。为了保证视频和课件在显示的过程中不会出现拉伸等扭曲现象，在交互界面中显示视频交互区域和课件交互区域的过程中，需要保证视频交互区域和课件交互区域按照预设的比例(例如，4:3)进行显示。
假设初始显示尺寸是a1×b1，动态变化尺寸是a2×b2，此时可以计算最小缩放比例c＝min{a2/a1，b2/b1}，即c为a2/a1和b2/b1中值最小的一个。这样一来，除了保证视频交互区域和课件交互区域按照预设的比例进行显示之外，还对视频交互区域和课件交互区域进行c倍的缩放处理，从而保证视频交互区域和课件交互区域随时动态变化尺寸进行相应的调整。
通过上述实施例中的方案，能够根据交互界面上不同交互区域或交互按钮的特点，灵活的对交互界面进行个性化处理，提高了用户体验。
参见图3，根据本公开实施例的一种具体实现方式，所述方法还可以包括：
S301，根据所述动态变化尺寸，计算新页面与初始页面的变化比例。
假设初始显示尺寸是a1×b1，动态变化尺寸是a2×b2，此时可以计算最小缩放比例c＝min{a2/a1，b2/b1}，即c为a2/a1和b2/b1中值最小的一个。通过c便可以计算新页面与初始页面的变化比例。
S302，基于所述变化比例，设置交互界面中讨论区和课件提示区的显示尺寸。
参见图2，交互界面中还包括讨论区和课件提示区，讨论区用于授课老师和学生之间进行讨论，课件提示区则对课件中存在的重点进行提示。基于最小缩放比例c，可以对讨论区和课件提示区进行缩放操作。
参见图4，根据本公开实施例的一种具体实现方式，所述基于所述动态变化尺寸，按照预设显示比例确定视频交互区域和课件交互区域在所述新页面中的布局，包括：
S401，获取屏幕宽W1和屏幕高H1；
S402，将所述屏幕高H1减去顶部栏的固定高度H2，得到核心区域的高度H3；
S403，在所述核心区域中取出中间最大的预设比例区域放置所述视频交互区域和课件交互区域。
根据本公开实施例的一种具体实现方式，所述交互区域中还包括聊天区域，所述聊天区域的宽度与所述视频交互区域的宽度相同。
根据本公开实施例的一种具体实现方式，所述获取交互界面在初始页面中的初始显示尺寸以及即将显示的新页面中的动态变化尺寸，包括：获取当前显示屏幕的显示尺寸，将当前显示屏幕的显示尺寸设置为所述初始页面的初始尺寸。
根据本公开实施例的一种具体实现方式，所述获取交互界面在初始页面中的初始显示尺寸以及即将显示的新页面中的动态变化尺寸，还包括：获取所述交互界面所要切换的新屏幕的显示尺寸，将新屏幕的显示尺寸设置为所述新页面中的动态变化尺寸。
根据本公开实施例的一种具体实现方式，所述基于所述动态变化尺寸，在新页面中设置顶部栏和工具栏，包括：获取新页面中交互界面的左顶点坐标和右顶点坐标；基于所述左顶点坐标和所述右顶点坐标，对所述顶部栏和所述工具栏进行中心定位；基于所述中心定位的结果，按照与初始页面中相同的尺寸来设置所述顶部栏和所述工具栏。
根据本公开实施例的一种具体实现方式，所述按照与初始页面相同的尺寸设置初始页面中存在的文字按钮，并基于所述动态变化尺寸调整所述文字按钮的宽度，包括：获取所述文字按钮在初始页面中的子交互区域；获取所述子交互区域在新页面中的新布局位置；基于所述新布局位置，在所述子交互区域内设置所述文字按钮。
与上面的方法实施例相对应，参见图5，本公开还提供了一种响应式页面处理装置50，包括：
获取模块501，用于获取交互界面在初始页面中的初始显示尺寸以及即将显示的新页面中的动态变化尺寸。
交互界面是Web端程序在电子设备上运行时所呈现的界面，基于不同的电子设备(例如，手机、PAD、PC等)显示屏幕的不同，交互界面展示的尺寸也会有所不同。交互界面可以按照显示屏幕的尺寸(例如1024×768像素)来进行展示，同一个Web端程序的交互界面在不同设备上展示时，可以具有不同的长宽比及不同的尺寸。
Web端程序在运行的时候，会出现在不同显示尺寸之间进行切换的情况，此时需要基于不同的显示大小来对交互界面的尺寸进行适配。此时，需要获取交互界面在初始页面上的尺寸以及即将显示的新页面上的动态变化尺寸。
初始页面可以是Web端程序在运行之前默认分配的显示尺寸，当用户点击该Web端程序是，Web端程序自动获取当前电子设备显示环境的显示尺寸，并将该显示尺寸设定为动态变化尺寸，Web端程序在当前电子设备中显示的页面为新页面。
初始页面还可以是Web端程序运行过程中显示的页面，此时当前显示屏幕的显示尺寸便是初始尺寸，由于Web端程序在不同的显示屏幕之间进行切换、或用户切换了分辨率等原因，导致Web端程序的显示环境发生了变化。此时，可以将变化之后的显示环境的尺寸定义为动态变化尺寸，变化之后的显示环境中显示的页面为新页面。
第一设置模块502，用于基于所述动态变化尺寸，在新页面中设置顶部栏和工具栏，使得所述顶部栏和所述工具栏在所述新页面和初始页面中的尺寸相同。
动态变化尺寸为新显示环境中交互界面的展示尺寸，当动态变化尺寸与初始显示尺寸不同时，便可以根据实际的需要来调整和设置交互界面上不同的交互区域或交互按钮的显示设置。
参见图2，图2展示了Web端程序交互界面的一个示例性样式。交互界面的顶端设置有顶部栏和工具栏，顶部栏用于展示当前交互界面的摘要信息，例如，顶部栏可以展示“lesson 1 Nice to meet you”这样的课程标题信息，也可以展示其他类型的信息。工具栏位于顶部栏的下方，与顶部栏相连接，工具栏中包含有各种交互用的工具，例如橡皮擦、油画棒之类的。
顶部栏和工具栏具有预设的尺寸大小，顶部栏、工具栏过大或过小会影响到用户的视觉体验或交互体验，为此当动态变化尺寸确定完之后，可以获取交互界面的长、宽等像素信息，由此便可以进一步的确定顶部栏和工具栏的位置。作为一个例子，动态变化尺寸的长、宽大小为a×b像素，此时可以在(0.5a，0.95b)的坐标位置作为顶部栏的中心点来放置顶部栏，可以在(0.6a，0.9b)的坐标位置作为工具栏的中心点来放置工具栏。在方式顶部栏和工具栏的过程中，顶部栏和工具栏的大小保持不变。
第二设置模块503，用于按照与初始页面相同的尺寸设置初始页面中存在的文字按钮，并基于所述动态变化尺寸调整所述文字按钮的宽度。
除了顶部栏和工具栏之外，交互界面中还存在文字按钮。参见图2，文字按钮可以例如“Finish”之类的完成按钮，用户点击文字按钮，能够基于实际的功能设置来完成相应的功能。
文字按钮由于含有文字内容而需要特定的显示高度，便于用户进行查看和点击操作，当文字按钮中的文字过大或过小时，都会导致用户的视觉和交互体验变差，为此，在获取到动态变化尺寸中的宽度值之后，可以计算宽度比例r如下：
宽度比例r＝动态变化尺寸宽度/初始变化尺寸宽度
此时，文字按钮中文字的宽度值＝初始宽度值*宽度比例，其中初始宽度值为文字在初始页面中的宽度值。同时保持文字的字号大小不变。
通过对文字按钮进行此类变换，保证了文字按钮的可视化。
确定模块504，用于基于所述动态变化尺寸，按照预设显示比例确定视频交互区域和课件交互区域在所述新页面中的布局。
视频交互区域和课件交互区域是交互界面中的主要显示内容，参见图2，视频交互区域用于通过视频的方式来对参与交互界面的人进行视觉交互，而课件交互区域则是通过图片的方式来显示交互的内容(例如，上课的内容)。为了保证视频和课件在显示的过程中不会出现拉伸等扭曲现象，在交互界面中显示视频交互区域和课件交互区域的过程中，需要保证视频交互区域和课件交互区域按照预设的比例(例如，4:3)进行显示。
假设初始显示尺寸是a1×b1，动态变化尺寸是a2×b2，此时可以计算最小缩放比例c＝min{a2/a1，b2/b1}，即c为a2/a1和b2/b1中值最小的一个。这样一来，除了保证视频交互区域和课件交互区域按照预设的比例进行显示之外，还对视频交互区域和课件交互区域进行c倍的缩放处理，从而保证视频交互区域和课件交互区域随时动态变化尺寸进行相应的调整。
图5所示装置可以对应的执行上述方法实施例中的内容，本实施例未详细描述的部分，参照上述方法实施例中记载的内容，在此不再赘述。
参见图6，本公开实施例还提供了一种电子设备60，该电子设备包括：
至少一个处理器；以及，
与该至少一个处理器通信连接的存储器；其中，
该存储器存储有可被该至少一个处理器执行的指令，该指令被该至少一个处理器执行，以使该至少一个处理器能够执行前述方法实施例中响应式页面处理方法。
本公开实施例还提供了一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质存储计算机指令，该计算机指令用于使该计算机执行前述方法实施例中。
本公开实施例还提供了一种计算机程序产品，该计算机程序产品包括存储在非暂态计算机可读存储介质上的计算程序，该计算机程序包括程序指令，当该程序指令被计算机执行时，使该计算机执行前述方法实施例中的响应式页面处理方法。
下面参考图6，其示出了适于用来实现本公开实施例的电子设备60的结构示意图。本公开实施例中的电子设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图6示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。
如图6所示，电子设备60可以包括处理装置(例如中央处理器、图形处理器等)601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储装置608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM 603中，还存储有电子设备60操作所需的各种程序和数据。处理装置601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。
通常，以下装置可以连接至I/O接口605：包括例如触摸屏、触摸板、键盘、鼠标、图像传感器、麦克风、加速度计、陀螺仪等的输入装置606；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置607；包括例如磁带、硬盘等的存储装置608；以及通信装置609。通信装置609可以允许电子设备60与其他设备进行无线或有线通信以交换数据。虽然图中示出了具有各种装置的电子设备60，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置609从网络上被下载和安装，或者从存储装置608被安装，或者从ROM 602被安装。在该计算机程序被处理装置601执行时，执行本公开实施例的方法中限定的上述功能。
需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。
上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。
上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：获取至少两个网际协议地址；向节点评价设备发送包括所述至少两个网际协议地址的节点评价请求，其中，所述节点评价设备从所述至少两个网际协议地址中，选取网际协议地址并返回；接收所述节点评价设备返回的网际协议地址；其中，所获取的网际协议地址指示内容分发网络中的边缘节点。
或者，上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：接收包括至少两个网际协议地址的节点评价请求；从所述至少两个网际协议地址中，选取网际协议地址；返回选取出的网际协议地址；其中，接收到的网际协议地址指示内容分发网络中的边缘节点。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定，例如，第一获取单元还可以被描述为“获取至少两个网际协议地址的单元”。
应当理解，本公开的各部分可以用硬件、软件、固件或它们的组合来实现。
以上所述，仅为本公开的具体实施方式，但本公开的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应以权利要求的保护范围为准。
Claims (11)
1.一种响应式页面处理方法，其特征在于，包括：
获取交互界面在初始页面中的初始显示尺寸以及即将显示的新页面中的动态变化尺寸；
基于所述动态变化尺寸，在新页面中设置顶部栏和工具栏，使得所述顶部栏和所述工具栏在所述新页面和初始页面中的尺寸相同；
按照与初始页面相同的尺寸设置初始页面中存在的文字按钮，并基于所述动态变化尺寸调整所述文字按钮的宽度；
基于所述动态变化尺寸，按照预设显示比例确定视频交互区域和课件交互区域在所述新页面中的布局。
2.根据权利要求1所述的方法，其特征在于，所述方法还包括：
根据所述动态变化尺寸，计算新页面与初始页面的变化比例；
基于所述变化比例，设置交互界面中讨论区和课件提示区的显示尺寸。
3.根据权利要求1所述的方法，其特征在于，所述基于所述动态变化尺寸，按照预设显示比例确定视频交互区域和课件交互区域在所述新页面中的布局，包括：
获取屏幕宽W1和屏幕高H1；
将所述屏幕高H1减去顶部栏的固定高度H2，得到核心区域的高度H3；
在所述核心区域中取出中间最大的预设比例区域放置所述视频交互区域和课件交互区域。
4.根据权利要求1所述的方法，其特征在于：
所述交互区域中还包括聊天区域，所述聊天区域的宽度与所述视频交互区域的宽度相同。
5.根据权利要求1所述的方法，其特征在于，所述获取交互界面在初始页面中的初始显示尺寸以及即将显示的新页面中的动态变化尺寸，包括：
获取当前显示屏幕的显示尺寸，将当前显示屏幕的显示尺寸设置为所述初始页面的初始尺寸。
6.根据权利要求5所述的方法，其特征在于，所述获取交互界面在初始页面中的初始显示尺寸以及即将显示的新页面中的动态变化尺寸，还包括：
获取所述交互界面所要切换的新屏幕的显示尺寸，将新屏幕的显示尺寸设置为所述新页面中的动态变化尺寸。
7.根据权利要求1所述的方法，其特征在于，所述基于所述动态变化尺寸，在新页面中设置顶部栏和工具栏，包括：
获取新页面中交互界面的左顶点坐标和右顶点坐标；
基于所述左顶点坐标和所述右顶点坐标，对所述顶部栏和所述工具栏进行中心定位；
基于所述中心定位的结果，按照与初始页面中相同的尺寸来设置所述顶部栏和所述工具栏。
8.根据权利要求1所述的方法，其特征在于，所述按照与初始页面相同的尺寸设置初始页面中存在的文字按钮，并基于所述动态变化尺寸调整所述文字按钮的宽度，包括：
获取所述文字按钮在初始页面中的子交互区域；
获取所述子交互区域在新页面中的新布局位置；
基于所述新布局位置，在所述子交互区域内设置所述文字按钮。
9.一种响应式页面处理装置，其特征在于，包括：
获取模块，用于获取交互界面在初始页面中的初始显示尺寸以及即将显示的新页面中的动态变化尺寸；
第一设置模块，用于基于所述动态变化尺寸，在新页面中设置顶部栏和工具栏，使得所述顶部栏和所述工具栏在所述新页面和初始页面中的尺寸相同；
第二设置模块，用于按照与初始页面相同的尺寸设置初始页面中存在的文字按钮，并基于所述动态变化尺寸调整所述文字按钮的宽度；
确定模块，用于基于所述动态变化尺寸，按照预设显示比例确定视频交互区域和课件交互区域在所述新页面中的布局。
10.一种电子设备，其特征在于，所述电子设备包括：
至少一个处理器；以及，
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行前述任一权利要求1-8所述的响应式页面处理方法。
11.一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质存储计算机指令，该计算机指令用于使该计算机执行前述任一权利要求1-8所述的响应式页面处理方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910445372.8A CN110188299B (zh) | 2019-05-27 | 2019-05-27 | 响应式页面处理方法、装置及电子设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910445372.8A CN110188299B (zh) | 2019-05-27 | 2019-05-27 | 响应式页面处理方法、装置及电子设备 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110188299A true CN110188299A (zh) | 2019-08-30 |
| CN110188299B CN110188299B (zh) | 2021-06-22 |
Family
ID=67717946
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910445372.8A Active CN110188299B (zh) | 2019-05-27 | 2019-05-27 | 响应式页面处理方法、装置及电子设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110188299B (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110992447A (zh) * | 2019-12-05 | 2020-04-10 | 北京中网易企秀科技有限公司 | 一种图文适配方法、装置、存储介质及设备 |
| CN112380821A (zh) * | 2020-11-17 | 2021-02-19 | 北京字跳网络技术有限公司 | 图形显示方法、装置和电子设备 |
| CN112711457A (zh) * | 2021-01-05 | 2021-04-27 | 北京字跳网络技术有限公司 | 栏位绘制方法、装置和电子设备 |
| CN114564263A (zh) * | 2022-02-18 | 2022-05-31 | 维沃移动通信有限公司 | 页面布局调整方法、装置 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110119586A1 (en) * | 2007-08-16 | 2011-05-19 | Blinnikka Tomi J | Persistent visual media player |
| CN105373593A (zh) * | 2015-10-14 | 2016-03-02 | 北京锤子数码科技有限公司 | 一种展示网页中目标元素的方法及装置 |
| CN105740315A (zh) * | 2015-12-31 | 2016-07-06 | 焦点科技股份有限公司 | 一种多种屏幕响应式网页布局调整的方法 |
| CN108205398A (zh) * | 2016-12-16 | 2018-06-26 | 腾讯科技（深圳）有限公司 | 网页动画适配屏幕的方法和装置 |
-
2019
- 2019-05-27 CN CN201910445372.8A patent/CN110188299B/zh active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110119586A1 (en) * | 2007-08-16 | 2011-05-19 | Blinnikka Tomi J | Persistent visual media player |
| CN105373593A (zh) * | 2015-10-14 | 2016-03-02 | 北京锤子数码科技有限公司 | 一种展示网页中目标元素的方法及装置 |
| CN105740315A (zh) * | 2015-12-31 | 2016-07-06 | 焦点科技股份有限公司 | 一种多种屏幕响应式网页布局调整的方法 |
| CN108205398A (zh) * | 2016-12-16 | 2018-06-26 | 腾讯科技（深圳）有限公司 | 网页动画适配屏幕的方法和装置 |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110992447A (zh) * | 2019-12-05 | 2020-04-10 | 北京中网易企秀科技有限公司 | 一种图文适配方法、装置、存储介质及设备 |
| CN112380821A (zh) * | 2020-11-17 | 2021-02-19 | 北京字跳网络技术有限公司 | 图形显示方法、装置和电子设备 |
| CN112380821B (zh) * | 2020-11-17 | 2024-05-28 | 北京字跳网络技术有限公司 | 图形显示方法、装置和电子设备 |
| CN112711457A (zh) * | 2021-01-05 | 2021-04-27 | 北京字跳网络技术有限公司 | 栏位绘制方法、装置和电子设备 |
| CN114564263A (zh) * | 2022-02-18 | 2022-05-31 | 维沃移动通信有限公司 | 页面布局调整方法、装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110188299B (zh) | 2021-06-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110188299B (zh) | 响应式页面处理方法、装置及电子设备 | |
| CN109460233B (zh) | 页面的原生界面显示更新方法、装置、终端设备及介质 | |
| CN111291244B (zh) | 房源信息展示方法、装置、终端及存储介质 | |
| CN109389365B (zh) | 多人协作式文档的处理方法、装置和电子设备 | |
| CN110647369B (zh) | 页面动态显示的方法、装置、移动终端及存储介质 | |
| CN110728129B (zh) | 对图片中的文本内容进行排版的方法、装置、介质和设备 | |
| CN110022493B (zh) | 播放进度显示方法、装置、电子设备和存储介质 | |
| CN109635263B (zh) | 基于web超宽表格的列宽固定展示方法、装置及电子设备 | |
| CN110069547B (zh) | 在线数据库表格数据统计方法、装置、介质和电子设备 | |
| CN113238688B (zh) | 表格展示方法、装置、设备及介质 | |
| CN110908752A (zh) | 控件设置方法、装置、电子设备及交互系统 | |
| CN113254139B (zh) | 线上教育课程信息显示方法、装置、终端及存储介质 | |
| CN111325668A (zh) | 图像处理深度学习模型的训练方法、装置及电子设备 | |
| CN111176707A (zh) | 模板化的自动化运维方法、装置及电子设备 | |
| CN112492399B (zh) | 信息显示方法、装置及电子设备 | |
| CN113961280A (zh) | 视图的展示方法、装置、电子设备及计算机可读存储介质 | |
| CN112256176B (zh) | 文字显示方法、装置、电子设备以及计算机可读存储介质 | |
| CN110807164B (zh) | 图像区域的自动调节方法、装置、电子设备及计算机可读存储介质 | |
| CN110929571B (zh) | 一种笔迹拟合的方法、装置、介质和电子设备 | |
| CN114090817A (zh) | 一种人脸特征数据库动态构建方法、装置及存储介质 | |
| CN111200705B (zh) | 图像处理方法和装置 | |
| CN113760140B (zh) | 一种内容显示方法、装置、介质和电子设备 | |
| CN110851097A (zh) | 一种笔迹数据一致的控制方法、装置、介质和电子设备 | |
| CN111190599A (zh) | 利用Dialog实现安卓自定义软键盘的方法、装置及电子设备 | |
| CN112492381B (zh) | 信息显示方法、装置及电子设备 |
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 | ||
| CP01 | Change in the name or title of a patent holder |
Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Patentee after: Douyin Vision Co.,Ltd. Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Patentee before: Tiktok vision (Beijing) Co.,Ltd. Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Patentee after: Tiktok vision (Beijing) Co.,Ltd. Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Patentee before: BEIJING BYTEDANCE NETWORK TECHNOLOGY Co.,Ltd. |
|
| CP01 | Change in the name or title of a patent holder |