CN108287745A - 一种WebApp界面的显示方法及终端设备 - Google Patents

Abstract

本发明实施例提供一种WebApp界面的显示方法及终端设备，涉及通信技术领域，能够解决用户使用终端设备访问WebApp的过程中WebApp界面发生闪烁的问题，可以提高用户的体验。该方法应用于终端设备，终端设备当前处于竖屏显示状态，且显示第一WebApp界面，该第一WebApp界面包括第一布局的第一内容，该方法包括：接收用户在第一WebApp界面上的第一操作，该第一操作用于指示终端设备显示第一控件；响应于第一操作，在第一WebApp界面的第一区域显示第一控件，且该第一WebApp界面中的第一内容保持第一布局。

Description

一种WebApp界面的显示方法及终端设备

技术领域

本发明实施例涉及通信技术领域，尤其涉及一种WebApp界面的显示方法及终端设备。

背景技术

随着计算机网络技术的快速发展，通过网页应用WebApp用户可以实现业务访问。

Web App是基于网页技术开发而实现特定功能的应用，运行于网络和标准浏览器上，其既具有App(应用)的特性，也有Web(网页)的特性)。目前，使用终端显示WebApp界面的过程中，终端接收用户的第一操作(例如扫描二维码等)之后，终端可以显示一个WebApp界面，并且用户可以点击该WebApp界面上的输入框，以调出输入法软键盘，在该输入框内输入文字。需要指出，由于终端的显示屏的显示状态分为横屏显示状态和竖屏显示状态，上述WebApp界面包括的内容的布局也因显示屏的显示状态不同而不同。

然而，在某些应用场景下，当终端处于竖屏显示状态，上述用户点击竖屏显示状态的WebApp界面(将竖屏显示状态对应的WebApp界面称为WebApp界面1)上的输入框之后，终端显示WebApp界面2和软键盘，其中，WebApp界面2的内容与WebApp界面1的内容相同，不同的是，由于显示软键盘会占据该终端显示屏的显示界面的一部分，则显示内容在WebApp界面1的内容布局与在WebApp界面2的内容布局不同。

如图1中的(a)为WebApp界面1的显示效果，如图1中的(b)为点击WebApp界面1上输入框之后，显示的WebApp界面2和软键盘的显示效果，可见，用户点击WebApp界面1上的输入框之后，终端的WebApp界面会发生切换，即由WebApp界面1切换为WebApp界面2。另外，在软键盘消失时，WebApp界面也会发生切换，即由WebApp界面2切换为WebApp界面1。如此，在WebApp界面切换时，WebApp界面显示内容的内容布局发生改变，可能会造成视觉上的闪烁，导致用户的体验较差。

发明内容

本发明的实施例提供一种WebApp界面的显示方法及终端设备，能够解决用户使用终端设备访问WebApp的过程中WebApp界面发生闪烁的问题，可以提高用户的体验。

为达到上述目的，本发明的实施例采用如下技术方案：

第一方面，本发明实施例提供了一种WebApp界面的显示方法，应用于终端设备，所述终端设备处于竖屏显示状态，且显示第一WebApp界面，第一WebApp界面包括第一布局的第一内容，该方法包括：接收用户在第一WebApp界面上的第一操作，该第一操作用于指示终端设备显示第一控件；响应于第一操作，在第一WebApp界面的第一区域显示第一控件，且第一WebApp界面中的第一内容保持第一布局。

本发明实施例提供的WebApp界面的显示方法，在终端设备处于竖屏显示状态时，并且该终端设备显示第一WebApp界面，该第一WebApp界面包括第一布局的第一内容，该终端设备接收用户在第一WebApp界面上的第一操作之后，由于响应于该第一操作，可以在第一WebApp界面的第一区域显示第一控件，且该第一WebApp界面中的第一内容保持第一布局，即终端设备响应于第一操作显示第一控件时，第一WebApp界面的布局不会发生变化，如此，能够解决用户使用终端设备访问WebApp的过程中WebApp界面发生闪烁的问题，可以提高用户的体验。

第二方面，本发明实施例提供了一种WebApp界面的显示方法，应用于终端设备，该终端设备当前处于竖屏显示状态，且显示第一WebApp界面，该第一WebApp界面包括第一布局的第一内容，该第一WebApp界面当前的宽度和高度分别为第一宽度值、第一高度值，该方法包括：监听第一WebApp界面的显示尺寸是否变化，该显示尺寸包括第一WebApp界面的宽度和高度；若第一WebApp界面的宽度不变，第一WebApp界面的高度小于第一高度值，则确定在该第一WebApp界面的第一区域显示第一控件，且第一WebApp界面中的第一内容保持上述第一布局。

