[發明專利]網頁式應用的顯示適配方法及裝置

在審

• 申請號: 201410438902.3
• 申請日: 2014-08-30
• 公開（公告）號: CN104199920A
• 公開（公告）日: 2014-12-10
• 發明（設計）人: 張小剛;蔣天雄
• 申請（專利權）人: 深圳市云來網絡科技有限公司
• 主分類號: G06F17/30
• 分類號: G06F17/30
• 代理公司: 深圳市瑞方達知識產權事務所(普通合伙) 44314
• 代理人: 張約宗

技術領域

本發明涉及移動終端屏幕適配領域，尤其涉及一種網頁式應用的顯示適 配方法及裝置。

背景技術

輕應用是一種無需下載、即搜即用的全功能App，既有Native?App的用 戶體驗，又具有Web?App的可檢索與智能開發的特性，將有效解決優質應用 和服務與移動用戶需求對接的問題。由于輕應用所具有的特性，使其自誕生 以來，受到廣大用戶的一致好評，促使越來越多基于輕應用的APP的產生， 尤其是在移動終端上的應用。

現有應用于移動終端的輕應用，如LiveApp中，其Web頁面及圖片顯示 過程中，由于移動終端的屏幕分辨率不同，Web頁面及圖片中移動終端顯示過 程中，容易出現Web頁面及圖片變形和失真的現象，給用戶帶來不良的用戶 體驗。

發明內容

本發明要解決的技術問題在于，針對現有技術的缺陷，提供一種網頁式 應用的顯示適配方法及裝置。

本發明解決其技術問題所采用的技術方案是：一種網頁式應用的顯示適 配方法，包括以下步驟：

S1：在移動終端上創設用于顯示Web頁面的虛擬窗口，并將所述虛擬窗 口的寬度分辨率設置為固定值；

S2：加載圖片，設置所述圖片的寬度分辨率與所述虛擬窗口的寬度分辨 率一致，并等比例縮放至所述圖片的寬度與所述虛擬窗口的寬度一致；

S3：將所述圖片設置成背景在所述虛擬窗口中顯示。

優選地，所述步驟S1包括以下步驟：根據移動終端所使用的操作系統的 不同，通過HTML5的API接口在所述移動終端中設置兼容不同操作系統的虛 擬窗口，并將所述虛擬窗口的寬度分辨率設置為固定值。

優選地，所述步驟S1包括以下步驟：

S11：通過HTML5的API接口判斷所述移動終端的操作系統是否為ANDROID 系統；若是，則執行步驟S12；若否，則執行步驟S13；

S12：再判斷是否為ANDROID2.3以上系統，若是，則將所述移動終端中 創設的所述虛擬窗口的寬度分辨率設置為固定值，最大縮放和最小縮放設置 為所述移動終端的屏幕尺寸，屏幕像素密度設置為所述移動終端屏幕像素密 度；若否；則將所述移動終端中創設的所述虛擬窗口的寬度分辨率設置為固 定值，屏幕像素密度設置為所述移動終端屏幕像素密度；

S13：將所述移動終端中創設的所述虛擬窗口的寬度分辨率設置為固定 值，禁止用戶手動調整縮放，屏幕像素密度設置為所述移動終端屏幕像素密 度。

優選地，所述步驟S2包括：判斷所述圖片的寬度分辨率與所述虛擬窗口 的寬度分辨率是否一致，若一致，則直接將所述圖片等比例縮放至圖片的寬 度與所述虛擬窗口的寬度一致；若不一致，則調整所述圖片的寬度分辨率與 所述虛擬窗口的寬度分辨率一致，再將所述圖片等比例縮放至圖片的寬度與 所述虛擬窗口的寬度一致。

優選地，所述步驟S3包括：通過HTML5的API接口將所述圖片的屬性設 置為在顯示過程中設置成背景且僅顯示一次，并判斷所述圖片的高度是否大 于虛擬窗口的高度；若是，則將所述圖片在所述虛擬窗口中局部顯示；若否， 則將所述圖片在虛擬窗口中直接顯示。

優選地，所述“將所述圖片在所述虛擬窗口中局部顯示”包括：將所述 圖片放置在所述虛擬窗口的左上角、右上角、左下角或右下角，顯示所述圖 片在所述虛擬窗口以內的部分。

本發明還提供一種網頁式應用的顯示適配裝置，包括：

窗口設置單元：用于在移動終端上創設用于顯示Web頁面的虛擬窗口， 并將所述虛擬窗口的寬度分辨率設置為固定值；

圖片加載單元：用于加載圖片，設置所述圖片的寬度分辨率與所述虛擬 窗口的寬度分辨率一致，并等比例縮放至所述圖片的寬度與所述虛擬窗口的 寬度一致；

顯示適配單元：用于將所述圖片設置成背景在所述虛擬窗口中顯示。

優選地，所述窗口設置單元包括：根據移動終端所使用的操作系統的不 同，通過HTML5的API接口在所述移動終端中設置兼容不同操作系統的虛擬 窗口，并將所述虛擬窗口的寬度分辨率設置為固定值。