寫在前面：本人剛剛接觸移動(dòng)端開發(fā)，希望自己的見解能夠幫助到他人，不足之處還望提醒。

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

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

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

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

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

（3）操作速度快

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

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

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

（7）用戶留存率高

缺點(diǎn)：

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

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

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

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

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

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

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

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

（3）成本小，Web頁(yè)面嵌入Webview開發(fā)起來速度非?？?#xff0c;一個(gè)人就可以輕松搞定

缺點(diǎn)：

（1）性能差

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

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

總的來說，相比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)畫/動(dòng)效；2.簡(jiǎn)化復(fù)雜的圖形文字樣式；3.減少頁(yè)面渲染的頻率和次數(shù)。

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

2 Viewport視口

2.1 視口

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

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

2.2參數(shù)說明

width：寬度設(shè)置的是viewport寬度，可以設(shè)置device-width特殊值
initial-scale：初始縮放比，大于0的數(shù)字
maximum-scale：最大縮放比
minimum-scale：最小縮放比
user-scalable：用戶是否可以縮放，yes或no（1或0）
<!--viewport只有移動(dòng)端才能識(shí)別-->
<!--設(shè)置寬度 設(shè)置成和設(shè)備一樣的寬度(width=device-width)-->
<!--設(shè)置默認(rèn)的縮放比 initial-scale =1.0-->
<!--設(shè)置是否允許用戶自行縮放 user-scalable：no or yes-->

2.3 設(shè)置方法

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

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

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

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

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

響應(yīng)式布局：使用媒體查詢的方式，通過查詢?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è)置的尺寸大小。

3.3 彈性盒模型

詳解點(diǎn)擊鏈接：https://blog.csdn.net/qq_42451979/article/details/80753153

寫在最后：以上是我對(duì)移動(dòng)端開發(fā)的部分理解，詳細(xì)內(nèi)容稍后更新。