本发明实施例提供的WebApp界面的显示方法，在终端设备处于竖屏显示状态时，并且该终端设备显示第一WebApp界面，该第一WebApp界面包括第一布局的第一内容，该第一WebApp界面当前的宽度和高度分别为第一宽度值、第一高度值，由于当终端设备监听到第一WebApp界面的显示尺寸发生变化时，具体的，当第一WebApp界面的宽度不变，第一WebApp界面的高度小于第一高度值，确定在该第一WebApp界面的第一区域显示第一控件，且第一WebApp界面中的第一内容保持上述第一布局，即终端设备可以确定在显示第一控件时，第一WebApp界面的布局不会发生变化，如此，能够解决用户使用终端设备访问WebApp的过程中WebApp界面发生闪烁的问题，可以提高用户的体验。

第三方面，本发明实施例提供了一种终端设备，该终端设备当处于竖屏显示状态，且显示第一WebApp界面，该第一WebApp界面包括第一布局的第一内容，该终端设备包括接收模块和显示模块。接收模块，用于接收用户在第一WebApp界面上的第一操作，该第一操作用于指示终端设备显示第一控件；显示模块，用于响应于接收模块接收的第一操作，在第一WebApp界面的第一区域显示第一控件，且第一WebApp界面中的第一内容保持第一布局。

第四方面，本发明实施例提供了一种终端设备，该终端设备当前处于竖屏显示状态，且显示第一WebApp界面，该第一WebApp界面包括第一布局的第一内容，该第一WebApp界面当前的宽度和高度分别为第一宽度值、第一高度值，该终端设备包括监听模块和确定模块，其中，监听模块，用于监听第一WebApp界面的显示尺寸是否变化，该显示尺寸包括第一WebApp界面的宽度和高度；确定模块，用于若第一WebApp界面的宽度不变，第一WebApp界面的高度小于第一高度值，则确定在该第一WebApp界面的第一区域显示第一控件，且第一WebApp界面中的第一内容保持第一布局。

第五方面，本发明实施例提供了一种终端设备，该终端设备包括：处理器、存储器、显示器、通信接口和通信总线；处理器与存储器、显示器、通信接口通过通信总线连接，存储器用于存储计算机执行指令，当终端设备运行时，处理器执行存储器存储的计算机执行指令，以使终端执行上述第一方面或者第二方面所述的WebApp界面的显示方法。

第六方面，本发明实施例提供了一种计算机可读存储介质，该计算机可读存储介质上存储计算机程序，该计算机程序被处理器执行时实现如上述第一方面或第二方面中的WebApp界面的显示方法。

附图说明

图1为本发明实施例提供的一种WebApp界面的示意图；

图2为本发明实施例提供的一种WebApp界面的显示方法示意图一；

图3为本发明实施例提供的一种WebApp界面的显示方法应用的界面示意图一；

图4为本发明实施例提供的一种WebApp界面的显示方法应用的界面示意图二；

图5为本发明实施例提供的一种WebApp界面的显示方法应用的界面示意图三；

图6为本发明实施例提供的一种WebApp界面的显示方法示意图二；

图7为本发明实施例提供的一种WebApp界面的显示方法应用的界面示意图四；

图8为本发明实施例提供的一种WebApp界面的显示方法应用的界面示意图五；

图9为本发明实施例提供的一种WebApp界面的显示方法示意图三；

图10为本发明实施例提供的一种WebApp界面的显示方法示意图四；

图11为本发明实施例提供的终端设备的结构示意图一；

图12为本发明实施例提供的终端设备的结构示意图二；

图13为本发明实施例提供的终端设备的硬件示意图。

具体实施方式

下面结合附图对本发明实施例提供的WebApp界面的显示方法及终端设备进行详细描述。

本发明实施例的说明书和权利要求书中的术语“第一”和“第二”等是用于区别不同的对象，而不是用于描述对象的特定顺序。例如，第一WebApp界面和第二WebApp界面等是用于区别不同的界面，而不是用于描述WebApp界面的特定顺序。

在本发明实施例中，“示例性的”或者“例如”等词用于表示作例子、例证或说明。本发明实施例中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言，使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。

在本发明实施例的描述中，除非另有说明，“多个”的含义是指两个或者两个以上，例如，多个处理单元是指两个或者两个以上的处理单元；多个元件是指两个或者两个以上的元件等。

此外，本发明实施例的描述中所提到的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括其他没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。

