[發明專利]一種屏幕尺寸適配方法和系統

在審

• 申請號: 201810991512.7
• 申請日: 2018-08-29
• 公開（公告）號: CN109189533A
• 公開（公告）日: 2019-01-11
• 發明（設計）人: 王進;邵丹薇;鄭雋一;儲丹
• 申請（專利權）人: 萬幫充電設備有限公司
• 主分類號: G06F9/451
• 分類號: G06F9/451
• 代理公司: 北京超凡志成知識產權代理事務所(普通合伙) 11371
• 代理人: 魏彥

本發明提供了一種屏幕尺寸適配方法和系統，涉及移動端web適配技術領域，所述方法根據充電樁顯示屏的預設屏幕信息，計算得到屏幕寬度；按照屏幕寬度將網頁頁面的原始設計稿寬度調整為目標設計稿寬度；將顯示屏的顯示區域按照預設比例劃分成預設數量個目標單位區域，并確定每個目標單位區域內的像素點數量，預設比例為屏幕寬度與原始設計稿寬度的比例；將目標設計稿中每個原始單位區域的像素點數量調整為目標單位區域內的像素點數量，以解決現有技術中都是采用預先獲取屏幕尺寸而寫網頁代碼，如果用戶群體大，伴隨而來的是巨大的工作量的技術問題。并且可以實現一套代碼在不同充電樁上運行，減少程序開發人員的繁重工作量。

技術領域

本發明涉及移動端web適配技術領域，尤其是涉及一種屏幕尺寸適配方法和系統。

背景技術

目前，新能源汽車的出現和共享充電裝置的普及，使充電樁在城市中得到大規模的應用，但充電樁不同于手機，充電樁的屏幕尺寸多樣沒有固定的規格，如果沒有一套良好的網頁適配充電樁的適配方法，無異于增加前端工程師們對網頁重新排版甚至對程序重新修改。現有技術中都是采用預先獲取屏幕尺寸而寫網頁代碼，如果用戶群體大，伴隨而來的是巨大的工作量，并沒有真正意義上解決問題。

發明內容

有鑒于此，本發明的目的在于提供一種屏幕尺寸適配方法和系統以解決現有技術中都是采用預先獲取屏幕尺寸而寫網頁代碼，如果用戶群體大，伴隨而來的是巨大的工作量的技術問題。

第一方面，本發明實施例提供了一種屏幕尺寸適配方法，應用于充電樁，所述方法包括如下步驟：

根據所述充電樁顯示屏的預設屏幕信息，計算得到屏幕寬度；

加載網頁頁面時，按照所述屏幕寬度將所述網頁頁面的原始設計稿寬度調整為目標設計稿寬度；

將所述顯示屏的顯示區域按照預設比例劃分成預設數量個目標單位區域，并確定每個所述目標單位區域內的像素點數量，所述預設比例為所述屏幕寬度與所述原始設計稿寬度的比例；

將所述目標設計稿中每個原始單位區域的像素點數量調整為所述目標單位區域內的像素點數量。

結合第一方面，本發明實施例提供了第一方面的第一種可能的實施方式，其中，所述方法還包括：

確定所述目標設計稿中的元素所占用原始單位區域的長度方向上的數量和寬度方向上的數量；

將所述長度方向上的數量乘以所述目標單位區域內的像素點數量，得到所述元素在所述顯示屏顯示時長度方向上所占用的像素點數量；

將所述寬度方向上的數量乘以所述目標單位區域內的像素點數量，得到所述元素在所述顯示屏顯示時寬度方向上所占用的像素點數量。

結合第一方面，本發明實施例提供了第一方面的第二種可能的實施方式，其中，所述根據所述充電樁顯示屏的預設屏幕信息，計算得到屏幕寬度，包括：

獲取所述充電樁顯示屏的屏幕信息，所述屏幕信息包括：屏幕尺寸及屏幕比例；

根據所述屏幕尺寸及所述屏幕比例計算所述屏幕寬度。

結合第一方面，本發明實施例提供了第一方面的第三種可能的實施方式，其中，所述按照所述屏幕寬度將所述網頁頁面的原始設計稿寬度調整為目標設計稿寬度，包括：

獲取所述網頁頁面的原始設計稿；

在所述設計稿中查找所述原始設計稿寬度設置字段；

按照所述屏幕寬度設置所述目標設計稿寬度設置字段的值。

結合第一方面，本發明實施例提供了第一方面的第四種可能的實施方式，其中，所述將所述顯示屏的顯示區域按照預設比例劃分成預設數量個目標單位區域，并確定每個所述目標單位區域內的像素點數量，包括：