CN105335295A - 响应式布局界面的测试方法、系统及浏览器 - Google Patents

Abstract

本发明提供一种响应式布局界面的测试方法、测试系统及浏览器，该测试方法包括：S1、接收用户的测试指令；S2、调用javascript脚本基于测试指令获取用户选择的屏幕分辨率；S3、调用javascript脚本打开与用户所选择的屏幕分辨率对应的窗口，并接收用户基于对应的窗口输入的设置信息；S4、测试对应的窗口所显示界面的显示效果。本发明中，基于javascript脚本来打开不同屏幕分辨率对应的界面，在该窗口中显示在该屏幕分辨率下的响应式布局界面的效果，并进行相应的显示效果测试，由于javascript脚本可响应用户的各种操作，因此更易于实现，提高测试效率。

Description

响应式布局界面的测试方法、系统及浏览器

技术领域

本发明涉及一种界面布局显示领域，特别是涉及一种响应式布局界面的测试方法、系统及浏览器。

背景技术

随着无线通讯技术和计算机技术的不断发展，上网设备已经不仅仅是个人电脑，小到眼镜、手表，大到电视、冰箱都可以上网，上网设备显示屏物理尺寸不同，输入模式不同，操作系统不同，浏览器内核及版本不同，导致不一致的窗口宽度、屏幕分辨率、用户参数和用户字体。

目前，Web网页设计中普遍使用固定宽度(如960像素)为所有终端用户提供一致的用户界面，在显示屏分辨率趋于一致时显示很好，但在大尺寸高分辨率显示器上会显示高达50％空白区域，而在移动终端上页面大小不能匹配终端屏幕大小，页面布局不能适应性调整，无法按100％比例显示页面宽度，出现水平滚动条，寻求标准分辨率越来越困难，因此需要一种可测试不同分辨率下的显示效果来判断是否与终端匹配的方法。

响应式布局是个新的概念，其可实现一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本，响应式布局可为不同终端的用户提供更加舒适的界面和更好的用户体验。

现有的兼容性测试方法中，利用视图布局样式中预设的组件类名命名待展示页面中各元素的类属性；在不同系统环境不同浏览器平台下展示待展示页面；检查待展示页面展示效果，但此方法需要在不同的设备上查看最终显示的效果，操作比较麻烦，而且不能测试除现有测试设备屏幕分辨率外的其他屏幕分辨率下的界面显示效果，具有一定的局限性。

发明内容

鉴于以上所述现有技术的缺点，本发明的目的在于提供一种响应式布局界面的测试方法、系统及浏览器，用于解决现有技术中在测试过程中需要在不同设备上测试显示效果的问题。

为实现上述目的及其他相关目的，本发明提供一种响应式布局界面的测试方法，所述测试方法包括：S1、接收用户的测试指令；S2、调用javascript脚本基于所述测试指令获取用户选择的屏幕分辨率；S3、调用javascript脚本打开与用户所选择的屏幕分辨率对应的窗口，并接收用户基于所述对应的窗口输入的设置信息，所述设置信息包括与所选择的屏幕分辨率对应的页面地址；S4、测试所述对应的窗口所显示界面的显示效果。

于本发明的一实施方式中，所述步骤S2具体包括：S21、分析所述测试指令，判断所述测试指令是否携带从预存屏幕分辨率中选择屏幕分辨率的信息，当判断为是转到步骤S22，当判断为否时转到步骤S23；S22、调用所述javascript脚本从预存的屏幕分辨率中获取与所述测试指令对应的屏幕分辨率；S23、调用所述javascript脚本接收用户的输入信息，从所述输入信息中获取所述用户选择的屏幕分辨率。

于本发明的一实施方式中，所述步骤S23具体包括：S231、向用户反馈对话框，以供用户基于所述对话框输入屏幕分辨率；S232、接收用户反馈的输入信息；S233、调用javascript脚本从所述输入信息中获取所述用户选择的屏幕分辨率，并基于所获取的屏幕分辨率的屏幕高度及宽度赋值给javascript变量。

于本发明的一实施方式中，所述步骤S1之前还包括：S0、在所述响应式布局界面所在浏览器的操作界面上设置分辨率按钮，所述分辨率按钮包括自定义屏幕分辨率按钮及一组设定屏幕分辨率按钮，所述一组设定屏幕分辨率按钮的每个按钮对应一个屏幕分辨率。

于本发明的一实施方式中，所述步骤S21具体为：分析所述测试指令，判断用户点击的是否为所述一组设定屏幕分辨率按钮的一个，当判断为是则认为所述测试指令携带从预存屏幕分辨率中选择屏幕分辨率的信息，转到所述步骤S22，否则转到所述步骤S23。

于本发明的一实施方式中，所述步骤S22具体包括：S221、根据所述测试指令获得对应的按钮信息；S222、调用所述javascript脚本基于所述按钮信息从预存的屏幕分辨率中获得对应的屏幕分辨率；S223、调用所述javascript脚本基于所获得的屏幕分辨率获取对应的屏幕宽度及高度，将所述屏幕宽度及高度赋值给javascript变量。

于本发明的一实施方式中，所述步骤S3具体包括：S31、调用javascript脚本从所述javascript变量中获得所述用户选择的屏幕分辨率对应的屏幕高度及宽度；S32、基于所获得的屏幕高度及宽度打开对应的窗口；S33、接收用户基于所述对应的窗口输入的设置信息；S34、在所述对应的窗口中显示与所述用户选择的屏幕分辨率对应的界面。