基于背景技术存在的问题，本发明实施例提供的WebApp界面的显示方法及终端设备，终端设备接收用户在第一WebApp界面上的第一操作，该第一操作用于指示终端设备显示第一控件；该终端设备响应于第一操作，在第一WebApp界面的第一区域显示第一控件，而不改变第一WebApp界面中的内容的布局，如此，能够解决用户使用终端设备访问WebApp的过程中WebApp界面发生闪烁的问题，可以提高用户的体验。

本发明实施例中，能够实现WebApp界面的显示的终端设备可以为移动终端设备，也可以为非移动终端设备。移动终端设备可以为手机、平板电脑、笔记本电脑、掌上电脑、车载终端、可穿戴设备、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本或者个人数字助理(personal digital assistant，PDA)等；非移动终端设备可以为个人计算机(personal computer，PC)、电视机(television，TV)、柜员机或者自助机等；本发明实施例不作具体限定。

本发明实施例提供的WebApp界面的显示方法的执行主体可以为上述的终端设备(包括移动终端设备和非移动终端设备)，也可以为该终端设备中能够实现该WebApp界面的显示方法的功能模块和/或功能实体，具体的可以根据实际使用需求确定，本发明实施例不作限定。

下面对本发明实施例提供的显示控制方法进行示例性的说明。

如图2所示，本发明实施例提供一种WebApp界面的显示方法，该方法应用于终端设备，该终端设备当前处于竖屏显示状态，且显示第一WebApp界面，该方法可以包括下述S101-S102：

S101、终端设备接收用户在第一WebApp界面上的第一操作，该第一操作用于指示终端设备显示第一控件。

其中，第一WebApp界面包括第一布局的第一内容，该第一布局指的是终端设备处于竖屏显示状态时，第一WebApp界面的内容(即第一内容)在终端设备的显示屏中的布局。

需要说明的是，终端设备的显示状态通常包括横屏显示状态和竖屏显示状态，并且在终端设备显示WebApp界面时，终端设备处于竖屏显示状态的情况下，该WebApp界面的内容在终端设备的显示界面的布局与终端设备处于横屏显示状态下，该WebApp界面的内容在终端设备的显示界面的布局不同。如图3中的(a)为竖屏显示状态的WebApp界面的示意图，如图3中的(b)为横屏显示状态的WebApp界面的示意图。

可选的，本发明实施例中，用户通过在终端设备的显示屏上进行相关操作之后，终端设备响应该操作，从而终端设备可以显示第一WebApp界面，具体的，用户可以在终端设备上进行扫描二维码的操作，终端设备扫描某一二维码之后，终端设备响应该扫描二维码的操作，显示第一WebApp界面，或者用户可以点击终端设备上的某一链接地址，终端设备响应点击该链接地址的操作，显示第一WebApp界面，触发终端设备当前显示第一WebApp界面的操作还可以为其他满足使用需求的操作，本发明实施例不作具体限定。

本发明实施例中，在终端设备当前显示第一WebApp界面时，用户可以通过第一操作触发终端设备在第一WebApp界面上显示与第一操作对应的第一控件。

可选的，上述第一操作为用户在第一WebApp界面的第三区域上的触屏操作，或者第一操作为用户在第一WebApp界面的第三区域上的重力操作，或者第一操作为用户在第一WebApp界面的第三区域上的指纹操作。

可选的，终端设备当前显示第一WebApp界面时，上述第一操作还可以为用户对终端设备的按键操作。

示例性的，上述触屏操作为用户对手机的触摸屏的按压操作、长按操作、滑动操作、点击操作、悬浮操作(用户在触摸屏附近的操作)等。指纹操作为用户对手机的指纹识别器的滑动指纹、长按指纹、单击指纹和双击指纹等。重力操作为用户对手机特定方向的晃动、特定次数的晃动等操作。按键操作对应于用户对手机的电源键、音量键、Home键等按键的单击操作、双击操作、长按操作、组合按键操作等操作。

其中，本发明实施例提供的终端设备接收用户在第一WebApp界面上的第一操作可以为多种操作中的一种，本发明实施例对此不作限定。

本发明实施例中，上述第三区域包括默认选项和操作提示图标，该默认选项为预先设置的选项，若该默认选项为用户的目标选项时，用户无需再进行第一操作，即当前WebApp界面(即第一WebApp界面)即为用户的目标WebApp界面，也就是说，第一WebApp界面中的对象就是目标对象；若该默认选项不是用户的目标选项时，用户在该第一WebApp界面上进行第一操作，从而用户可以在终端设备响应该第一操作之后显示的控件上输入目标选项。该操作提示图标用于提示用户在第一WebApp界面上进行第一操作之后，在终端设备响应该第一操作之后显示的控件上输入目标选项的方式。示例性的，第一WebApp界面的第三区域为图4中的(a)所示的10，该第三区域10包括的默认选项为图4中的(b)所示的20，操作提示图标为图4中的(b)所示的21。

