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

1 移動端開發分類

1.1 Native App 原生App開發

優點：

（1）使用者體驗好

（2）效能穩定

（3）操作速度快

（4）能夠訪問本地資源（通訊錄，相簿）

（5）能夠設計出色的動效，轉場

（6）擁有系統級別的貼心通知或提醒

（7）使用者留存率高

缺點：

（1）開發成本高

（2）維護成本高

（3）更新緩慢，根據不同平臺，提交–稽核–上線流程較複雜。

總的來說，native app開發從android、ios智慧手機出現就有了開發技術，效能體驗最優，API比較完善，但是學習起來難度比較高，開發成本比較高（跟開發週期相對來說比較長也是有關係的）。

2 Web App 網頁App開發

優點：

（1）發版完全自控，隨時更新

（2）跨平臺，因為本身來說用的是Web的東西，所以可以在任意平臺上執行

（3）成本小，Web頁面嵌入Webview開發起來速度非常快，一個人就可以輕鬆搞定

缺點：

（1）效能差

（2）弱網路或無網路條件下體驗差

（3）適用有展示類需求的專案，但是如果要實現的功能比較複雜的話就顯得力不從心

總的來說，相比Native App，Web App體驗中受限於網路環境和渲染效能。Web APP對網路環境的依賴性較大，因為Web APP中的H5頁面，當用戶使用時，去伺服器請求顯示頁面。如果此時使用者恰巧遇到網速慢，網路不穩定等其他環境時，使用者請求頁面的效率大打折扣，在使用者使用中會出現不流暢，斷斷續續的不良感受。同時，H5技術自身渲染效能較弱：對複雜的圖形樣式，多樣的動效，自定義字型等的支援性不強。因此，應注意以下幾點：1.簡化不重要的動畫/動效；2.簡化複雜的圖形文字樣式；3.減少頁面渲染的頻率和次數。

3 Hybrid App 混合型App開發

優點：

（1）體驗好

（2）穩定性強動態性強

（3）成本相對低跨平臺

缺點：對團隊技術棧要求相對高效能優化

Hybrid App就是Native結合Web混合開發，Native+JS程式碼代表作是cordova前身是phonegap，現在移交給Apache，核心JsBridge，JS調Java，Java調JS。因為混合開發，所以體驗接近原生、穩定性強而且發版快。

2 Viewport視口

2.1 視口

視口是移動裝置上用來顯示網頁的區域，一般會比移動裝置可視區域大，寬度可能是980px或者1024px，目的是為了顯示下整個為PC端設計的網頁。這樣帶來的後果是移動端會出現橫向滾動條，為了避免這種情況，移動端會將視口縮放到移動端視窗的大小。這樣會讓網頁不容易觀看，可以用meta標籤，name="viewport"來設定視口的大小，將視口的大小設定為和移動裝置可視區一樣的大小。

在移動端用來承載網頁的這個區域，就是我們的視覺視窗，viewport（視口），這個區域可以設定高度寬度，可以按比例放大縮小，而且能設定是否允許使用者自行縮放。

2.2引數說明

width：寬度設定的是viewport寬度，可以設定device-width特殊值
initial-scale：初始縮放比，大於0的數字
maximum-scale：最大縮放比
minimum-scale：最小縮放比
user-scalable：使用者是否可以縮放，yes或no（1或0）
<!--viewport只有移動端才能識別-->
<!--設定寬度  設定成和裝置一樣的寬度(width=device-width)-->
<!--設定預設的縮放比  initial-scale =1.0-->
<!--設定是否允許使用者自行縮放  user-scalable：no or yes-->

2.3 設定方法

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

3 移動端適配佈局

使用百分比自適應佈局（流式佈局）同時需要對移動端的viewport視口進行設定，就可以達到適配的目的。

3.1 流體佈局+少量響應式

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

響應式佈局：使用媒體查詢的方式，通過查詢瀏覽器的寬度，不同的寬度應用不同的樣式塊，每個樣式塊對應的是該寬度下的佈局方式，從而實現響應式佈局，響應式佈局的頁面可以適配多種終端螢幕（pc、平板、手機）。

3.2 基於rem的佈局

rem指的是參照根節點的文字大小，根節點指的是html標籤，設定html標籤的大小，其他的元素相關尺寸設定用rem。這樣，所有元素都有了統一的參照標準，改變html文字的大小，就會改變所有元素用rem設定的尺寸大小。

3.3 彈性盒模型

詳解點選連結：https://blog.csdn.net/qq_42451979/article/details/80753153

寫在最後：以上是我對移動端開發的部分理解，詳細內容稍後更新。