于本发明的一实施方式中，所述设置信息还包括：赋予所述待对应的窗口可通过拖曳来修改其屏幕分辨率的属性，所述步骤S4之后还包括：S5、接收用户的修改指令，所述修改指令为用户用手指拖曳当前打开的窗口而发送；S6、调用所述javascript脚本获取用户停止拖曳时的窗口对应的屏幕高度及宽度，并基于当前获取的屏幕高度及宽度在当前窗口显示对应的界面，接着转到所述步骤S4。

本发明还提供一种响应式布局界面的测试系统，所述测试系统包括：测试指令接收模块，用于接收用户的测试指令；与所述测试指令接收模块连接的获取模块，用于基于所述测试指令获取用户选择的屏幕分辨率；与所述获取模块连接的窗口打开模块，用于调用javascript脚本打开与用户所选择的屏幕分辨率对应的窗口，并接收用户基于所述对应的窗口输入的设置信息，所述设置信息包括所选择的屏幕分辨率对应的页面地址；与所述窗口打开模块连接的测试模块，用于测试所述对应的窗口所显示界面的显示效果。

本发明还提供一种浏览器，包括一种响应式布局界面的测试系统，该测试系统包括：测试指令接收模块，用于接收用户的测试指令；与所述测试指令接收模块连接的获取模块，用于基于所述测试指令获取用户选择的屏幕分辨率；与所述获取模块连接的窗口打开模块，用于调用javascript脚本打开与用户所选择的屏幕分辨率对应的窗口，并接收用户基于所述对应的窗口输入的设置信息，所述设置信息包括所选择的屏幕分辨率对应的页面地址；与所述窗口打开模块连接的测试模块，用于测试所述对应的窗口所显示界面的显示效果。

本发明的一种响应式布局界面的测试方法、系统及浏览器，至少具有以下有益效果：

首先，调用javascript脚本来执行基于用户的操作获取对应屏幕分辨率，及基于该屏幕分辨率的相关数据打开对应的窗口，而javascript脚本可响应用户的各种操作，因此灵活性强，易于实现，提高测试效率。

此外，用户可在一个浏览器上选择输入屏幕分辨率的方式，并且可根据实际需求选择输入需要测试的屏幕分辨率的显示效果，无需使用多个浏览器测试不同屏幕分辨率显示效果，操作简单，满足不同用户的实际需求。

再者，可精确设置屏幕分辨率，提高测试效率。可根据需求微调显示效果，并测试该显示效果，可一定程度上优化显示界面的显示效果。

附图说明

图1是本发明的一种响应式布局界面的测试方法一实施例的流程图。

图2是本发明的一种响应式布局界面的测试方法的步骤S2的具体流程图。

图3是本发明的一种响应式布局界面的测试方法的步骤S23的具体流程图。

图4是本发明的一种响应式布局界面的测试方法的步骤S22的具体流程图。

图5是本发明的一种响应式布局界面的测试方法的步骤S3的具体流程图。

图6是本发明的一种响应式布局界面的测试方法的一优选实施例的具体流程图。

图7是本发明的一种响应式布局界面的测试系统一实施例的结构示意图。

图8是本发明的一种响应式布局界面的测试系统的屏幕分辨率获取模块2的结构示意图。

图9是本发明的一种响应式布局界面的测试系统的第一屏幕分辨率获取单元22的结构示意图。

图10是本发明的一种响应式布局界面的测试系统的第二屏幕分辨率获取单元23的结构示意图。

图11是本发明的一种响应式布局界面的测试系统的控制模块3的具体结构示意图。

元件标号说明：

0按钮设置模块

1测试指令接收模块

2屏幕分辨率获取模块

21判断单元

22第一屏幕分辨率获取单元

221按钮信息获取子单元

222第一屏幕分辨率获取子单元

23第二屏幕分辨率获取单元

231对话框反馈子单元

232接收子单元

233第二屏幕分辨率获取子单元

3控制模块

31调用单元

32窗口控制单元

33设置信息接收单元

34显示控制单元

4测试模块

S1～S233步骤

具体实施方式

以下通过特定的具体实例说明本发明的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本发明的其他优点与功效。本发明还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本发明的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。

需要说明的是，以下实施例中所提供的图示仅以示意方式说明本发明的基本构想，遂图式中仅显示与本发明中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制，其实际实施时各组件的型态、数量及比例可为一种随意的改变，且其组件布局型态也可能更为复杂。

实施例1

请参阅图1，为本发明的一种响应式布局界面的测试方法一实施例的流程图，其中该调整方法包括：

步骤S1、接收用户的测试指令。

其中，启动浏览器后，开始测试时，用户需要发送测试指令，具体可通过按钮或输入等方式发送测试指令，此处对此不作限制，该浏览器包括有响应式布局界面，而该测试指令携带需要测试屏幕分辨率对应界面的相关数据，便于后续基于该屏幕分辨率打开对应的界面进行测试。进一步地，用户可在浏览器的操作界面上发送测试指令，而该操作界面可为该响应式布局界面中的某个区域，也可以是边界区域，此处对此不作限制。

步骤S2、调用javascript脚本基于测试指令获取用户选择的屏幕分辨率。