可选的，上述操作提示图标可以为根据WebApp的功能设置的提示图标，本发明实施例不作具体限定。示例性的，若该操作提示图标为一支笔的图标时，在第一WebApp界面上进行第一操作之后，可以在终端设备响应该第一操作之后显示的控件上以文字输入的方式输入目标选项；若该操作提示符为麦克风的图标时，在第一WebApp界面上进行第一操作之后，可以在终端设备响应该第一操作之后显示的控件上以语音输入的方式输入目标选项。

上述第三区域可以为第一WebApp界面上预定义的区域，具体可以根据实际使用需求确定，本发明实施例不作具体限定。

S102、终端设备响应于第一操作，在第一WebApp界面的第一区域显示第一控件，且第一WebApp界面中的第一内容保持第一布局。

可选的，本发明实施例中，第一控件包括软键盘，该第一控件还可以为其他控件，例如用户选择时间的控件，或者为用户选择地点等控件等，具体的，不同的WebApp向用户提供不同的功能，则在WebApp界面上显示的第一控件为不同功能对应的控件，本发明实施例不作具体限定。

上述第一WebApp界面的第一区域可以为第一WebApp界面上预定义的区域，例如可以为第一WebApp界面底端部分区域，具体可以根据实际使用需求确定，本发明实施例不作限定。

示例性的，上述方法可以应用于终端设备通过WebApp为某一设备(例如电视机)设置屏保图片或者开机图片的过程中，终端设备显示第一WebApp界面之后，用户进行相关操作之后，可以选取该终端设备的本地图片，将其设置为该电视机的屏保图片或者开机图片，其中，第一WebApp界面可以为如图5中的(a)所示的界面，用户点击(即上述第一操作)该第一WebApp界面的第三区域10之后，该终端设备响应该点击操作，如图5中的(b)所示，在第一WebApp界面的第一区域显示软键盘30(即第一控件)，如此，用户可以通过软键盘输入目标相册的名称(即目标选项)，从而在目标相册内选择图片设置为电视机的屏保图片或者开机图片。

可选的，本发明实施例中，终端设备响应第一操作，还可以在第一WebApp界面的第三区域显示输入框，该输入框用于显示用户输入的目标选项，如图5中的(b)，上述用户点击第一WebApp界面的第三区域之后，在该第一WebApp的第三区域显示输入框31，该输入框内显示用户通过软键盘30输入的文字、字母或数字。

综上，结合图5，终端设备响应于第一操作，在第一WebApp界面的第一区域显示第一控件时，第一WebApp界面的第一内容的布局未改变，即第一WebApp界面的第一内容仍保持第一布局，可见在第一WebApp界面上显示第一控件时，该第一WebApp界面未发生闪烁的现象，如此能够提高用户的体验。

可选的，结合图2，如图6所示，在上述S102之后，本发明实施例提供的WebApp界面的显示方法还包括S103-S104：

S103、终端设备检测到终端设备的显示状态由竖屏显示状态变为横屏显示状态。

本发明实施例中，终端设备可以持续监测终端设备的显示状态，在第一WebApp界面的第一区域显示第一控件之后，若终端设备检测到终端设备的显示状态由竖屏显示状态变为横屏显示状态时，终端设备确定需改变WebApp界面的布局。

S104、终端设备显示第二WebApp界面，以及在第二WebApp界面的第二区域显示第一控件，其中，第二WebApp界面包括与第一布局不同的第二布局的第一内容。

该第一布局指的是终端设备处于竖屏显示状态时，第一WebApp界面的内容(即第一内容)在终端设备的显示屏中的布局。

本发明实施例中，第二WebApp界面包括第二布局的第一内容，该第二布局指的是终端设备处于横屏显示状态时，上述第一内容在终端设备的显示屏中的布局。

本发明实施例中，终端设备在第一WebApp界面的第一区域显示第一控件时，该终端设备处于竖屏显示状态，第一WebApp界面中的第一内容为第一布局的状态，用户在第一WebApp界面第一区域上的第一控件上输入目标选项的过程中，若终端设备检测到该终端设备的显示状态由竖屏显示状态变为横屏显示状态，则终端设备显示第二WebApp界面，以及在该第二WebApp界面的第二区域显示第一控件，该第二WebApp界面包括的内容与第一WebApp界面包括的内容相同(均为第一内容)，区别在于第一内容在第一WebApp界面中的布局为第一布局，在第二WebApp界面中的布局为第二布局。

