CN111506842A - 页面展示方法、装置、电子设备及计算机存储介质 - Google Patents
页面展示方法、装置、电子设备及计算机存储介质 Download PDFInfo
- Publication number
- CN111506842A CN111506842A CN201910097845.XA CN201910097845A CN111506842A CN 111506842 A CN111506842 A CN 111506842A CN 201910097845 A CN201910097845 A CN 201910097845A CN 111506842 A CN111506842 A CN 111506842A
- Authority
- CN
- China
- Prior art keywords
- display mode
- page
- initial
- target
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 40
- 238000009877 rendering Methods 0.000 claims abstract description 21
- 238000004891 communication Methods 0.000 claims description 15
- 238000013519 translation Methods 0.000 claims description 14
- 238000004590 computer program Methods 0.000 claims description 2
- 238000004091 panning Methods 0.000 claims 1
- 230000000694 effects Effects 0.000 abstract description 16
- 238000011161 development Methods 0.000 description 15
- 230000006978 adaptation Effects 0.000 description 9
- 238000010586 diagram Methods 0.000 description 8
- 238000012545 processing Methods 0.000 description 3
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 2
- 238000013461 design Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000011022 operating instruction Methods 0.000 description 1
Images
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
Abstract
本发明实施例提供了一种页面展示方法、装置、电子设备及计算机存储介质。其中，所述页面展示方法包括：根据接收的展示模式切换指令，对所述页面中的网页部分进行与所述展示模式切换指令对应的调整；对调整的所述网页部分进行渲染，根据渲染的所述网页部分和所述页面中所述网页部分以外的其他部分展示所述页面。通过本发明实施例，页面展示效果更好。
Description
技术领域
本发明实施例涉及计算机技术领域，尤其涉及一种页面展示方法、装置、电子设备及计算机存储介质。
背景技术
为了满足用户在不同使用场景中的不同的使用需求，现有的应用程序除了需要能够以默认展示模式布局和展示页面外，还需要根据设备的持握或者放置方向更改展示模式，以默认展示模式之外的其他展示模式布局和展示页面。例如，浏览器中默认采用竖屏展示模式，但一些情况下需要切换至横屏展示模式进行展示。
由于一些应用程序的页面较为复杂，导致默认展示模式之外的其他展示模式在开发时需要进行大量页面元素适配，使得开发工作量大，且在运行时切换到其他展示模式进行展示时，对设备资源消耗较高，性能影响较大，使得展示效果不好。
发明内容
有鉴于此，本发明实施例提供一种页面展示方案，以解决上述部分或全部问题。
根据本发明实施例的第一方面，提供了一种页面展示方法，其包括：根据接收的展示模式切换指令，对所述页面中的网页部分进行与所述展示模式切换指令对应的调整；对调整的所述网页部分进行渲染，根据渲染的所述网页部分和所述页面中所述网页部分以外的其他部分展示所述页面。
根据本发明实施例的第二方面，提供了一种页面展示装置，其包括：切换模块，用于根据接收的展示模式切换指令，对所述页面中的网页部分进行与所述展示模式切换指令对应的调整；渲染模块，用于对调整的所述网页部分进行渲染，根据渲染的所述网页部分和所述页面中所述网页部分以外的其他部分展示所述页面。
根据本发明实施例的第三方面，提供了一种电子设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行如第一方面所述的页面展示方法对应的操作。
根据本发明实施例的第四方面，提供了一种计算机存储介质，其上存储有计算机程序，该程序被处理器执行时实现如第一方面所述的页面展示方法。
根据本发明实施例提供的页面展示方案，在需要进行展示模式切换时，对页面中的网页部分进行对应的调整和渲染，根据渲染的网页部分和页面中网页部分以外的其他部分展示页面，使得展示的所述页面的展示模式为所述展示模式切换指令所指示的目标展示模式。这样可以实现根据展示模式切换指令切换页面的展示模式，而且适配简单，显示可靠性高，由于处理的页面中的部分少，所以可以占用更少的设备资源，几乎不会影响设备的性能。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明实施例中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。
图1为根据本发明实施例一的一种页面展示方法的步骤流程图；
图2为竖屏模式的页面示意图
图3为采用现有技术的页面切换方法切换为横屏模式的页面示意图；
图4为采用实施例一的页面展示方法切换为横屏模式的页面示意图；
图5为根据本发明实施例二的一种页面展示方法的步骤流程图；
图6为根据本发明实施例三的一种页面展示装置的结构框图；
图7为根据本发明实施例四的一种页面展示装置的结构框图；
图8为根据本发明实施例五的一种电子设备的结构示意图。
具体实施方式
为了使本领域的人员更好地理解本发明实施例中的技术方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本发明实施例一部分实施例，而不是全部的实施例。基于本发明实施例中的实施例，本领域普通技术人员所获得的所有其他实施例，都应当属于本发明实施例保护的范围。
下面结合本发明实施例附图进一步说明本发明实施例具体实现。
实施例一
参照图1，示出了根据本发明实施例一的一种页面展示方法的步骤流程图。
本实施例的页面展示方法包括以下步骤：
步骤S102：根据接收的展示模式切换指令，对所述页面中的网页部分进行与所述展示模式切换指令对应的调整。
所述展示模式切换指令用于指示切换所述页面的展示模式。本领域技术人员可以根据需要选择展示模式切换指令中包含的信息，本实施例对此不作限定，只要能够指示切换所述页面的展示模式即可。
例如，所述展示模式切换指令中可以包括：初始展示模式、目标展示模式等。
当然，所述展示模式切换指令也可以包括检测到的设备的运动信息，例如，旋转动作、旋转角度、旋转方向等。
所述初始展示模式用于指示页面的当前展示模式，以采用矩形屏幕的显示设备为例，其可以是横屏模式或竖屏模式，根据横屏或竖屏方向的不同，可以分为0°竖屏模式、90°横屏模式、180°竖屏模式和270°横屏模式等。其中，横屏模式是指屏幕垂直于水平面时，屏幕的长边(又称高)平行于水平面，短边(又称宽)垂直于水平面。竖屏模式是指屏幕垂直于水平面时，屏幕的长边垂直于水平面，短边平行于水平面。
需要说明的是，针对其他形状的屏幕，其可以具有不同的展示模式。如，针对六边形屏幕，其可以具有0°模式、60°模式、120°模式……330°模式等。
所述目标展示模式即待切换至的显示模式。仍以采用矩形屏幕的显示设备为例，其可以是横屏模式或竖屏模式。
设备的运动信息包括但不限于前述的旋转动作、旋转方向(如顺时针、逆时针)和旋转角度(如0°、30°、90°、180°、360°)等，其可以包括旋转动作、旋转方向和旋转角度中的部分或全部。设备的运动信息可以通过硬件(如陀螺仪)和/或软件检测获得。所述展示模式切换指令中可以包括部分或全部的所述设备的运动信息。
所述页面中的网页部分通常是指页面中的主体部分。例如，购物应用程序中除上部工具栏和底部导航栏之外的部分。又例如，浏览器中用于展示网页内容的部分。以Android系统(安卓系统)中的浏览器为例，所述页面中的网页部分通常是使用webview组件展示的部分。
如图2-图4所示，除了前述的网页部分(图2-图4中标号1处所指示部分)外，所述页面中通常还包括工具栏(图2-图4中标号2处所指示位置)，根据需要还可能包括菜单栏(显示有时间、电池信息等)和导航栏(显示有主页按钮、返回按钮和多任务按钮等)。
由于页面中包含的部分较多，为了保证在不同的展示模式下均具有较好的展示效果，需要在开发时对页面中的各个部分均进行多个展示模式的适配，导致开发工作量大，且通常情况下，不同的展示模式各部分的宽度和高度会产生变化，导致若适配不当，其显示效果就会变差。
在本实施例中，根据接收的展示模式切换指令，对页面中的网页部分进行与展示模式切换指令对应的调整，使得开发时仅需对网页部分进行多个展示模式的适配，减少了开发量，且更容易保证适配的可靠性，进而确保显示效果。
在对所述网页部分进行与所述展示模式切换指令对应的调整时，本领域技术人员可以根据需要执行匹配的调整动作，本实施例对此不作限定。
例如，当展示模式切换指令指示将所述初始展示模式旋转180°时，对所述网页部分执行旋转调整操作，将所述网页部分旋转180°，并维持页面中其他部分。
步骤S104：对调整的所述网页部分进行渲染，根据渲染的所述网页部分和所述页面中所述网页部分以外的其他部分展示所述页面。
本领域技术人员可以根据需要采用匹配的方式对调整的所述网页部分进行渲染。例如，在Android系统中，对于应用程序中的webview组件，可以使用如webkit内核或者Chrome内核等渲染引擎对网页部分进行渲染。
根据渲染的所述网页部分和所述页面中所述网页部分以外的其他部分(如工具栏、导航栏等)展示所述页面。
通过本实施例，在需要进行展示模式切换时，对页面中的网页部分进行对应的调整和渲染，根据渲染的网页部分和页面中网页部分以外的其他部分展示页面，使得展示的所述页面的展示模式为所述展示模式切换指令所指示的目标展示模式。这样可以实现根据展示模式切换指令切换页面的展示模式，而且适配简单，显示可靠性高，由于处理的页面中的部分少，所以可以占用更少的设备资源，几乎不会影响设备的性能。
本实施例的页面展示方法可以由任意适当的具有数据处理能力的电子设备执行，包括但不限于：服务器、移动终端(如平板电脑、手机等)和PC机等。
实施例二
参照图5，示出了根据本发明实施例二的一种页面展示方法的步骤流程图。
本实施例的页面展示方法包括前述的步骤S102～S104。
其中，所述步骤S102包括以下子步骤：
步骤S1021：根据所述展示模式切换指令，确定初始展示模式与目标展示模式。
如前所述，展示模式切换指令可以包括初始展示模式和目标展示模式。或者，展示模式切换指令可以包括初始展示模式和部分或全部设备的运动信息。
初始展示模式为当前使用的展示模式，以手机为例，可以是横屏模式或竖屏模式。目标展示模式为需要切换至的展示模式。
本领域技术人员可以根据具体的所述展示模式切换指令，采用匹配的方式确定所述初始展示模式和所述目标展示模式。
例如，若所述展示模式切换指令中包括初始展示模式和目标展示模式，则可以直接据此确定初始展示模式与目标展示模式。如，初始展示模式为0°竖屏模式，目标展示模式为90°横屏模式等。
又例如，所述展示模式切换指令中包括初始展示模式、旋转角度，则可以根据初始展示模式和旋转角度确定目标展示模式。如，初始展示模式为竖屏模式，旋转角度为90°，则确定目标展示模式为横屏模式。
步骤S1022：依据所述初始展示模式与目标展示模式，对所述页面中的网页部分进行对应的调整。
在第一种情况中，若所述初始展示模式与目标展示模式之间的旋转角度为90°，则对所述页面中网页部分进行平移调整操作和旋转调整操作。
仍以矩形屏幕为例，由于横屏模式和竖屏模式之间的旋转角度为90°，因此，若初始展示模式和目标展示模式之间的旋转角度为90°，则表示需要进行横屏模式与竖屏模式的切换，故而需要对网页部分进行平移操作和旋转调整操作，以使根据调整的网页部分和未调整的其他部分显示的页面的展示模式为目标展示模式。
在一具体实现中，若所述初始展示模式与目标展示模式之间的旋转角度为90°，则对所述页面中网页部分进行平移调整操作和旋转调整操作，包括：若所述初始展示模式与目标展示模式之间的旋转角度为90°，则将所述页面中网页部分平移设定距离；根据所述初始展示模式与目标展示模式之间的旋转方向，将平移的所述网页部分旋转90°。
所述初始展示模式与所述目标展示模式之间的旋转方向可以根据检测到的设备的旋转方向确定。
以从竖屏模式切换至横屏模式为例，进行调整时，将所述网页部分平移屏幕的宽度，在以平移的网页部分的左上角为旋转中心，沿着所述初始展示模式与目标展示模式之间的旋转方向，将平移的所述网页部分旋转90°，即可在展示时，网页部分的宽度和高度对换，且在页面中处于合适的位置，呈现出横屏模式的显示效果，使得展示模式的切换效率更高。
需要说明的是，根据页面中各部分布局的不同，以及网页部分与页面整体尺寸关系的不同，平移的设定距离可以根据需要确定。
在Android系统中，通过这种方式实现横屏模式展示，由于仅是切换了用于展示网页内容的网页部分对应的webview组件的宽度和高度，并没有调整对应整个页面的view组件的宽度和高度，因此不会对该view组件中与页面的其他部分对应的其他的子view组件(如用于展示工具栏的view组件)的宽度和高度产生影响，故而无需对页面的其他部分进行适配，减小了开发时的工作量，且保证了切换后的显示效果。
在第二种情况中，若所述初始展示模式与目标展示模式之间的旋转角度为180°，则对所述页面中网页部分进行旋转调整操作。
仍以矩形屏幕为例，若所述初始展示模式与目标展示模式之间的旋转角度为180°，则表示不需要切换网页部分的宽度和高度，只需要调整其中的上下方向关系，因此可以通过旋转调整操作，以使根据调整的网页部分和未调整的其他部分显示的页面的展示模式为目标展示模式。
在一具体实现中，若所述初始展示模式与所述目标展示模式之间的旋转角度为180°，则对所述页面中网页部分进行旋转调整操作，具体为：若所述初始展示模式与所述目标展示模式之间的旋转角度为180°，则根据所述初始展示模式与所述目标展示模式之间的旋转方向，将所述网页部分旋转180°。
其中，所述初始展示模式与所述目标展示模式之间的旋转方向可以根据检测到的设备的旋转方向确定。
由上，通过本实施例，在需要进行展示模式切换时，仅需对页面中的网页部分进行对应的调整和渲染，根据渲染的网页部分和页面中网页部分以外的其他部分展示页面，使得展示的所述页面的展示模式为所述展示模式切换指令所指示的目标展示模式。这样可以实现根据展示模式切换指令切换页面的展示模式，而且适配简单，显示可靠性高，由于处理的页面中的部分少，所以可以占用更少的设备资源，几乎不会影响设备的性能。
此外，根据初始展示模式和目标展示模式之间的旋转角度不同，可以采用不同的调整操作，保证了调整后的展示效果和调整效率，能够满足更多的展示模式需求。
本实施例的页面展示方法可以由任意适当的具有数据处理能力的电子设备执行，包括但不限于：服务器、移动终端(如平板电脑、手机等)和PC机等。
实施例三
参照图6，示出了根据本发明实施例三的一种页面展示装置的结构框图。
本实施例的页面展示装置包括切换模块602和渲染模块604。
其中，所述切换模块602，用于根据接收的展示模式切换指令，对所述页面中的网页部分进行与所述展示模式切换指令对应的调整。
所述展示模式切换指令用于指示切换所述页面的展示模式。本领域技术人员可以根据需要选择展示模式切换指令中包含的信息，本实施例对此不作限定，只要能够指示切换所述页面的展示模式即可。
例如，所述展示模式切换指令中可以包括：初始展示模式、目标展示模式等。
当然，所述展示模式切换指令也可以包括检测到的设备的运动信息，例如，旋转动作、旋转角度、旋转方向等。
所述初始展示模式用于指示页面的当前展示模式，以采用矩形屏幕的显示设备为例，其可以是横屏模式或竖屏模式，根据横屏或竖屏方向的不同，可以分为0°竖屏模式、90°横屏模式、180°竖屏模式和270°横屏模式等。其中，横屏模式是指屏幕垂直于水平面时，屏幕的长边(又称高)平行于水平面，短边(又称宽)垂直于水平面。竖屏模式是指屏幕垂直于水平面时，屏幕的长边垂直于水平面，短边平行于水平面。
需要说明的是，针对其他形状的屏幕，其可以具有不同的展示模式。如，针对六边形屏幕，其可以具有0°模式、60°模式、120°模式……330°模式等。
所述目标展示模式即待切换至的显示模式。仍以采用矩形屏幕的显示设备为例，其可以是横屏模式或竖屏模式。
设备的运动信息包括但不限于前述的旋转动作、旋转方向(如顺时针、逆时针)和旋转角度(如0°、30°、90°、180°、360°)等，其可以包括旋转动作、旋转方向和旋转角度中的部分或全部。设备的运动信息可以通过硬件(如陀螺仪)和/或软件检测获得。所述展示模式切换指令中可以包括部分或全部的所述设备的运动信息。
所述页面中的网页部分通常是指页面中的主体部分。例如，购物应用程序中除上部工具栏和底部导航栏之外的部分。又例如，浏览器中用于展示网页内容的部分。以Android系统(安卓系统)中的浏览器为例，所述页面中的网页部分通常是使用webview组件展示的部分。
如图2-图4所示，除了前述的网页部分(图2-图4中标号1处所指示部分)外，所述页面中通常还包括工具栏(图2-图4中标号2处所指示位置)，根据需要还可能包括菜单栏(显示有时间、电池信息等)和导航栏(显示有主页按钮、返回按钮和多任务按钮等)。
由于页面中包含的部分较多，为了保证在不同的展示模式下均具有较好的展示效果，需要在开发时对页面中的各个部分均进行多个展示模式的适配，导致开发工作量大，且通常情况下，不同的展示模式各部分的宽度和高度会产生变化，导致若适配不当，其显示效果就会变差。
在本实施例中，根据接收的展示模式切换指令，对页面中的网页部分进行与展示模式切换指令对应的调整，使得开发时仅需对网页部分进行多个展示模式的适配，减少了开发量，且更容易保证适配的可靠性，进而确保显示效果。
在对所述网页部分进行与所述展示模式切换指令对应的调整时，本领域技术人员可以根据需要执行匹配的调整动作，本实施例对此不作限定。
例如，当展示模式切换指令指示将所述初始展示模式旋转180°时，对所述网页部分执行旋转调整操作，将所述网页部分旋转180°，并维持页面中其他部分。
所述渲染模块，用于对调整的所述网页部分进行渲染，根据渲染的所述网页部分和所述页面中所述网页部分以外的其他部分展示所述页面。
本领域技术人员可以根据需要采用匹配的方式对调整的所述网页部分进行渲染。例如，在Android系统中，对于应用程序中的webview组件，可以使用如webkit内核或者Chrome内核等渲染引擎对网页部分进行渲染。
根据渲染的所述网页部分和所述页面中所述网页部分以外的其他部分(如工具栏、导航栏等)展示所述页面。
通过本实施例，在需要进行展示模式切换时，对页面中的网页部分进行对应的调整和渲染，根据渲染的网页部分和页面中网页部分以外的其他部分展示页面，使得展示的所述页面的展示模式为所述展示模式切换指令所指示的目标展示模式。这样可以根据展示模式切换指令切换页面的展示模式，而且适配简单，显示可靠性高，由于处理的页面中的部分少，所以可以占用更少的设备资源，几乎不会影响设备的性能。
实施例四
参照图7，示出了根据本发明实施例四的一种页面展示装置的结构框图。
本实施例的页面展示装置包括前述的切换模块602和渲染模块604。所述切换模块602包括确定模块6021和调整模块6022。
其中所述确定模块6021，用于根据所述展示模式切换指令，确定初始展示模式与目标展示模式。
如前所述，展示模式切换指令可以包括初始展示模式和目标展示模式。或者，展示模式切换指令可以包括初始展示模式和部分或全部设备的运动信息。
初始展示模式为当前使用的展示模式，以手机为例，可以是横屏模式或竖屏模式。目标展示模式为需要切换至的展示模式。
本领域技术人员可以根据具体的所述展示模式切换指令，采用匹配的方式确定所述初始展示模式和所述目标展示模式。
例如，若所述展示模式切换指令中包括初始展示模式和目标展示模式，则可以直接据此确定初始展示模式与目标展示模式。如，初始展示模式为0°竖屏模式，目标展示模式为90°横屏模式等。
又例如，所述展示模式切换指令中包括初始展示模式、旋转角度，则可以根据初始展示模式和旋转角度确定目标展示模式。如，初始展示模式为竖屏模式，旋转角度为90°，则确定目标展示模式为横屏模式。
调整模块6022，用于依据所述初始展示模式与目标展示模式，对所述页面中的网页部分进行对应的调整。
在第一种情况中，所述调整模块6022包括第一子调整模块。所述第一子调整模块，用于若所述初始展示模式与目标展示模式之间的旋转角度为90°，则对所述页面中网页部分进行平移调整操作和旋转调整操作。
仍以矩形屏幕为例，由于横屏模式和竖屏模式之间的旋转角度为90°，因此，若初始展示模式和目标展示模式之间的旋转角度为90°，则表示需要进行横屏模式与竖屏模式的切换，故而需要对网页部分进行平移操作和旋转调整操作，以使根据调整的网页部分和未调整的其他部分显示的页面的展示模式为目标展示模式。
在一具体实现中，所述第一子调整模块包括平移模块和旋转模块。所述平移模块，用于若所述初始展示模式与目标展示模式之间的旋转角度为90°，则将所述页面中网页部分平移设定距离。所述旋转模块，用于根据所述初始展示模式与目标展示模式之间的旋转方向，将平移的所述网页部分旋转90°。
所述初始展示模式与所述目标展示模式之间的旋转方向可以根据检测到的设备的旋转方向确定。
以从竖屏模式切换至横屏模式为例，进行调整时，将所述网页部分平移屏幕的宽度，再以平移的网页部分的左上角为旋转中心，沿着所述初始展示模式与目标展示模式之间的旋转方向(如顺时针或逆时针)，将平移的所述网页部分旋转90°，即可使在展示时，网页部分的宽度和高度对换，且在页面中处于合适的位置，呈现出横屏模式的显示效果，使得展示模式的切换效率更高。
需要说明的是，根据页面中各部分布局的不同，以及网页部分与页面整体尺寸关系的不同，平移的设定距离可以根据需要确定。
在Android系统中，通过这种方式实现横屏模式展示，由于仅是切换了用于展示网页内容的网页部分对应的webview组件的宽度和高度，并没有调整对应整个页面的view组件的宽度和高度，因此不会对该view组件中与页面的其他部分对应的其他的子view组件(如用于展示工具栏的view组件)的宽度和高度产生影响，故而无需对页面的其他部分进行适配，减小了开发时的工作量，且保证了切换后的显示效果。
在第二种情况中，所述调整模块6022包括第二子调整模块。所述第二子调整模块，用于若所述初始展示模式与目标展示模式之间的旋转角度为180°，则对所述页面中网页部分进行旋转调整操作。
仍以矩形屏幕为例，若所述初始展示模式与目标展示模式之间的旋转角度为180°，则表示不需要切换网页部分的宽度和高度，只需要调整其中的上下方向关系，因此可以通过旋转调整操作，以使根据调整的网页部分和未调整的其他部分显示的页面的展示模式为目标展示模式。
需要说明的是，在本实施例中，所述未调整的其他部分表示未进行旋转的部分，对于仅进行了平移的部分也可以是未调整的部分。
在一具体实现中，所述第二子调整模块具体用于若所述初始展示模式与所述目标展示模式之间的旋转角度为180°，则根据所述初始展示模式与所述目标展示模式之间的旋转方向，将所述网页部分旋转180°。
其中，所述初始展示模式与所述目标展示模式之间的旋转方向可以根据检测到的设备的旋转方向确定。
由上，通过本实施例，在需要进行展示模式切换时，仅需对页面中的网页部分进行对应的调整和渲染，根据渲染的网页部分和页面中网页部分以外的其他部分展示页面，使得展示的所述页面的展示模式为所述展示模式切换指令所指示的目标展示模式。这样可以实现根据展示模式切换指令切换页面的展示模式，而且适配简单，显示可靠性高，由于处理的页面中的部分少，所以可以占用更少的设备资源，几乎不会影响设备的性能。
此外，根据初始展示模式和目标展示模式之间的旋转角度不同，可以采用不同的调整操作，保证了调整后的展示效果和调整效率，能够满足更多的展示模式需求。
实施例五
参照图8，示出了根据本发明实施例五的一种电子设备的结构示意图，本发明具体实施例并不对电子设备的具体实现做限定。
如图8所示，该电子设备可以包括：处理器(processor)802、通信接口(Communications Interface)804、存储器(memory)806、以及通信总线808。
其中：
处理器802、通信接口804、以及存储器806通过通信总线808完成相互间的通信。
通信接口804，用于与其它电子设备如终端设备或服务器进行通信。
处理器802，用于执行程序810，具体可以执行上述下载应用的方法实施例中的相关步骤。
具体地，程序810可以包括程序代码，该程序代码包括计算机操作指令。
处理器802可能是中央处理器CPU，或者是特定集成电路ASIC(ApplicationSpecific Integrated Circuit)，或者是被配置成实施本发明实施例的一个或多个集成电路。电子设备包括的一个或多个处理器，可以是同一类型的处理器，如一个或多个CPU；也可以是不同类型的处理器，如一个或多个CPU以及一个或多个ASIC。
存储器806，用于存放程序810。存储器806可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。
程序810具体可以用于使得处理器802执行以下操作：根据接收的展示模式切换指令，对所述页面中的网页部分进行与所述展示模式切换指令对应的调整；对调整的所述网页部分进行渲染，根据渲染的所述网页部分和所述页面中所述网页部分以外的其他部分展示所述页面。
在一种可选的实施方式中，程序810还用于使得处理器802在根据接收的展示模式切换指令，对页面中的网页部分进行与所述展示模式切换指令对应的调整时，根据所述展示模式切换指令，确定初始展示模式与目标展示模式；依据所述初始展示模式与所述目标展示模式，对所述页面中的网页部分进行对应的调整。
在一种可选的实施方式中，程序610还用于使得处理器802在依据所述初始展示模式与所述目标展示模式，对所述页面中的网页部分进行对应的调整时，若所述初始展示模式与所述目标展示模式之间的旋转角度为90°，则对所述页面中网页部分进行平移调整操作和旋转调整操作；或者，若所述初始展示模式与所述目标展示模式之间的旋转角度为180°，则对所述页面中网页部分进行旋转调整操作。
在一种可选的实施方式中，程序610还用于使得处理器802若所述初始展示模式与所述目标展示模式之间的旋转角度为90°，则对所述页面中网页部分进行平移调整操作和旋转调整操作时，若所述初始展示模式与所述目标展示模式之间的旋转角度为90°，则将所述页面中网页部分平移设定距离；根据所述初始展示模式与所述目标展示模式之间的旋转方向，将平移的所述网页部分旋转90°。
在一种可选的实施方式中，程序610还用于使得处理器802若所述初始展示模式与所述目标展示模式之间的旋转角度为180°，则根据所述初始展示模式与所述目标展示模式之间的旋转方向，将所述网页部分旋转180°。
程序810中各步骤的具体实现可以参见上述页面展示方法实施例中的相应步骤和单元中对应的描述，在此不赘述。所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的设备和模块的具体工作过程，可以参考前述方法实施例中的对应过程描述，在此不再赘述。
通过本实施例的电子设备，在需要进行展示模式切换时，对页面中的网页部分进行对应的调整和渲染，根据渲染的网页部分和页面中网页部分以外的其他部分展示页面，使得展示的所述页面的展示模式为所述展示模式切换指令所指示的目标展示模式。这样可以实现根据展示模式切换指令切换页面的展示模式，而且适配简单，显示可靠性高，由于处理的页面中的部分少，所以可以占用更少的设备资源，几乎不会影响设备的性能。
需要指出，根据实施的需要，可将本发明实施例中描述的各个部件/步骤拆分为更多部件/步骤，也可将两个或多个部件/步骤或者部件/步骤的部分操作组合成新的部件/步骤，以实现本发明实施例的目的。
上述根据本发明实施例的方法可在硬件、固件中实现，或者被实现为可存储在记录介质(诸如CD ROM、RAM、软盘、硬盘或磁光盘)中的软件或计算机代码，或者被实现通过网络下载的原始存储在远程记录介质或非暂时机器可读介质中并将被存储在本地记录介质中的计算机代码，从而在此描述的方法可被存储在使用通用计算机、专用处理器或者可编程或专用硬件(诸如ASIC或FPGA)的记录介质上的这样的软件处理。可以理解，计算机、处理器、微处理器控制器或可编程硬件包括可存储或接收软件或计算机代码的存储组件(例如，RAM、ROM、闪存等)，当所述软件或计算机代码被计算机、处理器或硬件访问且执行时，实现在此描述的页面展示方法。此外，当通用计算机访问用于实现在此示出的页面展示方法的代码时，代码的执行将通用计算机转换为用于执行在此示出的页面展示方法的专用计算机。
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及方法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明实施例的范围。
以上实施方式仅用于说明本发明实施例，而并非对本发明实施例的限制，有关技术领域的普通技术人员，在不脱离本发明实施例的精神和范围的情况下，还可以做出各种变化和变型，因此所有等同的技术方案也属于本发明实施例的范畴，本发明实施例的专利保护范围应由权利要求限定。
使用场景
如图2和图4所示，在本使用场景中，以从竖屏模式切换至横屏模式为例，对本申请的页面展示方法进行说明。
步骤A：初始展示模块为图2中所示的竖屏模式。当接收到用户点击的“横屏”按钮后，或者接收到系统发送的旋转屏幕信号时，触发展示模式切换，生成展示模式切换指令。
步骤B：根据所述展示模式切换指令，只对页面内网页部分进行旋转(view.rotate)、平移(view.translate)，将网页部分的宽度和高度进行切换，并使其显示到页面中的正确的位置。
步骤C：仅对网页部分的内容进行重新渲染，渲染可以采用任何可行的渲染方式。根据渲染后的网页部分和页面中维持的其他部分生成切换展示模式后的页面，并展示该页面(切换后的页面如图4所示)。
在本使用场景中，不仅保证展示效果可以满足需求；而且由于在展示模式切换时，不再需要对页面中的除网页部分之外的其他部分进行调整，因而也无需在开发时对其进行适配，使得开发工作量和错误率可控，大大提高开发效率；解决了现有技术中，需要适配所有页面内或者页面外的部分，导致开发量大的问题。
此外，还避免了现有技术中存在的部分或全部问题。例如，现有技术中，当接收到设备系统发送的旋转屏幕信号(如onConfigurationChanged)后，利用系统提供的接口(如Android系统接口)，将整个页面切换为横向，这需要同时对页面中所有部分进行横向适配，页面会重新布局，并重新执行一遍系统界面渲染过程(如Android系统中的渲染过程包括测量measure—布局layout—绘制draw)，将旋转后的页面渲染出来进行显示。在这一过程中由于旋转前后，屏幕的宽度和高度切换，若开发时适配不好很容易导致页面中一些部分出现错乱，如一些部分宽度被增大，导致其中显示的内容(如图片内容)被强制改变尺寸导致其变形失真，影响展示效果，而且由于需要将页面中所有部分进行重新渲染，还会占用过多设备资源，影响设备性能。
Claims (12)
1.一种页面展示方法，其特征在于，包括：
根据接收的展示模式切换指令，对所述页面中的网页部分进行与所述展示模式切换指令对应的调整；
对调整的所述网页部分进行渲染，根据渲染的所述网页部分和所述页面中所述网页部分以外的其他部分展示所述页面。
2.根据权利要求1所述的方法，其特征在于，所述根据接收的展示模式切换指令，对页面中的网页部分进行与所述展示模式切换指令对应的调整，包括：
根据所述展示模式切换指令，确定初始展示模式与目标展示模式；
依据所述初始展示模式与所述目标展示模式，对所述页面中的网页部分进行对应的调整。
3.根据权利要求2所述的方法，其特征在于，依据所述初始展示模式与所述目标展示模式，对所述页面中的网页部分进行对应的调整，包括：
若所述初始展示模式与所述目标展示模式之间的旋转角度为90°，则对所述页面中网页部分进行平移调整操作和旋转调整操作；
或者，
若所述初始展示模式与所述目标展示模式之间的旋转角度为180°，则对所述页面中网页部分进行旋转调整操作。
4.根据权利要求3所述的方法，其特征在于，若所述初始展示模式与所述目标展示模式之间的旋转角度为90°，则对所述页面中网页部分进行平移调整操作和旋转调整操作，包括：
若所述初始展示模式与所述目标展示模式之间的旋转角度为90°，则将所述页面中网页部分平移设定距离；
根据所述初始展示模式与所述目标展示模式之间的旋转方向，将平移的所述网页部分旋转90°。
5.根据权利要求3所述的方法，其特征在于，若所述初始展示模式与所述目标展示模式之间的旋转角度为180°，则对所述页面中网页部分进行旋转调整操作，具体为：
若所述初始展示模式与所述目标展示模式之间的旋转角度为180°，则根据所述初始展示模式与所述目标展示模式之间的旋转方向，将所述网页部分旋转180°。
6.一种页面展示装置，其特征在于，包括：
切换模块，用于根据接收的展示模式切换指令，对所述页面中的网页部分进行与所述展示模式切换指令对应的调整；
渲染模块，用于对调整的所述网页部分进行渲染，根据渲染的所述网页部分和所述页面中所述网页部分以外的其他部分展示所述页面。
7.根据权利要求6所述的装置，其特征在于，所述切换模块包括：
确定模块，用于根据所述展示模式切换指令，确定初始展示模式与目标展示模式；
调整模块，用于依据所述初始展示模式与所述目标展示模式，对所述页面中的网页部分进行对应的调整。
8.根据权利要求7所述的装置，其特征在于，所述调整模块包括：
第一子调整模块，用于若所述初始展示模式与所述目标展示模式之间的旋转角度为90°，则对所述页面中网页部分进行平移调整操作和旋转调整操作；
或者，
第二子调整模块，用于若所述初始展示模式与所述目标展示模式之间的旋转角度为180°，则对所述页面中网页部分进行旋转调整操作。
9.根据权利要求8所述的装置，其特征在于，所述第一子调整模块包括：
平移模块，用于若所述初始展示模式与所述目标展示模式之间的旋转角度为90°，则将所述页面中网页部分平移设定距离；
旋转模块，用于根据所述初始展示模式与所述目标展示模式之间的旋转方向，将平移的所述网页部分旋转90°。
10.根据权利要求8所述的装置，其特征在于，所述第二子调整模块用于若所述初始展示模式与所述目标展示模式之间的旋转角度为180°，则根据所述初始展示模式与所述目标展示模式之间的旋转方向，将所述网页部分旋转180°。
11.一种电子设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；
所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行如权利要求1-5中任一项所述的页面展示方法对应的操作。
12.一种计算机存储介质，其上存储有计算机程序，该程序被处理器执行时实现如权利要求1-5中任一所述的页面展示方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910097845.XA CN111506842A (zh) | 2019-01-31 | 2019-01-31 | 页面展示方法、装置、电子设备及计算机存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910097845.XA CN111506842A (zh) | 2019-01-31 | 2019-01-31 | 页面展示方法、装置、电子设备及计算机存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111506842A true CN111506842A (zh) | 2020-08-07 |
Family
ID=71868854
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910097845.XA Pending CN111506842A (zh) | 2019-01-31 | 2019-01-31 | 页面展示方法、装置、电子设备及计算机存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111506842A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112541141A (zh) * | 2020-12-04 | 2021-03-23 | 深圳市欢太科技有限公司 | 控件展示回调方法、装置、终端及存储介质 |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104281677A (zh) * | 2014-09-29 | 2015-01-14 | 百度在线网络技术（北京）有限公司 | 页面的展现方法及装置 |
| CN106919260A (zh) * | 2017-03-07 | 2017-07-04 | 百度在线网络技术（北京）有限公司 | 网页操作方法和装置 |
| CN107256116A (zh) * | 2017-06-12 | 2017-10-17 | 广州神马移动信息科技有限公司 | 页面切换处理方法、装置、用户终端及可读取存储介质 |
| CN107678636A (zh) * | 2016-08-01 | 2018-02-09 | 广州市动景计算机科技有限公司 | 电子设备的页面展现方法和装置 |
| CN108021666A (zh) * | 2017-12-04 | 2018-05-11 | 北京百度网讯科技有限公司 | 页面适配方法和装置 |
| CN108170498A (zh) * | 2016-12-05 | 2018-06-15 | 阿里巴巴集团控股有限公司 | 页面内容展示方法及装置 |
| CN108260018A (zh) * | 2017-02-13 | 2018-07-06 | 广州市动景计算机科技有限公司 | 网页视频的全屏设置方法、设备及移动设备 |
| CN108376090A (zh) * | 2018-02-13 | 2018-08-07 | 广东欧珀移动通信有限公司 | 网页图片的操作方法、装置、终端及存储介质 |
-
2019
- 2019-01-31 CN CN201910097845.XA patent/CN111506842A/zh active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104281677A (zh) * | 2014-09-29 | 2015-01-14 | 百度在线网络技术（北京）有限公司 | 页面的展现方法及装置 |
| CN107678636A (zh) * | 2016-08-01 | 2018-02-09 | 广州市动景计算机科技有限公司 | 电子设备的页面展现方法和装置 |
| CN108170498A (zh) * | 2016-12-05 | 2018-06-15 | 阿里巴巴集团控股有限公司 | 页面内容展示方法及装置 |
| CN108260018A (zh) * | 2017-02-13 | 2018-07-06 | 广州市动景计算机科技有限公司 | 网页视频的全屏设置方法、设备及移动设备 |
| CN106919260A (zh) * | 2017-03-07 | 2017-07-04 | 百度在线网络技术（北京）有限公司 | 网页操作方法和装置 |
| CN107256116A (zh) * | 2017-06-12 | 2017-10-17 | 广州神马移动信息科技有限公司 | 页面切换处理方法、装置、用户终端及可读取存储介质 |
| CN108021666A (zh) * | 2017-12-04 | 2018-05-11 | 北京百度网讯科技有限公司 | 页面适配方法和装置 |
| CN108376090A (zh) * | 2018-02-13 | 2018-08-07 | 广东欧珀移动通信有限公司 | 网页图片的操作方法、装置、终端及存储介质 |
Non-Patent Citations (1)
| Title |
|---|
| 李扬: "Android移动开发项目化教程", 31 January 2017, 航空工业出版社, pages: 303 * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112541141A (zh) * | 2020-12-04 | 2021-03-23 | 深圳市欢太科技有限公司 | 控件展示回调方法、装置、终端及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10789672B2 (en) | Method and device for performing mapping on spherical panoramic image | |
| US20180020158A1 (en) | Camera Augmented Reality Based Activity History Tracking | |
| US20200357188A1 (en) | Mixed-reality system, program, method, and portable terminal device | |
| US10235795B2 (en) | Methods of compressing a texture image and image data processing system and methods of generating a 360 degree panoramic video thereof | |
| CN111552530B (zh) | 用户界面的终端屏幕适配方法、装置及设备 | |
| US20140267593A1 (en) | Method for processing image and electronic device thereof | |
| US20150135124A1 (en) | Multi-zone interface switching method and device | |
| CN110139040B (zh) | 云台摄像机定位的方法、装置、云台摄像机、设备及介质 | |
| US20210084228A1 (en) | Tracking shot method and device, and storage medium | |
| WO2017202175A1 (zh) | 一种视频压缩方法、装置及电子设备 | |
| US20230020379A1 (en) | Method and apparatus for displaying captured picture, terminal, and storage medium | |
| CN111651113B (zh) | 页面展示方法、装置、设备及存储介质 | |
| CN113126937A (zh) | 一种显示终端调整方法及显示终端 | |
| EP4258165A1 (en) | Two-dimensional code displaying method and apparatus, device, and medium | |
| US20170169546A1 (en) | Method and electronic device for adjusting panoramic video | |
| CN111506842A (zh) | 页面展示方法、装置、电子设备及计算机存储介质 | |
| US11194538B2 (en) | Image management system, image management method, and program | |
| US11593122B2 (en) | Dynamic resizing of a portion of a virtual device user interface | |
| CN112887777B (zh) | 互动视频的交互提示方法、装置、电子设备及存储介质 | |
| EP4243423A1 (en) | Method and device for changing background in picture, and storage medium and program product | |
| CN115578540A (zh) | 用于增强现实的方法、装置、设备和存储介质 | |
| CN108170499A (zh) | 3d应用图标的显示方法、装置及电子设备 | |
| CN111077999B (zh) | 一种信息处理方法、设备及系统 | |
| CN115129278A (zh) | 图像显示控制方法、系统、可读存储介质及电子设备 | |
| US11910068B2 (en) | Panoramic render of 3D video |
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 |