具体地，对用户的测试指令进行分析，调用浏览器的javascript脚本来获得用户选择的屏幕分辨率，该屏幕分辨率即为用户需要测试界面的屏幕分辨率。具体地，获取屏幕分辨率对应的屏幕高度及宽度值。

步骤S3、调用javascript脚本打开与用户所选择的屏幕分辨率对应的窗口，并接收用户基于对应的窗口输入的设置信息。

本实施例中，从javascript变量中获取用户选择的屏幕分辨率对应的屏幕高度及宽度，调用javascript脚本打开与上述屏幕分辨率对应的窗口，其中JavaScript脚本是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，可响应用户的各种操作。利用该javascript脚本来执行打开对应的窗口(界面)，灵活性更好，容易实现。进一步地，该设置信息包括与所选择的屏幕分辨率对应的页面地址、窗口显示的位置、窗口是否可调、是否设置滚动条来调整界面等属性，用户可根据实际需求，或者根据需要检测的网页终端的而设置，此处对此不作限制。

步骤S4、测试该对应的窗口所显示界面的显示效果。

当打开该对应窗口时，根据用户的设置信息及选择的屏幕分辨率来显示界面，并测试显示效果。进一步地，可输出该测试结果。接着转到步骤S1，接收用户的携带另一个屏幕分辨率的测试指令，继续进行对应窗口显示的界面的测试，直到将所有需要测试的界面测试完毕。

于本发明的一实施方式中，在本实施例中，在开始测试之前，还包括：

步骤S0、在响应式布局界面所在浏览器的操作界面上设置分辨率按钮。

其中，在浏览器的操作界面上预设分辨率按钮，该分辨率按钮包括自定义屏幕分辨率按钮及一组设定屏幕分辨率按钮，上述一组设定屏幕分辨率按钮的每个按钮对应一个屏幕分辨率。该自定义屏幕分辨率按钮表示手动输入屏幕分辨率，该一组设定屏幕分辨率按钮表示从预存的屏幕分辨率中选择屏幕分辨率。进一步地，可对一组按钮的每个按钮分别设置不同的标识代表对应不同的屏幕分辨率，便于用户选择。该屏幕分辨率信息包括对应的屏幕分辨率，该屏幕分辨率包括对应窗口的宽度及高度的数值信息。

本实施例中，该响应式布局界面上还设置有自定义屏幕分辨率按钮，供用户选择输入屏幕分辨率进行测试，用户可点击该按钮设置自己需要测试的界面对应的屏幕分辨率，实用性强，可满足不同用户的需求。

本实施例中，在一个浏览器上，基于javascript脚本来打开不同屏幕分辨率对应的界面，在该窗口中显示在该屏幕分辨率下的响应式布局界面的效果，并进行相应的显示效果测试，由于javascript脚本可响应用户的各种操作，因此更易于实现，提高测试效率。

本实施例中，如图2所示，为本发明的一种响应式布局界面的测试方法的步骤S2的具体流程图，包括：

步骤S21、分析所接收的测试指令，判断测试指令是否携带从预存屏幕分辨率中选择屏幕分辨率的信息，当判断为是转到步骤S22，当判断为否转到步骤S23。

具体地，分析所接收的测试指令，当测试指令携带有从预存的屏幕分辨率中选择屏幕分辨率的信息时，转到步骤S22，否则转到步骤S23，根据用户的实际需求选择输入测试的屏幕分辨率的方式，由于预存的屏幕分辨率不一定是用户所需要测试的屏幕分辨率，采用上述方式的实用性强，灵活性更强。

进一步地，在浏览器的操作界面上预设自定义屏幕分辨率按钮及一组设定屏幕分辨率按钮时，该步骤S21中，分析测试指令，判断用户点击的是否为一组设定屏幕分辨率按钮的一个，当判断为是则认为测试指令携带从预存屏幕分辨率中选择屏幕分辨率的信息，转到上述步骤S22，否则转到上述步骤S23。

本实施例中，用户可选择输入需要测试的屏幕分辨率(即自定义)，或者在浏览器所在操作界面上选择需要测试的屏幕分辨率，当用户选择输入屏幕分辨率时，该测试指令自然不携带从预设屏幕分辨率中选择屏幕分辨率的信息，当用户在该界面上选择时，该测试指令便会携带选择的信息，而用户选择的按钮对应的屏幕分辨率为预设屏幕分辨率中的一个。

具体检测用户的操作为，例如：当用户点击上述一组按钮中的任一个时，确认为用户选择的屏幕分辨率为预设的屏幕分辨率，于是转到上述步骤S22。当用户点击上述自定义分辨率按钮时，确认为不是预设的屏幕分辨率按钮，则转到上述步骤S23。

步骤S22、调用javascript脚本从预存的屏幕分辨率中获取与测试指令对应的屏幕分辨率。

具体地，根据用户所选择的按钮，调用javascript脚本从预存的屏幕分辨率中获取对应的屏幕分辨率的信息，将屏幕分辨率对应的宽度及高度赋值给javascript变量，由该javascript变量存储，以便后续调用更方便、及时地该数据。

步骤S23、调用javascript脚本接收用户的输入信息，从该输入信息中获取用户选择的屏幕分辨率。

具体地，浏览器会向用户发出提示，以提示用户输入屏幕分辨率等相关信息。用户基于该提示输入相关信息后，浏览器便接收到该输入信息。用户可根据需求设置不同的屏幕分辨率进行测试，在同一个浏览器下即可测试不同屏幕分辨率的设备的显示效果，提高测试效率。