需要说明的是，本发明实施例中，在第一WebApp界面上显示的第一控件与在第二WebApp界面上显示的第一控件的布局不同，第一WebApp界面上显示的第一控件与第一WebApp界面对应的终端设备的显示状态对应，第二WebApp界面上显示的第一控件与第二WebApp界面对应的终端设备的显示状态对应。

示例性的，图7中的(a)为第一WebApp界面的第一区域显示第一控件(该第一控件软键盘30)的示意图，在软键盘盘30上输入目标选项的过程中，终端设备的显示状态发生变化，例如用户将该终端设备从竖屏显示状态沿逆时针旋转90度，该终端设备的显示状态变为横屏显示状态，此时，终端设备的显示界面会发生变化，如图7中的(b)所示为终端设备的显示状态由竖屏显示状态变为横屏显示状态之后，显示第二WebApp界面，以及在第二WebApp界面的第二区域显示第一控件(该第一控件为软键盘40)的示意图。

可选的，本发明实施例中，上述终端设备接收用户在第一WebApp界面上的第一操作之前，本发明实施例提供的显示方法WebApp界面的还可以包括S105：

S105、接收用户的第三操作，该第三操作为用户选择需要改变WebApp界面的显示布局的操作。

本发明实施例中，终端设备具有可设置WebApp界面的显示布局的功能，示例性的，如图8所示，在终端设备的设置菜单中，该设置菜单中包括显示布局选项，如图8中的(a)，用户选择显示布局选项之后，可在提示框内选择是否需要改变WebApp界面的显示布局，用户点击“是”(即第三操作)，如图8中的(b)，如此，终端设备在显示WebApp界面时，可根据终端设备的显示状态，按照与终端设备的显示状态对应的布局显示WebApp界面。

本发明实施例提供的WebApp界面的显示方法，在终端设备处于竖屏显示状态时，并且该终端设备显示第一WebApp界面，该第一WebApp界面包括第一布局的第一内容，该终端设备接收用户在第一WebApp界面上的第一操作之后，由于响应于该第一操作，可以在第一WebApp界面的第一区域显示第一控件，且该第一WebApp界面中的第一内容保持第一布局，即终端设备响应于第一操作显示第一控件时，第一WebApp界面的布局不会发生变化，如此，能够解决用户使用终端设备访问WebApp的过程中WebApp界面发生闪烁的问题，可以提高用户的体验。

如图9所示，本发明实施例提供一种WebApp界面的显示方法，该方法应用于终端设备，该终端设备当前处于竖屏显示状态，且显示第一WebApp界面，第一WebApp界面当前的宽度和高度分别为第一宽度值、第一高度值，该方法可以包括下述S201-S202：

S201、监听第一WebApp界面的显示尺寸是否变化。

其中，显示尺寸包括第一WebApp界面的宽度和高度，第一WebApp界面包括第一布局的第一内容。

本发明实施例中，终端设备可以持续监听第一WebApp界面的显示尺寸是否发生变化，以根据第一WebApp界面的显示尺寸的变化调整WebApp界面的内容的布局。

S202、若第一WebApp界面的宽度不变，第一WebApp界面的高度小于第一高度值，则确定在第一WebApp界面的第一区域显示第一控件，且第一WebApp界面中的第一内容保持第一布局。

本发明实施例中，用户在终端设备的显示屏上进行了相关操作，终端设备检测到第一WebApp界面的显示尺寸发生了变化，并且第一WebApp界面的宽度不变，第一WebApp界面的高度小于第一高度值，说明终端设备仍然处于竖屏显示状态，且用户在第一WebApp界面上有触发显示第一控件的操作，在这种情况下，终端确定在第一WebApp界面的第一区域显示该第一控件，并且第一WebApp界面的第一内容保持第一布局，从而终端设备按照该显示方式，在不改变该第一WebApp界面的第一内容的布局的情况下，在第一WebApp界面的第一区域显示第一控件。

对于第一控件的描述可以参见上述实施例的相关描述，此处不再赘述。

