移動端開發分類

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）

2.3 設置方法

3 移動端適配布局

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

3.1 流體布局+少量響應式

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

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

3.2?基于rem的布局

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

感謝閱讀

喜歡看小編文章的點個訂閱或者喜歡！小編每天都會跟大家分享文章，也會給大家提供web前端學習資料。

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.junxiaosheng.cn/12492.html