具体地，如图3所示，为本发明的一种响应式布局界面的测试方法的步骤S23的具体流程图，包括：

步骤S231、向用户反馈对话框，以供用户基于所述对话框输入屏幕分辨率。

当用户选择上述自定义屏幕分辨率按钮时，浏览器所在界面会给用户反馈一个对话框，该对话框提示用户输入屏幕分辨率的相关信息。

步骤S232、接收用户反馈的设置信息。

用户输入信息后，例如用户可输入屏幕分辨率(具体为屏幕对应的宽度及高度值)等信息。输入完成后点击确认即可，浏览器接收到该输入信息。

步骤S233、调用javascript脚本从所输入信息中获取用户选择的屏幕分辨率，并基于所获取的屏幕分辨率的屏幕高度及宽度赋值给javascript变量。

具体地，调用浏览器的javascript脚本从用户的输入信息中获取对应的屏幕分辨率，并将对应的屏幕高度及宽度赋值给javascript变量，暂存该屏幕高度及宽度，具体地，javascript脚本会启动两个变量，一个为屏幕高度变量，一个为屏幕宽度变量，分别用于存储上述的屏幕分辨率的数据(屏幕高度及宽度值)。

于本发明的一实施方式中，如图4所示，为本发明的一种响应式布局界面的测试方法的步骤S22的具体流程图，该步骤S22具体包括：

步骤S221、根据测试指令获得对应的按钮信息。

具体地，此时用户点击的是一组设定屏幕分辨率按钮的一个按钮，获得该按钮对应的编号或者标识等信息。

步骤S222、调用javascript脚本基于按钮信息从预存的屏幕分辨率中获得对应的屏幕分辨率。

其中，调用javascript脚本根据该按钮的编号或者标识从预存的屏幕分辨率中查找，获得对应的屏幕分辨率。

步骤S223、调用javascript脚本基于所获得的屏幕分辨率获取对应的屏幕宽度及高度，将屏幕宽度及高度赋值给javascript变量。

调用浏览器的javascript脚本来从预存的屏幕分辨率中获取用户所点击的按钮对应的屏幕分辨率，并将对应的屏幕高度及宽度赋值给javascript变量，暂存该屏幕高度及宽度，具体地，javascript脚本会启动两个变量，一个为屏幕高度变量，一个为屏幕宽度变量，分别用于存储上述的屏幕分辨率的数据(屏幕高度及宽度值)。

于本发明的一实施方式中，如图5所示，为本发明的一种响应式布局界面的测试方法的步骤S3的具体流程图，该步骤S3具体包括：

S31、调用javascript脚本从javascript变量中获得用户选择的屏幕分辨率对应的屏幕高度及宽度。

S32、基于所获得的屏幕高度及宽度打开对应的窗口。

S33、接收用户基于对应的窗口输入的设置信息。

S34、在对应的窗口中显示与用户选择的屏幕分辨率对应的界面。

本实施例中，具体地，调用javascript脚本从上述javascript变量中获取对应的屏幕高度及宽度值，并基于所获取的屏幕高度及宽度打开对应大小的窗口，该窗口设置有供用户设置的框，或者在该窗口附近还设有对话框，又或者用户可直接在当前打开的窗口上设置，以供用户设置需要测试的界面对应的信息，例如该屏幕分辨对应的网页地址、对应窗口的显示位置、是否赋予该窗口以拖曳方式修改窗口大小进而修改输入的屏幕分辨率的属性、是否设置滚动条来获得显示内容等相关信息。用户可根据实际需求设置，通常用户会设置赋予该测试窗口以拖曳方式来修改窗口大小进而修改输入的屏幕分辨率的属性，便于在测试过程中，对显示的界面测试效果不满意时，进行微调。当用户设置完毕，点击确认后，javascript脚本会基于用户的设置信息及所获取的屏幕分辨率在当前打开的窗口中显示该屏幕分辨率下的界面的显示效果。

在本实施例的一个优选方案中，当用户设置赋予该测试窗口以拖曳方式来修改窗口大小进而修改输入的屏幕分辨率的属性时，如图6所示，为本发明的一种响应式布局界面的测试方法的一优选实施例的具体流程图，本实施例的步骤S1至S4与图1对应实施例的步骤S1至S4的描述基本一致，本实施例基于图1对应实施例的基础上还包括：即基于上述步骤S4之后还可包括：

S5、接收用户的修改指令，该修改指令为用户用手指拖曳当前打开的窗口而发送。

S6、调用javascript脚本获取用户停止拖曳时的窗口对应的屏幕高度及宽度，并基于当前获取的屏幕高度及宽度在当前窗口显示对应的界面，接着转到所述步骤S4。

具体地，在测试过程中，用户可能会对测试结果不满意或者需要测试其他屏幕分辨率，此时，用户可用手拖曳所显示的窗口，当前显示的窗口大小变化时，视为用户发送的修改指令，表示用户需要修改窗口大小，则监控用户的拖曳过程，在拖曳动作结束时采集对应窗口的数据，并调用javascript脚本打开对应的窗口进行显示，接着转到步骤S4，测试显示效果，当用户还是不满意时，可继续上述操作，直到满意显示效果为止。

进一步地，用户还可以设置滚动条，用户可控制该滚动条动态调整该窗口的屏幕分辨率。

