響應式布局界面的測試方法、系統及瀏覽器的制造方法
【技術領域】
[0001]本發明涉及一種界面布局顯示領域，特別是涉及一種響應式布局界面的測試方法、系統及瀏覽器。
【背景技術】
[0002]隨著無線通訊技術和計算機技術的不斷發展，上網設備已經不僅僅是個人電腦，小到眼鏡、手表，大到電視、冰箱都可以上網，上網設備顯示屏物理尺寸不同，輸入模式不同，操作系統不同，瀏覽器內核及版本不同，導致不一致的窗口寬度、屏幕分辨率、用戶參數和用戶字體。
[0003]目前，Web網頁設計中普遍使用固定寬度(如960像素)為所有終端用戶提供一致的用戶界面，在顯示屏分辨率趨于一致時顯示很好，但在大尺寸高分辨率顯示器上會顯示高達50%空白區域，而在移動終端上頁面大小不能匹配終端屏幕大小，頁面布局不能適應性調整，無法按100%比例顯示頁面寬度，出現水平滾動條，尋求標準分辨率越來越困難，因此需要一種可測試不同分辨率下的顯示效果來判斷是否與終端匹配的方法。
[0004]響應式布局是個新的概念，其可實現一個網站能夠兼容多個終端，而不是為每個終端做一個特定的版本，響應式布局可為不同終端的用戶提供更加舒適的界面和更好的用戶體驗。
[0005]現有的兼容性測試方法中，利用視圖布局樣式中預設的組件類名命名待展示頁面中各元素的類屬性；在不同系統環境不同瀏覽器平臺下展示待展示頁面；檢查待展示頁面展示效果，但此方法需要在不同的設備上查看最終顯示的效果，操作比較麻煩，而且不能測試除現有測試設備屏幕分辨率外的其他屏幕分辨率下的界面顯示效果，具有一定的局限性。
【發明內容】
[0006]鑒于以上所述現有技術的缺點，本發明的目的在于提供一種響應式布局界面的測試方法、系統及瀏覽器，用于解決現有技術中在測試過程中需要在不同設備上測試顯示效果的問題。
[0007]為實現上述目的及其他相關目的，本發明提供一種響應式布局界面的測試方法，所述測試方法包括:S1、接收用戶的測試指令；S2、調用javascript腳本基于所述測試指令獲取用戶選擇的屏幕分辨率；S3、調用javascript腳本打開與用戶所選擇的屏幕分辨率對應的窗口，并接收用戶基于所述對應的窗口輸入的設置信息，所述設置信息包括與所選擇的屏幕分辨率對應的頁面地址；S4、測試所述對應的窗口所顯示界面的顯示效果。
[0008]于本發明的一實施方式中，所述步驟S2具體包括:S21、分析所述測試指令，判斷所述測試指令是否攜帶從預存屏幕分辨率中選擇屏幕分辨率的信息，當判斷為是轉到步驟S22，當判斷為否時轉到步驟S23 ;S22、調用所述javascript腳本從預存的屏幕分辨率中獲取與所述測試指令對應的屏幕分辨率；S23、調用所述javascript腳本接收用戶的輸入信息，從所述輸入信息中獲取所述用戶選擇的屏幕分辨率。
[0009]于本發明的一實施方式中，所述步驟S23具體包括:S231、向用戶反饋對話框，以供用戶基于所述對話框輸入屏幕分辨率；S232、接收用戶反饋的輸入信息；S233、調用javascript腳本從所述輸入信息中獲取所述用戶選擇的屏幕分辨率，并基于所獲取的屏幕分辨率的屏幕高度及寬度賦值給javascript變量。
[0010]于本發明的一實施方式中，所述步驟S1之前還包括:S0、在所述響應式布局界面所在瀏覽器的操作界面上設置分辨率按鈕，所述分辨率按鈕包括自定義屏幕分辨率按鈕及一組設定屏幕分辨率按鈕，所述一組設定屏幕分辨率按鈕的每個按鈕對應一個屏幕分辨率。
[0011]于本發明的一實施方式中，所述步驟S21具體為:分析所述測試指令，判斷用戶點擊的是否為所述一組設定屏幕分辨率按鈕的一個，當判斷為是則認為所述測試指令攜帶從預存屏幕分辨率中選擇屏幕分辨率的信息，轉到所述步驟S22，否則轉到所述步驟S23。
[0012]于本發明的一實施方式中，所述步驟S22具體包括:S221、根據所述測試指令獲得對應的按鈕信息；S222、調用所述javascript腳本基于所述按鈕信息從預存的屏幕分辨率中獲得對應的屏幕分辨率；S223、調用所述javascript腳本基于所獲得的屏幕分辨率獲取對應的屏幕寬度及高度，將所述屏幕寬度及高度賦值給javascript變量。
[0013]于本發明的一實施方式中，所述步驟S3具體包括:S31、調用javascript腳本從所述javascript變量中獲得所述用戶選擇的屏幕分辨率對應的屏幕高度及寬度；S32、基于所獲得的屏幕高度及寬度打開對應的窗口 ；S33、接收用戶基于所述對應的窗口輸入的設置信息；S34、在所述對應的窗口中顯示與所述用戶選擇的屏幕分辨率對應的界面。
[0014]于本發明的一實施方式中，所述設置信息還包括:賦予所述待對應的窗口可通過拖曳來修改其屏幕分辨率的屬性，所述步驟S4之后還包括:S5、接收用戶的修改指令，所述修改指令為用戶用手指拖曳當前打開的窗口而發送；S6、調用所述javascript腳本獲取用戶停止拖曳時的窗口對應的屏幕高度及寬度，并基于當前獲取的屏幕高度及寬度在當前窗口顯示對應的界面，接著轉到所述步驟S4。
[0015]本發明還提供一種響應式布局界面的測試系統，所述測試系統包括:測試指令接收模塊，用于接收用戶的測試指令；與所述測試指令接收模塊連接的獲取模塊，用于基于所述測試指令獲取用戶選擇的屏幕分辨率；與所述獲取模塊連接的窗口打開模塊，用于調用javascript腳本打開與用戶所選擇的屏幕分辨率對應的窗口，并接收用戶基于所述對應的窗口輸入的設置信息，所述設置信息包括所選擇的屏幕分辨率對應的頁面地址；與所述窗口打開模塊連接的測試模塊，用于測試所述對應的窗口所顯示界面的顯示效果。
[0016]本發明還提供一種瀏覽器，包括一種響應式布局界面的測試系統，該測試系統包括:測試指令接收模塊，用于接收用戶的測試指令；與所述測試指令接收模塊連接的獲取模塊，用于基于所述測試指令獲取用戶選擇的屏幕分辨率；與所述獲取模塊連接的窗口打開模塊，用于調用javascript腳本打開與用戶所選擇的屏幕分辨率對應的窗口，并接收用戶基于所述對應的窗口輸入的設置信息，所述設置信息包括所選擇的屏幕分辨率對應的頁面地址；與所述窗口打開模塊連接的測試模塊，用于測試所述對應的窗口所顯示界面的顯示效果。
[0017]本發明的一種響應式布局界面的測試方法、系統及瀏覽器，至少具有以下有益效果:
[0018]首先，調用javascript腳本來執行基于用戶的操作獲取對應屏幕分辨率，及基于該屏幕分辨率的相關數據打開對應的窗口，而javascript腳本可響應用戶的各種操作，因此靈活性強，易于實現，提高測試效率。
[0019]此外，用戶可在一個瀏覽器上選擇輸入屏幕分辨率的方式，并且可根據實際需求選擇輸入需要測試的屏幕分辨率的顯示效果，無需使用多個瀏覽器測試不同屏幕分辨率顯示效果，操作簡單，滿足不同用戶的實際需求。
[0020]再者，可精確設置屏幕分辨率，提高測試效率。可根據需求微調顯示效果，并測試該顯示效果，可一定程度上優化顯示界面的顯示效果。
【附圖說明】
[0021]圖1是本發明的一種響應式布局界面的測試方法一實施例的流程圖。
[0022]圖2是本發明的一種響應式布局界面的測試方法的步驟S2的具體流程圖。
[0023]圖3是本發明的一種響應式布局界面的測試方法的步驟S23的具體流程圖。
[0024]圖4是本發明的一種響應式布局界面的測試方法的步驟S22的具體流程圖。
[0025]圖5是本發明的一種響應式布局界面的測試方法的步驟S3的具體流程圖。
[0026]圖6是本發明的一種響應式布局界面的測試方法的一優選實施例的具體流程圖。
[0027]圖7是本發明的一種響應式布局界面的測試系統一實施例的結構示意圖。
[0028]圖8是本發明的一種響應式布局界面的測試系統的屏幕分辨率獲取模塊2的結構示意圖。
[0029]圖9是本發明的一種響應式布局界面的測試系統的第一屏幕分辨率獲取單元22的結構示意圖。
[0030]圖10是本發明的一種響應式布局界面的測試系統的第二屏幕分辨率獲取單元23的結構示意圖。
[0031]圖11是本發明的一種響應式布局界面的測試系統的控制模塊3的具體結構示意圖。
[0032]元件標號說明:
[0033]0按鈕設置模塊
[0034]1測試指令接收模塊
[0035]2屏幕分辨率獲取模塊
[0036]21判斷單元
[0037]22第一屏幕分辨率獲取單元
[0038]221 按鈕信息獲取子單元
[0039]222 第一屏幕分辨率獲取子單元