[發明專利]一種頁面自適應調整方法及系統

在審

• 申請號: 201410659363.6
• 申請日: 2014-11-18
• 公開（公告）號: CN104317968A
• 公開（公告）日: 2015-01-28
• 發明（設計）人: 尹章牛;陳衛東
• 申請（專利權）人: 蘇州科達科技股份有限公司
• 主分類號: G06F17/30
• 分類號: G06F17/30
• 代理公司: 北京三聚陽光知識產權代理有限公司 11250
• 代理人: 張建綱

技術領域

本發明涉及移動通信技術領域。具體地說涉及一種頁面自適應調整方法及系統。

背景技術

在系統級的網頁前端設計上，對可視空間的充分利用越來越被重視起來，這樣就需要盡可能的減少常見的滾動效果。

目前業內常用的頁面自適應調整方法主要包括以下三種類型：一、固定大小設計方法，具體方法為首先給整個頁面設定固定寬度，然后超出寬度的地方通過背景顏色進行填充，上下根據內容多少和相應的顯示器大小，自動出現滾動條。該方法的問題是，只能保證某一特定分辨率的顯示效果為最佳，當顯示器分辨率超出這一特定分辨率很大時，整個頁面將會出現很大一片空白區域，空間無法充分利用起來，并且在很大的顯示器下還是顯示較小的文字、圖片，視覺效果也不理想。二、編寫多種分辨率的樣式，按需引入的頁面自適應調整方法，具體方法為首先給整個頁面編寫多種分辨率的css樣式文件，再在頁面加載的時候通過一定的計算引入相應的css文件。這一設計的問題是，因顯示器大小類型繁多，需要編寫的css樣式也要很多，重復性的工作量很大，而且當窗口并沒有占滿整個顯示器時或者進行縮放時，也無法找到完全對應的樣式文件。三、響應式頁面自適應調整方法，響應式網頁設計的理念是頁面的設計與開發應當根據用戶行為以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。一切彈性化，圖片的尺寸可以被自動調整，頁面布局再不會被破壞。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、CSS?media?query的使用等。從效果上來說，響應式頁面自適應調整方法在兼容多種分辨率的應用上無疑是比較好的選擇，但這一方法的問題是，在追求彈性化的過程中，必然會導致部分內容無法在可視區域中展示，另，因不同顯示器分辨率差別非常大，或者頁面之間需要相互嵌套，導致需要編寫大量的相似度極高的重復代碼以使不同分辨率下的顯示樣式能夠自動調整，且調整結果也并不理想

發明內容

為此，本發明所要解決的技術問題在于現有技術中，頁面自適應調整方法需要編寫大量的相似度極高的重復代碼以使不同分辨率下的顯示樣式能夠自適應調整，且調整結果也并不理想，從而提供一種能夠減少重復代碼編寫并且自適應調整效果好的頁面自適應調整方法及系統。

為解決上述技術問題，本發明的技術方案如下：

本發明提供了一種頁面自適應調整方法，包括如下步驟；

設置頁面在基準分辨率下的初始樣式規則，所述初始樣式規則包括需要動態計算的樣式；

獲取在當前可視窗口的分辨率下所述頁面的寬度值、高度值的縮放比例；

根據所述縮放比例對初始樣式規則中需要動態計算的樣式進行更新。

本發明所述的頁面自適應調整方法，所述設置頁面在基準分辨率下的初始樣式規則包括：

設置基準分辨率；

將基準分辨率下的頁面劃分為N個基礎塊樣式，N為正整數，將每個所述基礎塊樣式中包括的子元素樣式的像素值由所述子元素樣式占其所屬的基礎塊樣式的百分比表示；

將需要動態調整的基礎塊樣式定義為需要動態計算的樣式。

本發明所述的頁面自適應調整方法，所述獲取在當前可視窗口的分辨率下所述頁面的寬度值、高度值的縮放比例包括：

獲取當前可視窗口的分辨率；

根據當前可視窗口的分辨率的寬度值、高度值分別同所述基準分辨率的寬度值、高度值的比值計算出當前可視窗口的分辨率下所述頁面的寬度值和高度值的縮放比例。

本發明所述的頁面自適應調整方法，所述根據當前可視窗口的分辨率的寬度值、高度值分別同所述基準分辨率的寬度值、高度值的比值計算出當前可視窗口的分辨率下所述頁面的寬度值和高度值的縮放比例包括：

計算當前可視窗口的分辨率的寬度值、高度值分別同所述基準分辨率的寬度值、高度值的比值；

當所述比值小于或等于1時，利用公式f＝1-(1-s)ⁿ來計算當前可視窗口的分辨率下所述頁面的寬度值、高度值的縮小比例；

當所述比值大于1時，利用公式f＝1+(1-s)ⁿ來計算當前可視窗口的分辨率下所述頁面的寬度值、高度值的放大比例；

其中s為當前可視窗口的分辨率的寬度值、高度值分別同所述基準分辨率的寬度值、高度值的比值，n為正整數。

本發明所述的頁面自適應調整方法，所述根據所述縮放比例對初始樣式規則中需要動態計算的樣式進行更新的步驟，包括：

遍歷并讀取所述初始樣式規則中需要動態計算的樣式，將所述需要動態計算的樣式作為初始值予以保存；

將所述初始值與所述縮放比例的乘積作為新樣式；