需要说明的是，本实施例对应图6的描述只是其中一个例子而已，还可以在步骤S6即转入到步骤S1继续接收用户的下一个测试指令，或者步骤S6之后停止，表示用户测试完毕。

本实施例中，为了便于理解，下面以用户手动输入为例来描述本发明的具体实现过程，

在响应式布局界面所在浏览器的操作界面上设置分辨率按钮，该分辨率按钮包括自定义屏幕分辨率按钮及一组代表预设屏幕分辨率的按钮。

接收到用户的测试指令。具体地，用户点击浏览器的操作界面的自定义屏幕分辨率按钮时产生一个测试指令。

基于操作界面向用户反馈一个对话框，以供用户基于对话框输入需要的屏幕分辨率。

接收用户反馈的输入信息。

调用javascript脚本从输入信息中获取用户选择的屏幕分辨率，并基于所获取的屏幕分辨率的屏幕高度及宽度赋值给javascript变量。

调用javascript脚本从javascript变量中获得用户选择的屏幕分辨率对应的屏幕高度及宽度。

调用javascript脚本基于所获得的屏幕高度及宽度打开对应的窗口。

接收用户基于所述对应的窗口输入的设置信息。其中，用户可输入屏幕分辨率(具体为屏幕对应的宽度及高度值)、该屏幕分辨对应的网页地址、对应窗口的显示位置、是否赋予该窗口以拖曳方式修改窗口大小进而修改输入的屏幕分辨率的属性、是否设置滚动条等相关信息。用户可根据实际需求设置，通常用户会设置赋予该测试窗口以拖曳方式来修改窗口大小进而修改输入的屏幕分辨率的属性，便于在测试过程中，对显示的界面测试效果不满意时，进行微调。

调用javascript脚本在对应的窗口中显示与用户选择的屏幕分辨率对应的界面。

测试对应的窗口所显示界面的显示效果。当用户对显示效果测试不满意或者需要测试下一个屏幕分辨率对应的显示效果时，则可根据实际情况调整当前打开的窗口或者直接转到接收用户的测试指令步骤，开始下一个屏幕分辨率对应显示效果的测试。

本实施例中，首先是调用javascript脚本来执行基于用户的操作获取对应屏幕分辨率，及基于该屏幕分辨率的相关数据打开对应的窗口，而javascript脚本可响应用户的各种操作，因此灵活性强，易于实现，提高测试效率。

此外，用户可在一个浏览器上选择输入屏幕分辨率的方式，并且可根据实际需求选择输入需要测试的屏幕分辨率的显示效果，无需使用多个浏览器测试不同屏幕分辨率显示效果，操作简单，满足不同用户的实际需求。

再者，可精确设置屏幕分辨率，提高测试效率。可根据需求微调显示效果，并测试该显示效果，可一定程度上优化显示界面的显示效果。

实施例2

基于上述实施例，本发明还提供一种响应式布局界面的测试系统，如图7所示，为本发明的一种响应式布局界面的测试系统一实施例的结构示意图，其中该测试系统包括：测试指令接收模块1及与其连接的屏幕分辨率获取模块2、与该屏幕分辨率获取模块2连接的控制模块3、及与该控制模块3连接的测试模块4。

测试指令接收模块1，用于接收用户的测试指令。

其中，启动浏览器后，开始测试时，用户需要发送测试指令，具体可通过按钮或输入等方式发送测试指令，此处对此不作限制。浏览器设置有响应式布局界面，而该测试指令携带需要测试屏幕分辨率对应界面的相关数据，便于后续基于该屏幕分辨率打开对应的界面进行测试。进一步地，用户可在浏览器的操作界面上发送测试指令，而该操作界面可为该响应式布局界面中的某个区域，也可以是边界区域，此处对此不作限制。

屏幕分辨率获取模块2，用于调用javascript脚本基于测试指令获取用户选择的屏幕分辨率。

具体地，对用户的测试指令进行分析，调用浏览器的javascript脚本获得用户选择的屏幕分辨率，该屏幕分辨率即为用户需要测试界面的屏幕分辨率。具体地，获取屏幕分辨率对应的屏幕高度及宽度值。

控制模块3，用于调用javascript脚本打开与用户所选择的屏幕分辨率对应的窗口，并接收用户基于对应的窗口输入的设置信息。

本实施例中，从javascript变量中获取用户选择的屏幕分辨率对应的屏幕高度及宽度，调用javascript脚本打开与上述屏幕分辨率对应的窗口，其中JavaScript脚本是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，可响应用户的各种操作。利用该javascript脚本来执行打开对应的窗口(界面)，灵活性更好，容易实现。进一步地，该设置信息包括与所选择的屏幕分辨率对应的页面地址、窗口显示的位置、窗口是否可调、是否设置滚动条来调整界面等属性，用户可根据实际需求，或者根据需要检测的终端的浏览器的而设置，此处对此不作限制。

测试模块4，用于测试该对应的窗口所显示界面的显示效果。

当打开该对应窗口时，根据用户的设置信息及选择的屏幕分辨率来显示界面，并测试显示效果。进一步地，可输出该测试结果。当用户需要继续测试时，继续发送测试指令，该测试指令接收模块1继续接收用户的携带另一个屏幕分辨率的测试指令，继续进行对应窗口显示的界面的测试，直到将所有需要测试的界面测试完毕。

于本发明的一实施方式中，该测试系统还可包括：

按钮设置模块0，用于在该响应式布局界面所在浏览器的操作界面上设置分辨率按钮。

