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

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

【文章頁數(shù)】：67 頁

【學(xué)位級別】：碩士

【部分圖文】：

Web App安裝界面

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

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


本文編號：3285151