本发明实施例提供的WebApp界面的显示方法，在终端设备处于竖屏显示状态时，并且该终端设备显示第一WebApp界面，该第一WebApp界面包括第一布局的第一内容，该第一WebApp界面当前的宽度和高度分别为第一宽度值、第一高度值，由于当终端设备监听到第一WebApp界面的显示尺寸发生变化时，具体的，当第一WebApp界面的宽度不变，第一WebApp界面的高度小于第一高度值，确定在该第一WebApp界面的第一区域显示第一控件，且第一WebApp界面中的第一内容保持上述第一布局，即终端设备可以确定在显示第一控件时，第一WebApp界面的布局不会发生变化，如此，能够解决用户使用终端设备访问WebApp的过程中WebApp界面发生闪烁的问题，可以提高用户的体验。

可选的，结合图9，如图10所示，在上述S202之后，本发明实施例提供的WebApp界面的显示方法还包括S203：

S203、若监听到第一WebApp界面的宽度等于第二宽度值，第一WebApp界面的高度小于第二高度值，则确定显示第二WebApp界面，以及在第二WebApp界面的第二区域显示第一控件；其中，第二WebApp界面包括与第一布局不同的第二布局的第一内容。

本发明实施例中，终端设备确定在第一WebApp界面的第一区域显示第一控件之后，若终端设备下一次监听到第一WebApp界面的显示尺寸发生变化，即监听到第一WebApp界面的宽度等于第二宽度值，第一WebApp界面的高度小于第二高度值，说明终端设备由竖屏显示状态变为横屏显示状态，在这种情况下，终端设备确定需显示与横屏显示状态对应的包括第一内容的第二WebApp界面，以及在该第二WebApp界面的第二区域显示第一控件，从而终端设备可以按照该显示方式，显示对应的界面。

如图11所示，本发明实施例提供一种终端设备，该终端设备当前处于竖屏显示状态，并且显示第一WebApp界面，该第一WebApp界面包括第一布局的第一内容，该终端设备包括接收模块10和显示模块11。接收模块10，用于接收用户在第一WebApp界面上的第一操作，该第一操作用于指示终端设备显示第一控件；显示模块11，用于响应于接收模块10接收的第一操作，在第一WebApp界面的第一区域显示第一控件，且该第一WebApp界面中的第一内容保持第一布局。

可选的，如图11所示，该终端设备还包括检测模块12，检测模块12，用于在显示模块11在第一WebApp界面的第一区域显示第一控件之后，检测到终端设备的显示状态由竖屏显示状态变为横屏显示状态；显示模块11，还用于显示第二WebApp界面，以及在该第二WebApp界面的第二区域显示第一控件，第二WebApp界面包括与第一布局不同的第二布局的第一内容。

可选的，接收模块10，还用于在接收用户在第一WebApp界面上的第一操作之前，接收用户的第三操作，该第三操作为用户选择需要改变WebApp界面的显示布局的操作。

本发明实施例提供的终端设备能够实现上述方法实施例中的图2至图8任意之一所示的终端设备实现的各个过程，为避免重复，这里不再赘述。

如图12所示，本发明实施例提供一种终端设备，该终端设备当前处于竖屏显示状态，并且显示第一WebApp界面，该第一WebApp界面包括第一布局的第一内容，第一WebApp界面当前的宽度和高度分别为第一宽度值、第一高度值，该终端设备可以包括监听模块20和确定模块21。其中，监听模块20，用于第一WebApp界面的显示尺寸是否变化，该显示尺寸包括第一WebApp界面的宽度和高度；确定模块21，用于若第一WebApp界面的宽度不变，第一WebApp界面的高度小于第一高度值，则确定在第一WebApp界面的第一区域显示第一控件，且第一WebApp界面中的第一内容保持第一布局。

可选的，上述确定模块21，还可以用于若监听模块20监听到第一WebApp界面的宽度等于第二宽度值，第一WebApp界面的高度小于第二高度值，则确定显示第二WebApp界面，以及在第二WebApp界面的第二区域显示第一控件；其中，第二WebApp界面包括与第一布局不同的第二布局的第一内容。

本发明实施例提供的终端设备能够实现上述方法实施例中的图9或图10所示的终端设备实现的各个过程，为避免重复，这里不再赘述。

图13为实现本发明各个实施例的一种终端设备100的硬件结构示意图。如图13所示，终端设备100包括但不限于：射频单元101、网络模块102、音频输出单元103、输入单元104、传感器105、显示单元106、用户输入单元107、接口单元108、存储器109、处理器110、以及电源111等部件。本领域技术人员可以理解，图13中示出的终端设备100结构并不构成对终端设备的限定，终端设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。在本发明实施例中，终端设备100包括但不限于手机、平板电脑、笔记本电脑、掌上电脑、车载终端、可穿戴设备、UMPC、上网本、PDA、PC、TV、柜员机或者自助机等等。