其中，在浏览器的操作界面上预设自定义屏幕分辨率按钮及一组设定屏幕分辨率按钮，分辨率按钮包括自定义屏幕分辨率按钮及一组设定屏幕分辨率按钮，上述一组设定屏幕分辨率按钮的每个按钮对应一个屏幕分辨率。该自定义屏幕分辨率按钮表示手动输入屏幕分辨率，该一组设定屏幕分辨率按钮表示从预存的屏幕分辨率中选择屏幕分辨率。进一步地，可对一组按钮的每个按钮分别设置不同的标识代表对应不同的屏幕分辨率，便于用户选择。该屏幕分辨率信息包括对应的屏幕分辨率，该屏幕分辨率包括对应窗口的宽度及高度的数值信息。

本实施例中，该响应式界面上还设置有自定义屏幕分辨率按钮，供用户选择输入屏幕分辨率进行测试，用户可点击该按钮设置自己需要测试的界面对应的屏幕分辨率，实用性强，可满足不同用户的需求。

本实施例中，在一个浏览器上，调用javascript脚本来打开不同屏幕分辨率对应的界面，在该窗口中显示在该屏幕分辨率下的响应式布局界面的效果，并进行相应的显示效果测试，由于javascript脚本可响应用户的各种操作，因此更易于实现，提高测试效率。

如图8所示，为本发明的一种响应式布局界面的测试系统的屏幕分辨率获取模块2的结构示意图，其中该屏幕分辨率获取模块2具体包括：判断单元21、分别与该判断单元21连接的第一屏幕分辨率获取单元22及第二屏幕分辨率获取单元23，其中：

判断单元21，用于分析所接收的测试指令，判断测试指令是否携带从预存屏幕分辨率中选择屏幕分辨率的信息。

本实施例中，用户可选择输入需要测试的屏幕分辨率(即自定义)，或者在浏览器所在操作界面上选择需要测试的屏幕分辨率，当用户选择输入屏幕分辨率时，该测试指令自然不携带从预设屏幕分辨率中选择屏幕分辨率的信息，当用户在该界面上选择时，该测试指令便会携带选择的信息，而用户选择的按钮对应的屏幕分辨率为预设屏幕分辨率中的一个。

第一屏幕分辨率获取单元22,，用于调用javascript脚本从预存的屏幕分辨率中获取与测试指令对应的屏幕分辨率。

具体地，根据用户所选择的按钮，调用javascript脚本从预存的屏幕分辨率中获取对应的屏幕分辨率的信息，将屏幕分辨率对应的宽度及高度赋值给javascript变量，由该javascript变量存储，以便后续调用更方便、及时地该数据。

第二屏幕分辨率获取单元23，用于调用javascript脚本接收用户的输入信息，从该输入信息中获取用户选择的屏幕分辨率。

具体地，浏览器会向用户发出提示，以提示用户输入屏幕分辨率等相关信息。用户基于该提示输入相关信息后，浏览器便接收到该输入信息。用户可根据需求设置不同的屏幕分辨率进行测试，在同一个浏览器下即可测试不同屏幕分辨率的设备的显示效果，提高测试效率。

本实施例中，该判断单元21分析所接收的测试指令，当测试指令携带有从预存的屏幕分辨率中选择屏幕分辨率的信息时，向该第一屏幕分辨率获取单元22反馈，由该第一屏幕分辨率获取单元22获取对应的屏幕分辨率，否则向该第二屏幕分辨率获取单元23反馈，由该第二屏幕分辨率获取单元23获取对应的屏幕分辨率。检测用户的具体操作为，例如：当用户点击上述一组按钮中的任一个时，确认为用户选择的屏幕分辨率为预设的屏幕分辨率，于是反馈给第一屏幕分辨率获取单元22。当用户点击上述自定义分辨率按钮时，确认为不是预设的屏幕分辨率按钮，则反馈给第二屏幕分辨率获取单元23。

在本实施例的一个优选方案中，如图9所示，为本发明的一种响应式布局界面的测试系统的第一屏幕分辨率获取单元22的结构示意图，该第一屏幕分辨率获取单元22具体包括：按钮信息获取子单元221、与该按钮信息获取子单元221连接的第一屏幕分辨率获取子单元222，其中：

按钮信息获取子单元221，用于根据测试指令获得对应的按钮信息。

具体地，此时用户点击的是一组设定屏幕分辨率按钮的一个按钮，获得该按钮对应的编号或者标识等信息。

第一屏幕分辨率获取子单元222，用于调用javascript脚本基于按钮信息从预存的屏幕分辨率中获得对应的屏幕分辨率。并用于调用javascript脚本基于所获得的屏幕分辨率获取对应的屏幕宽度及高度，将屏幕宽度及高度赋值给javascript变量。

具体地，调用javascript脚本来从预存的屏幕分辨率中获取用户所点击的按钮对应的屏幕分辨率，并将对应的屏幕高度及宽度赋值给javascript变量，暂存该屏幕高度及宽度，具体地，javascript脚本会启动两个变量，一个为屏幕高度变量，一个为屏幕宽度变量，分别用于存储上述的屏幕分辨率的数据(屏幕高度及宽度值)。

在本实施例的一个优选方案中，如图10所示，为本发明的一种响应式布局界面的测试系统的第二屏幕分辨率获取单元23的结构示意图，该第二屏幕分辨率获取单元23具体包括：对话框反馈子单元231、与该对话框反馈子单元231连接的接收子单元232、与该接收子单元连接的第二屏幕分辨率获取子单元233。其中：

