[發明專利]一種頁面適配方法及裝置

在審

• 申請號: 201611220096.8
• 申請日: 2016-12-26
• 公開（公告）號: CN108241505A
• 公開（公告）日: 2018-07-03
• 發明（設計）人: 王宇;蘆麗紅;謝宇;張玉魁
• 申請（專利權）人: 航天信息股份有限公司
• 主分類號: G06F9/38
• 分類號: G06F9/38
• 代理公司: 北京同達信恒知識產權代理有限公司 11291
• 代理人: 黃志華

本發明涉及網絡通信領域，尤其涉及一種頁面適配方法及裝置，該方法為，獲取顯示界面的寬度；根據顯示界面的寬度和預定義的計算方式，計算頁面中根元素在顯示界面上顯示時對應的大小；其中，計算方式為，根據預設的頁面對應的原始效果圖的寬度、預設的換算關系和顯示界面的寬度進行計算；換算關系表示，頁面中元素的單位與原始效果圖中元素的單位之間的比例換算；根據頁面中根元素在顯示界面上顯示時對應的大小，將頁面顯示于顯示界面上，這樣，頁面中元素為統一的單位，更為簡單，建立簡單的換算關系，只需一次開發設計，可以適配所有終端，并頁面顯示時，能夠精確還原原始效果圖，降低人力成本，減少了開發周期，同時后期維護也更加簡單方便。

技術領域

本發明涉及網絡通信領域，尤其涉及一種頁面適配方法及裝置。

背景技術

實際中，在制作頁面時，根據不同的需求，用戶會預先繪制設計稿(即原始設計效果圖或設計原型)，然后，開發人員可以根據設計稿來制作頁面，進而在不同終端的瀏覽器上加載該頁面，即完成在瀏覽器(即顯示界面)上顯示該頁面，由于頁面尺寸是固定的，對于不同尺寸的移動終端的瀏覽器在適配上就會存在一些問題。

并且，隨著移動終端的日益普及，例如，手機、平板電腦種類也非常多，與傳統PC端顯示器不同的是，移動終端的分辨率沒有統一的標準，各種尺寸、各種屏幕分辨率的移動終端非常多，這樣，在不同移動終端的瀏覽器上顯示頁面時，傳統PC端固定寬度的頁面布局方法不再適用，需要一種簡單高效的頁面適配方法來滿足不同分辨率的移動終端。

為了使頁面在不同分辨率的移動終端上能夠正常顯示，給用戶舒適的使用體驗，現有技術中，頁面適配方法大致可分為：響應式布局、viewport縮放、百分比布局等。

(1)響應式布局

建立媒體查詢，在制作頁面時，編寫多套層疊樣式表單(Cascading Style Sheet，CSS)樣式，針對不同的移動終端的屏幕分辨率設置不同的樣式。若新設置瀏覽器大小，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

(2)窗口(viewport)縮放

通過動態設置頁面meta標簽的scale值，整體縮放頁面的尺寸，使頁面能恰好適應屏幕寬度。但此方案在某些移動終端上顯示會有異常，部分圖片會由于移動終端的原因變模糊，在日常開發中使用較少。

(3)百分比布局

將頁面寬度均勻分成100份，頁面中每個容器或元素用百分比來定義寬度。在CSS樣式表中，使用百分比作為單位，這樣頁面中的容器和元素均可以按照固定的比例進行顯示，能較好的適應不同的移動終端上瀏覽器的寬度。若僅需對頁面大致進行水平方向的區域劃分，該方案能夠較好的滿足需求。

雖然現有技術中上述幾種頁面適配方法可以滿足一定的需求，但是，也都存在不同的劣勢和缺陷，尤其是在要求對頁面進行精確還原的場景下，上述幾種方法均不能很好地滿足需求，具體為：

(1)響應式布局。該方法工作量較大，可能是其他頁面適配方法的數倍，開發周期長，效率較低，并且難于維護，并且，若要做到精準適配，則需要編寫多套樣式。

(2)viewport縮放。在部分移動終端上顯示異常，一般較少使用。

(3)百分比布局。無法根據不同移動終端上瀏覽器的寬度精確定義在顯示時頁面中各個容器或元素的寬度，造成最后在瀏覽器上顯示的頁面與原始的設計稿不符，極端情況下，顯示的頁面中元素會重疊在一起，造成頁面混亂。

由此可見，現有技術中，頁面適配方法實現比較復雜并且無法做到在不同移動終端的顯示界面上精確還原設計稿的效果。

發明內容

本發明實施例提供一種頁面適配方法及裝置，以更加簡單、高效并能精確還原設計原型，來實現在不同移動終端上的頁面適配。