[發明專利]頁面布局自適應方法及裝置

在審

• 申請號: 201310608370.9
• 申請日: 2013-11-25
• 公開（公告）號: CN103593196A
• 公開（公告）日: 2014-02-19
• 發明（設計）人: 陳釗毅
• 申請（專利權）人: 深信服網絡科技（深圳）有限公司
• 主分類號: G06F9/44
• 分類號: G06F9/44
• 代理公司: 深圳市世紀恒程知識產權代理事務所 44287
• 代理人: 胡海國

技術領域

本發明涉及網頁設計領域，尤其涉及一種頁面布局自適應方法及裝置。

背景技術

鑒于移動終端的便攜性，用戶可以使用移動終端隨時隨地訪問網頁；受限于移動終端的屏幕尺寸，原始設計出的網頁頁面在移動終端上顯示時的布局與在PC這類終端上顯示時的布局有很大不同；而針對每種尺寸的移動終端均重新設計網頁是很不現實的，因為移動終端的尺寸有多種且原始網頁的數量也很龐大；由此，網頁頁面能夠根據移動終端的顯示尺寸自適應地布局頁面上的元素便顯得尤其重要。

目前，某些網站提供了將原始網頁轉換為手機版或者觸屏版的工具，利用該轉換工具可以快速的把一個網頁移動化，但這種方式能生成的模板格式有限，通常都是“導航+文章列表”的格式，丟失了原網頁很多元素，包括背景、顏色、形象、圖標、LOGO（商標）、內容、廣告等，跟原網頁風格幾乎完全不同，只有文字和少量圖片，而且也不支持JS（JavaScript，程序語言）等動態效果，比如下拉菜單、彈出菜單等，原網站的廣告內容也基本上被去掉了。

發明內容

鑒于此，有必要提供一種頁面布局自適應方法及裝置，以使網頁頁面能夠根據移動終端自適應地布局頁面元素。

本發明實施例公開了一種頁面布局自適應方法，包括以下步驟：

插入用于調整頁面布局的程序代碼；

基于插入的所述程序代碼，獲取移動終端的屏幕顯示寬度；

根據獲取的屏幕顯示寬度，按照預設比例調整網頁的頁面顯示寬度；

根據所述頁面顯示寬度，調整組成網頁頁面的各元素的顯示寬度，同時設置所述元素的顯示位置為浮動顯示。

優選地，所述插入用于調整頁面布局的程序代碼的步驟之后、獲取移動終端的屏幕顯示寬度的步驟之前，還包括：

基于插入的所述程序代碼，獲取終端的類型，識別該終端是否為移動終端；

在該終端為移動終端時，執行所述步驟：

基于插入的所述程序代碼，獲取移動終端的屏幕顯示寬度。

優選地，所述根據獲取的屏幕顯示寬度，按照預設比例調整網頁的頁面顯示寬度，包括：

根據獲取的屏幕顯示寬度，將網頁的頁面顯示寬度調整為與所述屏幕顯示寬度相一致的顯示尺寸。

優選地，所述調整組成網頁頁面的各元素的顯示寬度，包括：

將某一元素的顯示寬度調整為該元素對應的父元素的最大顯示寬度。

優選地，所述獲取移動終端的屏幕顯示寬度包括：

獲取移動終端的屏幕分辨率；

根據獲取的所述屏幕分辨率，獲取所述屏幕顯示寬度。

本發明實施例還公開一種頁面布局自適應裝置，包括：

代碼插入模塊，用于插入用于調整頁面布局的程序代碼；

參數獲取模塊，用于基于插入的所述程序代碼，獲取移動終端的屏幕顯示寬度；

布局調整模塊，用于根據獲取的屏幕顯示寬度，按照預設比例調整網頁的頁面顯示寬度；根據所述頁面顯示寬度，調整組成網頁頁面的各元素的顯示寬度，同時設置所述元素的顯示位置為浮動顯示。

優選地，所述頁面布局自適應裝置還包括：

類型識別模塊，用于基于插入的所述程序代碼，獲取終端的類型，識別該終端是否為移動終端。

優選地，所述布局調整模塊還用于：

根據獲取的屏幕顯示寬度，將網頁的頁面顯示寬度調整為與所述屏幕顯示寬度相一致的顯示尺寸。

優選地，所述布局調整模塊還用于：

將某一元素的顯示寬度調整為該元素對應的父元素的最大顯示寬度。

優選地，所述參數獲取模塊還用于：

獲取移動終端的屏幕分辨率；

根據獲取的所述屏幕分辨率，獲取所述屏幕顯示寬度。

本發明實施例獲取移動終端的屏幕顯示寬度；根據獲取的屏幕顯示寬度，按照預設比例調整網頁的頁面顯示寬度；根據所述頁面顯示寬度，調整組成網頁頁面的各元素的顯示寬度，同時設置所述元素的顯示位置為浮動顯示；相較于現有技術中，特地針對移動終端設計網頁，或者利用轉換工具統一轉換各種類型的網頁的方法，本發明實施例具有不需要重新設計修改網頁即可使網頁頁面自適應移動終端顯示屏幕的有益效果，且絲毫不影響原始網頁的顯示效果。

附圖說明

圖1是本發明頁面布局自適應方法第一實施例流程示意圖；

圖2是本發明頁面布局自適應方法第二實施例流程示意圖；

圖3是本發明頁面布局自適應裝置第一實施例功能模塊示意圖；