1 移動端開發(fā)分類1.1 Native App 原生App開發(fā)長處：

（1）用戶體會好

（2）功能安穩(wěn)

（3）操作速度快

（4）能夠拜訪本地資源（通訊錄，相冊）

（5）能夠規(guī)劃超卓的動效，轉(zhuǎn)場

（6）具有系統(tǒng)等級的貼心告訴或提醒

（7）用戶留存率高缺陷：

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

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

（3）更新緩慢，根據(jù)不同渠道，提交–審核–上線流程較雜亂?？偟膩碚f，native app開發(fā)從android、ios智能手機呈現(xiàn)就有了開發(fā)技能，功能體會最優(yōu)，API比較完善，可是學(xué)習(xí)起來難度比較高，開發(fā)本錢比較高（跟開發(fā)周期相對來說比較長也是有聯(lián)系的）。

2 Web App 網(wǎng)頁App開發(fā)長處：

（1）發(fā)版徹底自控，隨時更新

（2）跨渠道，由于本身來說用的是Web的東西，所以能夠在恣意渠道上運行

（3）本錢小，Web頁面嵌入Webview開發(fā)起來速度非?？欤粋€人就能夠輕松搞定缺陷：

（1）功能差

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

（3）適用有展示類需求的項目，可是假如要完成的功能比較雜亂的話就顯得力不從心總的來說，相比Native App，Web App體會中受限于網(wǎng)絡(luò)環(huán)境和烘托功能。Web APP對網(wǎng)絡(luò)環(huán)境的依賴性較大，由于Web APP中的H5頁面，當(dāng)用戶運用時，去服務(wù)器懇求顯現(xiàn)頁面。假如此刻用戶恰巧遇到網(wǎng)速慢，網(wǎng)絡(luò)不安穩(wěn)等其他環(huán)境時，用戶懇求頁面的功率大打折扣，在用戶運用中會呈現(xiàn)不流暢，時斷時續(xù)的不良感觸。一起，H5技能自身烘托功能較弱：對雜亂的圖形樣式，多樣的動效，自定義字體等的支撐性不強。因此，應(yīng)留意以下幾點：

1.簡化不重要的動畫/動效；

2.簡化雜亂的圖形文字樣式；

3.削減頁面烘托的頻率和次數(shù)。

3 Hybrid App 混合型App開發(fā)長處：

（1）體會好

（2）安穩(wěn)性強動態(tài)性強

（3）本錢相對低跨渠道缺陷：對團隊技能棧要求相對高功能優(yōu)化Hybrid App就是Native結(jié)合Web混合開發(fā)，Native+JS代碼代表作是cordova前身是phonegap，現(xiàn)在移交給Apache，中心JsBridge，JS調(diào)Java，Java調(diào)JS。由于混合開發(fā)，所以體會挨近原生、安穩(wěn)性強并且發(fā)版快。

2 Viewport視口

2.1 視口視口是移動設(shè)備上用來顯現(xiàn)網(wǎng)頁的區(qū)域，一般會比移動設(shè)備可視區(qū)域大，寬度可能是980px或許1024px，意圖是為了顯現(xiàn)下整個為PC端規(guī)劃的網(wǎng)頁。這樣帶來的后果是移動端會呈現(xiàn)橫向滾動條，為了避免這種狀況，移動端會將視口縮放到移動端窗口的巨細(xì)。這樣會讓網(wǎng)頁不容易觀看，能夠用meta標(biāo)簽，name="viewport"來設(shè)置視口的巨細(xì)，將視口的巨細(xì)設(shè)置為和移動設(shè)備可視區(qū)相同的巨細(xì)。在移動端用來承載網(wǎng)頁的這個區(qū)域，就是我們的視覺窗口，viewport（視口），這個區(qū)域能夠設(shè)置高度寬度，能夠按份額放大縮小，并且能設(shè)置是否答應(yīng)用戶自行縮放。

2.2參數(shù)闡明width：寬度設(shè)置的是viewport寬度，能夠設(shè)置device-width特殊值initial-scale：初始縮放比，大于0的數(shù)字maximum-scale：大縮放比minimum-scale：最小縮放比user-scalable：用戶是否能夠縮放，yes或no（1或0）

2.3 設(shè)置方法3 移動端適配布局運用百分比自適應(yīng)布局（流式布局）一起需要對移動端的viewport視口進(jìn)行設(shè)置，就能夠到達(dá)適配的意圖。

3.1 流體布局+少量呼應(yīng)式流體布局：運用百分比來設(shè)置元素的寬度，元素的高度按實際高度寫固定值，流體布局中，元素的邊線（border）無法用百分比，能夠運用樣式中的計算函數(shù)calc()來設(shè)置寬度，或許運用box-sizing屬性將盒子設(shè)置為邊線計算盒子尺度。呼應(yīng)式布局：運用媒體查詢的方法，經(jīng)過查詢?yōu)g覽器的寬度，不同的寬度應(yīng)用不同的樣式塊，每個樣式塊對應(yīng)的是該寬度下的布局方法，然后完成呼應(yīng)式布局，呼應(yīng)式布局的頁面能夠適配多種終端屏幕（pc、平板、手機）。

3.2 根據(jù)rem的布局rem指的是參照根節(jié)點的文字巨細(xì)，根節(jié)點指的是html標(biāo)簽，設(shè)置html標(biāo)簽的巨細(xì)，其他的元素相關(guān)尺度設(shè)置用rem。這樣，一切元素都有了統(tǒng)一的參照規(guī)范，改動html文字的巨細(xì)，就會改動一切元素用rem設(shè)置的尺度巨細(xì)。

聲明：本文來源網(wǎng)絡(luò)資料收集整理，如有侵權(quán)，及時告知我們給予刪除。

本文標(biāo)題：移動端開發(fā)之webapp開發(fā)
標(biāo)題網(wǎng)址：http://aaarwkj.com/news/218231.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、虛擬主機、品牌網(wǎng)站制作、網(wǎng)頁設(shè)計公司、網(wǎng)站策劃、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)