移動(dòng)端開(kāi)發(fā)分類

1.1 Native App 原生App開(kāi)發(fā)

優(yōu)點(diǎn)：

（1）用戶體驗(yàn)好

（2）性能穩(wěn)定

（3）操作速度快

（4）能夠訪問(wèn)本地資源（通訊錄，相冊(cè)）

（5）能夠設(shè)計(jì)出色的動(dòng)效，轉(zhuǎn)場(chǎng)

（6）擁有系統(tǒng)級(jí)別的貼心通知或提醒

（7）用戶留存率高

缺點(diǎn)：

（1）開(kāi)發(fā)成本高

（2）維護(hù)成本高

（3）更新緩慢，根據(jù)不同平臺(tái)，提交–審核–上線流程較復(fù)雜。

總的來(lái)說(shuō)，native app開(kāi)發(fā)從android、ios智能手機(jī)出現(xiàn)就有了開(kāi)發(fā)技術(shù)，性能體驗(yàn)最優(yōu)，API比較完善，但是學(xué)習(xí)起來(lái)難度比較高，開(kāi)發(fā)成本比較高（跟開(kāi)發(fā)周期相對(duì)來(lái)說(shuō)比較長(zhǎng)也是有關(guān)系的）。

2 Web App 網(wǎng)頁(yè)App開(kāi)發(fā)

優(yōu)點(diǎn)：

（1）發(fā)版完全自控，隨時(shí)更新

（2）跨平臺(tái)，因?yàn)楸旧韥?lái)說(shuō)用的是Web的東西，所以可以在任意平臺(tái)上運(yùn)行

（3）成本小，Web頁(yè)面嵌入Webview開(kāi)發(fā)起來(lái)速度非常快，一個(gè)人就可以輕松搞定

缺點(diǎn)：

（1）性能差

（2）弱網(wǎng)絡(luò)或無(wú)網(wǎng)絡(luò)條件下體驗(yàn)差

（3）適用有展示類需求的項(xiàng)目，但是如果要實(shí)現(xiàn)的功能比較復(fù)雜的話就顯得力不從心

總的來(lái)說(shuō)，相比Native App，Web App體驗(yàn)中受限于網(wǎng)絡(luò)環(huán)境和渲染性能。Web APP對(duì)網(wǎng)絡(luò)環(huán)境的依賴性較大，因?yàn)閃eb APP中的H5頁(yè)面，當(dāng)用戶使用時(shí)，去服務(wù)器請(qǐng)求顯示頁(yè)面。如果此時(shí)用戶恰巧遇到網(wǎng)速慢，網(wǎng)絡(luò)不穩(wěn)定等其他環(huán)境時(shí)，用戶請(qǐng)求頁(yè)面的效率大打折扣，在用戶使用中會(huì)出現(xiàn)不流暢，斷斷續(xù)續(xù)的不良感受。同時(shí)，H5技術(shù)自身渲染性能較弱：對(duì)復(fù)雜的圖形樣式，多樣的動(dòng)效，自定義字體等的支持性不強(qiáng)。因此，應(yīng)注意以下幾點(diǎn)：1.簡(jiǎn)化不重要的動(dòng)畫(huà)/動(dòng)效；2.簡(jiǎn)化復(fù)雜的圖形文字樣式；3.減少頁(yè)面渲染的頻率和次數(shù)。

3 Hybrid App 混合型App開(kāi)發(fā)

優(yōu)點(diǎn)：

（1）體驗(yàn)好

（2）穩(wěn)定性強(qiáng)動(dòng)態(tài)性強(qiáng)

（3）成本相對(duì)低跨平臺(tái)

缺點(diǎn)：對(duì)團(tuán)隊(duì)技術(shù)棧要求相對(duì)高性能優(yōu)化

Hybrid App就是Native結(jié)合Web混合開(kāi)發(fā)，Native+JS代碼代表作是cordova前身是phonegap，現(xiàn)在移交給Apache，核心JsBridge，JS調(diào)Java，Java調(diào)JS。因?yàn)榛旌祥_(kāi)發(fā)，所以體驗(yàn)接近原生、穩(wěn)定性強(qiáng)而且發(fā)版快。

2 Viewport視口

2.1 視口

視口是移動(dòng)設(shè)備上用來(lái)顯示網(wǎng)頁(yè)的區(qū)域，一般會(huì)比移動(dòng)設(shè)備可視區(qū)域大，寬度可能是980px或者1024px，目的是為了顯示下整個(gè)為PC端設(shè)計(jì)的網(wǎng)頁(yè)。這樣帶來(lái)的后果是移動(dòng)端會(huì)出現(xiàn)橫向滾動(dòng)條，為了避免這種情況，移動(dòng)端會(huì)將視口縮放到移動(dòng)端窗口的大小。這樣會(huì)讓網(wǎng)頁(yè)不容易觀看，可以用meta標(biāo)簽，name="viewport"來(lái)設(shè)置視口的大小，將視口的大小設(shè)置為和移動(dòng)設(shè)備可視區(qū)一樣的大小。

在移動(dòng)端用來(lái)承載網(wǎng)頁(yè)的這個(gè)區(qū)域，就是我們的視覺(jué)窗口，viewport（視口），這個(gè)區(qū)域可以設(shè)置高度寬度，可以按比例放大縮小，而且能設(shè)置是否允許用戶自行縮放。

2.2參數(shù)說(shuō)明

width：寬度設(shè)置的是viewport寬度，可以設(shè)置device-width特殊值

initial-scale：初始縮放比，大于0的數(shù)字

maximum-scale：最大縮放比

minimum-scale：最小縮放比

user-scalable：用戶是否可以縮放，yes或no（1或0）

2.3 設(shè)置方法

3 移動(dòng)端適配布局

使用百分比自適應(yīng)布局（流式布局）同時(shí)需要對(duì)移動(dòng)端的viewport視口進(jìn)行設(shè)置，就可以達(dá)到適配的目的。

3.1 流體布局+少量響應(yīng)式

流體布局：使用百分比來(lái)設(shè)置元素的寬度，元素的高度按實(shí)際高度寫(xiě)固定值，流體布局中，元素的邊線（border）無(wú)法用百分比，可以使用樣式中的計(jì)算函數(shù)calc()來(lái)設(shè)置寬度，或者使用box-sizing屬性將盒子設(shè)置為邊線計(jì)算盒子尺寸。

響應(yīng)式布局：使用媒體查詢的方式，通過(guò)查詢?yōu)g覽器的寬度，不同的寬度應(yīng)用不同的樣式塊，每個(gè)樣式塊對(duì)應(yīng)的是該寬度下的布局方式，從而實(shí)現(xiàn)響應(yīng)式布局，響應(yīng)式布局的頁(yè)面可以適配多種終端屏幕（pc、平板、手機(jī)）。

3.2?基于rem的布局

rem指的是參照根節(jié)點(diǎn)的文字大小，根節(jié)點(diǎn)指的是html標(biāo)簽，設(shè)置html標(biāo)簽的大小，其他的元素相關(guān)尺寸設(shè)置用rem。這樣，所有元素都有了統(tǒng)一的參照標(biāo)準(zhǔn)，改變html文字的大小，就會(huì)改變所有元素用rem設(shè)置的尺寸大小。

感謝閱讀

喜歡看小編文章的點(diǎn)個(gè)訂閱或者喜歡！小編每天都會(huì)跟大家分享文章，也會(huì)給大家提供web前端學(xué)習(xí)資料。

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://m.jstctz.cn/12492.html