[發明專利]響應式布局界面的測試方法、系統及瀏覽器

在審

• 申請號: 201510869437.3
• 申請日: 2015-12-01
• 公開（公告）號: CN105335295A
• 公開（公告）日: 2016-02-17
• 發明（設計）人: 王暢
• 申請（專利權）人: 上海斐訊數據通信技術有限公司
• 主分類號: G06F11/36
• 分類號: G06F11/36
• 代理公司: 上海光華專利事務所 31219
• 代理人: 王再朝

技術領域

本發明涉及一種界面布局顯示領域，特別是涉及一種響應式布局界面的測試方法、系統及瀏覽器。

背景技術

隨著無線通訊技術和計算機技術的不斷發展，上網設備已經不僅僅是個人電腦，小到眼鏡、手表，大到電視、冰箱都可以上網，上網設備顯示屏物理尺寸不同，輸入模式不同，操作系統不同，瀏覽器內核及版本不同，導致不一致的窗口寬度、屏幕分辨率、用戶參數和用戶字體。

目前，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、在所述對應的窗口中顯示與所述用戶選擇的屏幕分辨率對應的界面。