隨著移動互聯網的發(fā)展,各類移動設備層出不窮。移動設備的屏幕分辨率各式各樣,和傳統(tǒng)PC存在較大差別,這將導致用戶在使用手機等移動終端訪問傳統(tǒng)互聯網上Web網頁時很難快速準確的獲得有用的信息,因此如何使移動設備正常顯示傳統(tǒng)PC端網頁資源成為研究熱點。本論文主要針對Web應用的表現層即界面表現部分,研究并實現了PC端Web應用到手機端Web App轉換,并使用某Web應用部分頁面進行驗證,主要工作內容如下：（一）研究移動終端分辨率等其他相關特征,根據現有Web網頁資源特點,實現網頁轉碼,使其適應移動終端的顯示。此外,應用Android平臺的WebView組件生成可供用戶在移動端安裝使用的WebApp,通過此App可以訪問經轉碼后能在移動端友好顯示的Web應用頁面。（二）移動端原生App是基于某一具體的開發(fā)平臺,定制開發(fā)的第三方應用程序,它和Web App在實現技術上有本質不同。因此,PC端的Web應用到手機端App轉碼方法的研究更具挑戰(zhàn)性。本論文對PC端Web應用到手機端App的轉換也做了相應的研究,并對其可行性進行了分析。（三）響應式Web設計是一種全新的Web設計思想,可以實現一次編寫的... 

【文章來源】：北京郵電大學北京市 211工程院校 教育部直屬院校

【文章頁數】：67 頁

【學位級別】：碩士

【部分圖文】：

Web App安裝界面

以看出網頁采用網格布局，有圖片和文字。如果不對網頁做任何處理直接縮小瀏覽器視口的大小，顯示效果如圖6-1所示。：二 a 纖科勒邊'i? C? (D ftle:///E:Aest/iy/setting.html 三：主in isa.系isisa ‘ “用戶&權用&fte&取^ 產 S榜 o^： 色W3cKM.gr' ?分??g應的‘0亂 jpf]場 SOS*授 ttir ；?^^^新力 1 I挪模塊 , Pr-^ -SSiJ￡i^ (宅BcS25'}ia_艦8 I i醒國挪或時目抵埋舶 ：5§*!述培戶 —==>.，“￠:?楚理S匿 U .創(chuàng)淚KS。, ；SfiSt雜愁與他設gHiRepcdtSiSSS loqoiSM ?以場挪通設鏈W . 1 -?■_. ‘ ，* i _ ^1. ： ； -二 *‘ ^ *mammmamBSssaamrnKSBaaamma^mmmsBBBmrnsmmmsaBammmmmmm^^asmmmmmmmm圖6-1原系統(tǒng)設計界面在視口縮小時顯示效果由圖6-1可以看到，如果不對網頁做任何處理直接縮小瀏覽器的視口，瀏覽器會出現縱向和橫向滾動條，用戶通過拉動滾動條才能看到網頁的全貌。網頁明顯不具有響應式的效果。如果采用響應式設計的技術對網頁進行重新編碼，可以從網頁顯示效果的變化體會到響應式設計的優(yōu)勢。隨著不斷改變?yōu)g覽器視口的大小，網頁的布局發(fā)生了變化。響應式網頁的特性開始顯現。當視口寬度小于768px時，頁面布局將發(fā)生變化效果如圖6-2所示�？梢钥吹接捎谝暱趯挾茸冃�

響應式網頁的特性開始顯現。當視口寬度小于768px時，頁面布局將發(fā)生變化效果如圖6-2所示�？梢钥吹接捎谝暱趯挾茸冃�，網頁在橫向上不能顯示完全。此時網頁布局發(fā)生了流動，之前不能顯示的內容移動到了下方，頁面在橫向上不再出現滾動條。網頁的整體顯示效果并沒有因為視口的減小而變得特別糟糕。整體來看，隨著瀏覽器窗口的減小網頁依然能夠保持原有風格，用戶依然能. 在有限的視口大小下瀏覽到網頁的全部內容，這無疑將給用戶帶來很棒的用戶體驗。48


本文編號：3285151