对话框反馈子单元231，用于向用户反馈对话框，以供用户基于所述对话框输入屏幕分辨率。

当用户选择上述自定义屏幕分辨率按钮时，浏览器所在界面会给用户反馈一个对话框，该对话框提示用户输入屏幕分辨率的相关信息。

接收子单元232，用于接收用户反馈的设置信息。

用户输入信息后，例如用户可输入屏幕分辨率(具体为屏幕对应的宽度及高度值)等信息。输入完成后点击确认即可，浏览器接收到该输入信息。

第二屏幕分辨率获取子单元233，用于调用javascript脚本从所输入信息中获取用户选择的屏幕分辨率，并基于所获取的屏幕分辨率的屏幕高度及宽度赋值给javascript变量。

具体地，调用浏览器的javascript脚本从用户的输入信息中获取对应的屏幕分辨率，并将对应的屏幕高度及宽度赋值给javascript变量，暂存该屏幕高度及宽度，具体地，javascript脚本会启动两个变量，一个为屏幕高度变量，一个为屏幕宽度变量，分别用于存储上述的屏幕分辨率的数据(屏幕高度及宽度值)。

在本实施例的一个优选方案中，如图11所示，为本发明的一种响应式布局界面的测试系统的控制模块3的具体结构示意图，该控制模块3具体包括：调用单元31、与该调用单元31连接的窗口控制单元32、与该窗口控制单元32连接的设置信息接收单元33、及与该设置信息接收单元33连接的显示控制单元34，其中：

调用单元31，用于调用javascript脚本从javascript变量中获得用户选择的屏幕分辨率对应的屏幕高度及宽度。

窗口控制单元32，用于基于所获得的屏幕高度及宽度打开对应的窗口。

设置信息接收单元33，用于接收用户基于对应的窗口输入的设置信息。

显示控制单元34，用于控制在对应的窗口中显示与用户选择的屏幕分辨率对应的界面。

本实施例中，具体地，调用单元31调用javascript脚本从上述调用javascript变量中获取对应的屏幕高度及宽度值，窗口控制单元32基于所获取的屏幕高度及宽度打开对应大小的窗口，该窗口设置有供用户设置的框，或者在该窗口附近还设有对话框，又或者用户可直接在当前打开的窗口上设置，以供用户设置需要测试的界面对应的信息，例如该屏幕分辨对应的网页地址、对应窗口的显示位置、是否赋予该窗口以拖曳方式修改窗口大小进而修改输入的屏幕分辨率的属性、是否设置滚动条来获得显示内容等相关信息。用户可根据实际需求设置，通常用户会设置赋予该测试窗口以拖曳方式来修改窗口大小进而修改输入的屏幕分辨率的属性，便于在测试过程中，对显示的界面测试效果不满意时，进行微调。当用户设置完毕，点击确认后，设置信息接收单元33接收用户的设置信息，该显示控制单元34基于用户的设置信息及所获取的屏幕分辨率控制当前打开的窗口显示该屏幕分辨率下的界面的显示效果。

在本实施例的又一优选方案中，当用户设置赋予该测试窗口以拖曳方式来修改窗口大小进而修改输入的屏幕分辨率的属性时，该测试系统还可包括：修改指令接收模块及与其连接的窗口信息获取模块，其中：

修改指令接收模块，用于接收用户的修改指令，该修改指令为用户用手指拖曳当前打开的窗口而发送

窗口信息获取模块，用于调用javascript脚本获取用户停止拖曳时的窗口对应的屏幕高度及宽度，并基于当前获取的屏幕高度及宽度在当前窗口显示对应的界面，接着转到所述步骤S4。

具体地，在测试过程中，用户可能会对测试结果不满意或者需要测试其他屏幕分辨率，此时，用户可用手拖曳所显示的窗口，当前显示的窗口大小变化时，视为用户发送的修改指令，表示用户需要修改窗口大小，则监控用户的拖曳过程，在拖曳动作结束时采集对应窗口的数据，并调用javascript脚本打开对应的窗口进行显示，接着转到步骤S4，测试显示效果，当用户还是不满意时，可继续上述操作，直到满意显示效果为止。

进一步地，用户还可以设置滚动条，用户可控制该滚动条动态调整该窗口的屏幕分辨率。

本实施例中，首先是调用javascript脚本来执行基于用户的操作获取对应屏幕分辨率，及基于该屏幕分辨率的相关数据打开对应的窗口，而javascript脚本可响应用户的各种操作，因此灵活性强，易于实现，提高测试效率。

此外，用户可在一个浏览器上选择输入屏幕分辨率的方式，并且可根据实际需求选择输入需要测试的屏幕分辨率的显示效果，无需使用多个浏览器测试不同屏幕分辨率显示效果，操作简单，满足不同用户的实际需求。

再者，可精确设置屏幕分辨率，提高测试效率。可根据需求微调显示效果，并测试该显示效果，可一定程度上优化显示界面的显示效果。

基于上述实施例，本发明还提供一种浏览器，该浏览器设置有响应式布局界面，该浏览器包括响应式布局界面的测试系统，该测试系统的具体结构及工作原理与上述实施例的描述基本一致，具体可参照上述实施例的描述，此处不再赘述。