其中，用户输入单元107，用于接收用户在第一WebApp界面上的第一操作，该第一操作用于指示终端设备显示第一控件；显示单元106，用于响应于用户输入单元107接收的该第一操作，在第一WebApp界面的第一区域显示第一控件。

应理解的是，本发明实施例中，射频单元101可用于收发信息或通话过程中，信号的接收和发送，具体的，将来自基站的下行数据接收后，给处理器110处理；另外，将上行的数据发送给基站。通常，射频单元101包括但不限于天线、至少一个放大器、收发信机、耦合器、低噪声放大器、双工器等。此外，射频单元101还可以通过无线通信系统与网络和其他设备通信。

终端设备100通过网络模块102为用户提供了无线的宽带互联网访问，如帮助用户收发电子邮件、浏览网页和访问流式媒体等。

音频输出单元103可以将射频单元101或网络模块102接收的或者在存储器109中存储的音频数据转换成音频信号并且输出为声音。而且，音频输出单元103还可以提供与终端设备100执行的特定功能相关的音频输出(例如，呼叫信号接收声音、消息接收声音等等)。音频输出单元103包括扬声器、蜂鸣器以及受话器等。

输入单元104用于接收音频或视频信号。输入单元104可以包括图形处理器(Graphics Processing Unit，GPU)1041和麦克风1042，图形处理器1041对在视频捕获模式或图像捕获模式中由图像捕获装置(如摄像头)获得的静态图片或视频的图像数据进行处理。处理后的图像帧可以显示在显示单元106上。经图形处理器1041处理后的图像帧可以存储在存储器109(或其它存储介质)中或者经由射频单元101或网络模块102进行发送。麦克风1042可以接收声音，并且能够将这样的声音处理为音频数据。处理后的音频数据可以在电话通话模式的情况下转换为可经由射频单元101发送到移动通信基站的格式输出。

终端设备100还包括至少一种传感器105，比如光传感器、运动传感器以及其他传感器。具体地，光传感器包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板1061的亮度，接近传感器可在终端设备100移动到耳边时，关闭显示面板1061和/或背光。作为运动传感器的一种，加速计传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别终端设备100姿态(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；传感器105还可以包括指纹传感器、压力传感器、虹膜传感器、分子传感器、陀螺仪、气压计、湿度计、温度计、红外线传感器等，在此不再赘述。

显示单元106用于显示由用户输入的信息或提供给用户的信息。显示单元106可包括显示面板1061，可以采用液晶显示器(Liquid Crystal Display，LCD)、有机发光二极管(Organic Light-Emitting Diode，OLED)等形式来配置显示面板1061。

用户输入单元107可用于接收输入的数字或字符信息，以及产生与终端设备100的用户设置以及功能控制有关的键信号输入。具体地，用户输入单元107包括触控面板1071以及其他输入设备1072。触控面板1071，也称为触摸屏，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板1071上或在触控面板1071附近的操作)。触控面板1071可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器110，接收处理器110发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触控面板1071。除了触控面板1071，用户输入单元107还可以包括其他输入设备1072。具体地，其他输入设备1072可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆，在此不再赘述。

进一步的，触控面板1071可覆盖在显示面板1061上，当触控面板1071检测到在其上或附近的触摸操作后，传送给处理器110以确定触摸事件的类型，随后处理器110根据触摸事件的类型在显示面板1061上提供相应的视觉输出。虽然在图11中，触控面板1071与显示面板1061是作为两个独立的部件来实现终端设备100的输入和输出功能，但是在某些实施例中，可以将触控面板1071与显示面板1061集成而实现终端设备100的输入和输出功能，具体此处不做限定。

接口单元108为外部装置与终端设备100连接的接口。例如，外部装置可以包括有线或无线头戴式耳机端口、外部电源(或电池充电器)端口、有线或无线数据端口、存储卡端口、用于连接具有识别模块的装置的端口、音频输入/输出(I/O)端口、视频I/O端口、耳机端口等等。接口单元108可以用于接收来自外部装置的输入(例如，数据信息、电力等等)并且将接收到的输入传输到终端设备100内的一个或多个元件或者可以用于在终端设备100和外部装置之间传输数据。

存储器109可用于存储软件程序以及各种数据。存储器109可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器109可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

