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

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

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

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

【部分圖文】：

Web App安裝界面

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

響應(yīng)式網(wǎng)頁(yè)的特性開(kāi)始顯現(xiàn)。當(dāng)視口寬度小于768px時(shí)，頁(yè)面布局將發(fā)生變化效果如圖6-2所示。可以看到由于視口寬度變小，網(wǎng)頁(yè)在橫向上不能顯示完全。此時(shí)網(wǎng)頁(yè)布局發(fā)生了流動(dòng)，之前不能顯示的內(nèi)容移動(dòng)到了下方，頁(yè)面在橫向上不再出現(xiàn)滾動(dòng)條。網(wǎng)頁(yè)的整體顯示效果并沒(méi)有因?yàn)橐暱诘臏p小而變得特別糟糕。整體來(lái)看，隨著瀏覽器窗口的減小網(wǎng)頁(yè)依然能夠保持原有風(fēng)格，用戶依然能. 在有限的視口大小下瀏覽到網(wǎng)頁(yè)的全部?jī)?nèi)容，這無(wú)疑將給用戶帶來(lái)很棒的用戶體驗(yàn)。48


本文編號(hào)：3285151