综上所述，本发明中的一种响应式布局界面的测试方法、测试系统及浏览器，调用javascript脚本来执行基于用户的操作获取对应屏幕分辨率，及基于该屏幕分辨率的相关数据打开对应的窗口，而javascript脚本可响应用户的各种操作，因此灵活性强，易于实现，提高测试效率。用户可输入需要的屏幕分辨率，获得对应的测试效果，可满足不同用户的需求，在一个浏览器上实现不同屏幕分辨率对应显示界面的效果测试，简化测试过程，提高测试效率。所以，本发明有效克服了现有技术中的种种缺点而具高度产业利用价值。

上述实施例仅例示性说明本发明的原理及其功效，而非用于限制本发明。任何熟悉此技术的人士皆可在不违背本发明的精神及范畴下，对上述实施例进行修饰或改变。因此，举凡所属技术领域中具有通常知识者在未脱离本发明所揭示的精神与技术思想下所完成的一切等效修饰或改变，仍应由本发明的权利要求所涵盖。

Claims (10)

1.一种响应式布局界面的测试方法，其特征在于，所述测试方法包括：

S1、接收用户的测试指令；

S2、调用javascript脚本基于所述测试指令获取用户选择的屏幕分辨率；

S3、调用javascript脚本打开与用户所选择的屏幕分辨率对应的窗口，并接收用户基于所述对应的窗口输入的设置信息，所述设置信息包括与所选择的屏幕分辨率对应的页面地址；

S4、测试所述对应的窗口所显示界面的显示效果。

2.根据权利要求1所述的响应式布局界面的测试方法，其特征在于，所述步骤S2具体包括：

S21、分析所述测试指令，判断所述测试指令是否携带从预存屏幕分辨率中选择屏幕分辨率的信息，当判断为是转到步骤S22，当判断为否时转到步骤S23；

S22、调用所述javascript脚本从预存的屏幕分辨率中获取与所述测试指令对应的屏幕分辨率；

S23、调用所述javascript脚本接收用户的输入信息，从所述输入信息中获取所述用户选择的屏幕分辨率。

3.根据权利要求2所述的响应式布局界面的测试方法，其特征在于，所述步骤S23具体包括：

S231、向用户反馈对话框，以供用户基于所述对话框输入屏幕分辨率；

S232、接收用户反馈的输入信息；

S233、调用javascript脚本从所述输入信息中获取所述用户选择的屏幕分辨率，并基于所获取的屏幕分辨率的屏幕高度及宽度赋值给javascript变量。

4.根据权利要求3所述的测试方法，其特征在于，所述步骤S1之前还包括：

S0、在所述响应式布局界面所在浏览器的操作界面上设置分辨率按钮，所述分辨率按钮包括自定义屏幕分辨率按钮及一组设定屏幕分辨率按钮，所述一组设定屏幕分辨率按钮的每个按钮对应一个屏幕分辨率。

5.根据权利要求4所述的响应式布局界面的测试方法，其特征在于，所述步骤S21具体为：分析所述测试指令，判断用户点击的是否为所述一组设定屏幕分辨率按钮的一个，当判断为是则认为所述测试指令携带从预存屏幕分辨率中选择屏幕分辨率的信息，转到所述步骤S22，否则转到所述步骤S23。

6.根据权利要求5所述的响应式布局界面的测试方法，其特征在于，所述步骤S22具体包括：

S221、根据所述测试指令获得对应的按钮信息；

S222、调用所述javascript脚本基于所述按钮信息从预存的屏幕分辨率中获得对应的屏幕分辨率；

S223、调用所述javascript脚本基于所获得的屏幕分辨率获取对应的屏幕宽度及高度，将所述屏幕宽度及高度赋值给javascript变量。

7.根据权利要求1所述的响应式布局界面的测试方法，其特征在于，所述步骤S3具体包括：

S31、调用javascript脚本从所述javascript变量中获得所述用户选择的屏幕分辨率对应的屏幕高度及宽度；

S32、基于所获得的屏幕高度及宽度打开对应的窗口；

S33、接收用户基于所述对应的窗口输入的设置信息；

S34、在所述对应的窗口中显示与所述用户选择的屏幕分辨率对应的界面。

8.根据权利要求7所述的响应式布局界面的测试方法，其特征在于，所述设置信息还包括：赋予所述待对应的窗口可通过拖曳来修改其屏幕分辨率的属性，所述步骤S4之后还包括：

S5、接收用户的修改指令，所述修改指令为用户用手指拖曳当前打开的窗口而发送；

S6、调用所述javascript脚本获取用户停止拖曳时的窗口对应的屏幕高度及宽度，并基于当前获取的屏幕高度及宽度在当前窗口显示对应的界面，接着转到所述步骤S4。

9.一种响应式布局界面的测试系统，其特征在于，所述测试系统包括：

测试指令接收模块，用于接收用户的测试指令；

与所述测试指令接收模块连接的获取模块，用于基于所述测试指令获取用户选择的屏幕分辨率；

与所述获取模块连接的窗口打开模块，用于调用javascript脚本打开与用户所选择的屏幕分辨率对应的窗口，并接收用户基于所述对应的窗口输入的设置信息，所述设置信息包括所选择的屏幕分辨率对应的页面地址；

与所述窗口打开模块连接的测试模块，用于测试所述对应的窗口所显示界面的显示效果。

10.一种浏览器，其特征在于，包括如权利要求9所述的响应式布局界面的测试系统。