处理器110是终端设备100的控制中心，利用各种接口和线路连接整个终端设备100的各个部分，通过运行或执行存储在存储器109内的软件程序和/或模块，以及调用存储在存储器109内的数据，执行终端设备100的各种功能和处理数据，从而对终端设备100进行整体监控。处理器110可包括一个或多个处理单元；可选的，处理器110可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器110中。

终端设备100还可以包括给各个部件供电的电源111(比如电池)，可选的，电源111可以通过电源管理系统与处理器110逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。

另外，终端设备100包括一些未示出的功能模块，在此不再赘述。

可选的，本发明实施例还提供一种终端设备，该终端设备可以包括上述如图11所示的处理器110，存储器109，以及存储在存储器109上并可在处理器110上运行的计算机程序，该计算机程序被处理器110执行时实现上述方法实施例中的图2至图11任意之一所示的终端设备实现的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。

本发明实施例还提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述方法实施例中的图2至图8任意之一所示的终端设备实现的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。其中，该计算机可读存储介质，如只读存储器(Read-Only Memory，ROM)、随机存取存储器(RandomAccess Memory，RAM)、磁碟或者光盘等。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。

上面结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本发明的保护之内。

Claims (10)

1.一种WebApp界面的显示方法，应用于终端设备，所述终端设备当前处于竖屏显示状态，且显示第一WebApp界面，所述第一WebApp界面包括第一布局的第一内容，其特征在于，所述方法包括：

接收用户在所述第一WebApp界面上的第一操作，所述第一操作用于指示所述终端设备显示第一控件；

响应于所述第一操作，在所述第一WebApp界面的第一区域显示第一控件，且所述第一WebApp界面中的第一内容保持所述第一布局。

2.根据权利要求1所述的方法，其特征在于，所述第一控件包括软键盘。

3.根据权利要求1或2所述的方法，其特征在于，所述第一操作为在所述第一WebApp界面的第三区域上的触屏操作，或者在所述第一WebApp界面的第三区域上的重力操作，或者在所述第一WebApp界面的第三区域上的指纹操作，所述第三区域包括默认选项和操作提示图标。

4.根据权利要求1所述的方法，其特征在于，在所述第一WebApp界面的第一区域显示第一控件之后，所述方法还包括：

检测到所述终端设备的显示状态由竖屏显示状态变为横屏显示状态；

显示第二WebApp界面，以及在所述第二WebApp界面的第二区域显示所述第一控件；其中，所述第二WebApp界面包括与所述第一布局不同的第二布局的第一内容。

5.根据权利要求1所述的方法，其特征在于，所述接收用户在所述第一WebApp界面上的第一操作之前，所述方法还包括：

接收用户的第三操作，所述第三操作为用户选择需要改变WebApp界面的显示布局的操作。

6.一种Webapp界面的显示方法，应用于终端设备，所述终端设备当前处于竖屏显示状态，且显示第一WebApp界面，所述第一WebApp界面包括第一布局的第一内容，所述第一WebApp界面当前的宽度和高度分别为第一宽度值、第一高度值，其特征在于，所述方法包括：

监听所述第一WebApp界面的显示尺寸是否变化，所述显示尺寸包括所述第一WebApp界面的宽度和高度；

若所述第一WebApp界面的宽度不变，所述第一WebApp界面的高度小于所述第一高度值，则确定在所述第一WebApp界面的第一区域显示第一控件，且所述第一WebApp界面中的第一内容保持所述第一布局。

7.根据权利要求6所述的方法，其特征在于，所述第一控件包括软键盘。

8.根据权利要求6或7所述的方法，其特征在于，确定在所述第一WebApp界面的第一区域显示第一控件之后，所述方法还包括：

若监听到所述第一WebApp界面的宽度等于第二宽度值，所述第一WebApp界面的高度小于第二高度值，则确定显示第二WebApp界面，以及在所述第二WebApp界面的第二区域显示所述第一控件；其中，所述第二WebApp界面包括与所述第一布局不同的第二布局的第一内容，所述第二宽度值和所述第二高度值为所述终端设备的显示状态为横屏显示状态时对应的所述第二WebApp界面的宽度和高度。

9.一种终端设备，其特征在于，所述终端设备包括：处理器、存储器、显示器、通信接口和通信总线；

所述处理器与所述存储器、所述显示器、所述通信接口通过所述通信总线连接，所述存储器用于存储计算机执行指令，当所述终端设备运行时，所述处理器执行所述存储器存储的所述计算机执行指令，以使所述终端执行如权利要求1至5中任一项或者如权利要求6至8中任一项所述的方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如权利要求1至5中任一项或者如权利要求6至8中任一项所述的WebApp界面的显示方法。