當前位置:首頁 » 網頁前端 » 移動和web的區別
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

移動和web的區別

發布時間: 2022-06-03 20:48:04

『壹』 移動前端開發和 Web 前端開發的區別是什麼

1,普通pc端開發與移動端開發區別。
先說背景,我大言不慚的說一下,我pc端的前端開發幹了有快4年多,不算大牛,也算一個標準的前端開發工程師吧,可憐的是我2015年之前做過的移動端項目不超過1個。。所以幾乎經驗為零。我對這個神秘又被炒的火熱的名字迷惑了很久,移動前端開發工程師,h5前端開發工程師,native前端開發工程師,Hybrid前端開發工程師,卧槽感覺屌屌的有木有啊。。
所以我在15年決定棄坑了(pc的代碼實在寫膩歪了。。),投身到專屬的移動開發中,業余時間也做過phonegap,也知道和了解過一些h5+native開發的方式,下面就慢慢給大家【科普】一下。。說錯了別噴。
普通pc端開發,我理解就是你拿電腦打開的網頁都算【這不是廢話么】。
那麼移動端前端開發工程師,說白了就很好理解了,做手機網頁的前端開發工程師。
這么一比,是不是感覺,移動端開發簡單多了?
沒錯,我轉了之後發現還真是呢。。。【還有點小激動】
pc,我們需要考慮什麼呢?有點開發經驗的同學都知道,ie6-11,firefox,chrome,safari都得兼容的吧。哪個都夠你吃一壺的,無論是css還是js。
mobile的網頁開發,我們需要考慮什麼呢?
就目前來說,我們只需要考慮webkit內核的瀏覽器和chrome,uc,qq,小米手機瀏覽器就好了。。。【後面特意會說這幾只國產瀏覽器哪裡屌了】
相比較而言,除了經驗是0以外,需要兼容的東西還是少了,少了,少了呢。
ok,單純說pc和移動端開發的區別,其實也就是這個,可以簡單的概括來說,mobile端的網頁開發比pc端的網頁開發,更簡單一些。【頁面小了啊,裝的東西少了,css和html寫的少了吧】交互簡單一些【滑動,觸屏,手勢,平時看看手機你還能有啥特殊操作?】
so,別被這玩意嚇壞了,根據我的經驗來看,pc端的前端開發程序員,轉mobile開發,一點問題沒有,而且上手會很快。
夠直白的解釋了。
2,移動端web app開發與套殼開發區別。
移動端web app,移動端網頁,Hybrid開發【我喜歡叫套殼開發工程師……】,無所謂叫什麼,移動端開發無疑就是這3種了。下面一一解釋下我的理解。
移動端web app是什麼呢?簡單理解就是頁面頭部加入了下面這一句話的東西:

<meta name="apple-mobile-web-app-capable" content="yes">

這個meta的作用是讓普通移動網頁被添加到主屏幕後,擁有一些類native的功能,很多同學應該都很熟悉了。就是類似隱藏ios的上下狀態欄,實現全屏,禁止彈性拖拽,全屏,修改頂部顏色等。
我理解這種模式的網頁為web app,當然還有一種類型就是大家平時都訪問的那些網站,比如手機taobao,手機美團,手機微博的網頁版,大家打開的時候,不是全屏的,但是用起來,開發者把它們偽裝的很像這種web app的交互體驗而已。
以上2種我覺得可以總結為web app。而不是普通的移動端網頁,如果想看移動端網頁,可以參考手機新浪網,手機網頁,手機騰訊新聞,手機鳳凰,是很好的對比。
之後我來說下套殼的吧。這部分如果沒有開發過phonegap或者類似和native連調過webview的同學,可能覺得很陌生,其實不是,這種套殼開發和開發普通的網頁沒什麼區別,只不過資源大部分是file開頭的,本地資源,網路資源分為使用js非同步介面獲取和native獲取,再和js的介面交互,類似ios中,可以直接在oc或者swift可以直接在webview中執行js,android同理,但是js想調用native功能怎麼辦呢?
我們這邊的做法是有一個負責通訊的iframe,我們通過修改這個iframe的url,來讓native來監控一系列特殊的url地址請求,再在native中調用對應的功能,比如攝像頭,特殊交互,呼起,或者提供介面數據。數據的提供方式類似jsonp的原理,在執行函數的參數中傳回來。
理解了這塊,其實做套殼的比做普通web app和網頁都簡單,因為在native的webview中是可以指定是什麼版本的webview,用什麼內核,擁有什麼等級的安全許可權等等,ios和android做法不一樣,但是原理一致,對於前端開發工程師來說是無差的。
而且套殼開發還有個好處就是,因為資源是本地化的,所以可以使用比較重的框架,如angular,react,一些三方框架,因為最終都是通過和native代碼捆綁發布的。
套殼native的靜態前端部分的更新,我們可以使用遠程下載靜態資源包的方法實現,不發布大版本而修改webview中邏輯的需求,這一點也是大部分公司選擇一半native一半h5來開發的原因。都知道ios審核發版很慢。
這些就是我知道的一些很通俗的區別了,技術細節就不說了,太多。大家有個概念就好啦。

『貳』 移動前端開發和web前端開發有什麼區別

移動前端開發和web前端開發有什麼區別呢?既然都是前端開發,兩者肯定有緊密的聯系,移動前端開發和web前端開發其實都屬於前端開發的范圍,目前前端發展的趨勢就是大前端,可以說是包羅萬象,當然也就包含PC端和移動端領域,而現在的前端開發人員也已早就不是當年的切圖仔了,需要學習和掌握大前端體系方方面面的知識才能在日常的開發中游刃有餘,但是不論趨勢如何發展,目前來看HTML、CSS和Java依然是整個前端開發的三大基石。不論是想做移動前端開發還是web前端開發,這三樣基礎技術都必須熟練掌握。移動前端開發和web前端開發有什麼區別呢?
1、業務的應用場景
web前端開發主要指傳統的PC端網頁開發,頁面主要是運行在PC端瀏覽器中,移動前端開發出來的頁面主要是運行在手機上;直觀上會感覺,PC端頁面大一些,移動端頁面小一些,但是根據開發經驗,頁面大可並不代表書寫的代碼復雜,頁面小也並不意味著開發簡單,難與易主要還是取決於具體的業務需求。
2、新技術的使用
由於在移動端主要以webkit內核為主,對於HTML5等新技術支持的更好,所以可以更大范圍的使用新技術;而PC端開發由於很多場景下要求兼容IE等老版本瀏覽器,出於瀏覽器兼容性的考慮,有些情況下限制了新技術的使用。
3、頁面的適配性
傳統PC端的頁面開發一般都會選擇給頁面設定一個固定寬度,兩側有留白,但是移動端的頁面由於其載體手機屏幕比PC要小很多,一般都會選擇盡可能多的在手機屏幕上顯示內容,這就要求移動端頁面要能夠充分適應各種屏幕尺寸的手機並進行最大程度的利用。從這一點上來說移動端頁面的適配難度更高一些。
4、頁面的性能
PC端的網路情況一般比較穩定,都是通過網線或者Wi-Fi連接網路;但是移動端就比較復雜,除了Wi-Fi,還有2G、3G、4G甚至是在幾種不同的網路連接中交替切換也經常發生,不穩定的網路連接對頁面性能帶來的挑戰是移動端的頁面資源不能太大,否則在惡劣網路情況下時,頁面將會無法訪問 ,嚴重影響用戶體驗。移動前端開發和web前端開發有什麼區別
5、框架選型
由於移動端網路情況的不穩定,導致我們在移動端頁面框架選型時,一般只考慮小而美的框架,例如像zepto.js這樣的壓縮之後只有9.6K,就能滿足一般業務的需要,如果是想要構建更復雜的單頁面應用,可以選擇像vue.js這樣的框架,功能強大,但體積壓縮後卻只有20多K。而web端相對選擇的范圍就比較大,一些比較重型的框架也可以根據項目需求加以考慮,例如古老但龐大的ext.js,依然憑借著眾多UI組件活躍在一些企

『叄』 移動測試和Web測試有什麼區別

從本質上來說, 移動測試和Web測試都是一樣的, 測試理論,測試方法都是一樣的。

但是移動端,比如手機和平板電腦, 也有一些需要特殊測試的地方,

閱讀目錄

移動測試和Web測試的簡單回答

相同點, 都是採用功能測試

一個在Web上測試, 一個在App測試

相同點: 同樣的測試的基礎知識

不管是傳統的Web測試, 還是新興的手機App測試, 都離不開測試的基礎知識

1. 相同的設計測試用例方法: 邊界值,等價類,錯誤推導法,場景法

2. 同樣的測試方法, 驗證業務功能是否符合預期

3. 都要檢查UI: 界面的布局, 風格和按鈕是否簡潔美觀, 是否統一
4. 頁面的性能檢測

5. 應用的穩定性: 測試應用的穩定性, 不會閃退卡死等。

後台都是一樣的

移動測試和Web測試, 他們調用的是同樣的後台, 同樣的Restful API。

所以首先做好後台的RestfulAPI 測試。

移動測試強調用戶體驗

移動APP, 實質上就是一個縮小的Web程序, 屏幕小,操作不方便,所以強調用戶體驗。

移動APP的測試, 業務都相對簡單

移動App, 一般都是面向個人用戶的, 通常操作比較簡單, 業務邏輯也比較簡單。 所以測試起來會相對簡單點。

移動端的特性

移動端有很多的特性,需要特殊測試

網路種類多

移動端有多種網路:無線網路、2G、3G、4G等,斷網、網速較差及網路之間的切換時頁面的顯示等,這些對於移動端來說很重要。此外,在非wifi下,還需要注意網路使用量問題。

弱網測試

模擬App在網速慢,網路不穩定的情況下。

中斷測試

移動端有一個很重要的問題,一般情況下在使用軟體的過程並不是長久的,這中間可能發生很多中斷,如電話、簡訊、通知、斷電等等,軟體

需要特殊處理這些特殊情況。
打開一個頁面,或在操作的過程中(點擊一個按鈕後),將手機屏幕鎖住,再打開時,應用能否正常處理。

1. 來電中斷: 呼叫中斷, 被呼叫掛斷,通話掛斷,通話被掛斷

2. 簡訊中斷: 接受簡訊, 查看簡訊

3. 其他中斷: 藍牙,鬧鍾,插拔數據線, 手機鎖定, 手機斷電, 手機問題(系統死機, 重啟)

屏幕的限制

圖片及文字的顯示;上傳不同的圖片尺寸顯示是否正常;圖片和文字一起顯示時,效果如何。
操作區域;web端的應用,一般不會受 到屏幕的限制,而且通過滑鼠操作更加准確。但是移動端由於屏幕較小,頁面及按鈕會受到屏幕大小的限制,再加上用戶都是通過手指進行操作,一些按鈕、選擇框 等是否容易點擊,多個可點區域位置較近時,點擊部位稍微偏移,也許就會造成不同的結果,這種情況下是否可以達到預先的效果。

安裝卸載測試

用應用市場安裝

用apk文件安裝。

完全卸載(用戶的profile文件)

部分卸載

升級測試

從上一個版本/上兩個版本直接升級到最新版。

全新安裝最新版

新版本覆蓋舊版本安裝

卸載舊版本, 安裝新版本

卸載新版本, 安裝新版本

增量更新

強制更新

測試點在於: 升級之後, 已經登錄的用戶,是否仍處於登錄的姿態, 用戶的緩沖文件, 配置文件是否還在。

軟體啟動運行

移動端啟動、卸載、升級幾個特性,這是比較常見、也很重要的,比如升級時用戶的數據怎麼辦,卸載後用戶的數據怎麼處理,卸載再安裝用戶登錄數據的顯示等。

手勢

移動端還有一大特性,就是移動端有自己比較簡單的手勢,用戶可以通過手勢進行一個操作,比如左滑刪除、右滑返回上一個頁面、左右滑動圖片等,軟體需要對這個手勢進行適配。

多點觸控,

事件觸發區域

自動化工具不太一樣

App 測試 用的是, Monkey, MonkeyRunner, Appnium,
Web 主要用: Webdriver

『肆』 WEB應用和移動應用的區別

web應用提供使用移動設備訪問即可統稱為移動應用,當然專門做移動應用的會說有什麼什麼重要的區別,但對於老百姓來說,就是IT技術用在了移動設備上,移動和雲,現在似乎更多是體現在消費IT上,即改變了通過IT賺錢的辦法

『伍』 移動前端開發和 Web 前端開發的區別是什麼

移動前端開發和web前端開發都屬於前端開發,具體有以下區別。

1、業務的應用場景

web前端開發主要指傳統的PC端網頁開發,頁面主要是運行在PC端瀏覽器中,移動前端開發出來的頁面主要是運行在手機上。

直觀上會感覺,PC端頁面大一些,移動端頁面小一些,但是根據開發經驗,頁面大可並不代表書寫的代碼復雜,頁面小也並不意味著開發簡單,難與易主要還是取決於具體的業務需求。

2、新技術的使用

由於在移動端主要以webkit內核為主,對於HTML5等新技術支持的更好,所以可以更大范圍的使用新技術,而PC端開發由於很多場景下要求兼容IE等老版本瀏覽器,出於瀏覽器兼容性的考慮,有些情況下限制了新技術的使用。

5、框架選型

由於移動端網路情況的不穩定,導致我們在移動端頁面框架選型時,一般只考慮小而美的框架,例如像zepto.js這樣的壓縮之後只有9.6K,就能滿足一般業務的需要,如果是想要構建更復雜的單頁面應用,可以選擇像vue.js這樣的框架,功能強大,但體積壓縮後卻只有20多K。

而web端相對選擇的范圍就比較大,一些比較重型的框架也可以根據項目需求加以考慮,例如古老但龐大的ext.js,依然憑借著眾多UI組件活躍在一些企業的後台管理系統項目中。

『陸』 移動前端開發和 Web前端開發的區別是什麼

移動前端開發和web前端開發的區別是:

移動端前端開發是做手機網頁的前端開發,web前端開發是桌面網頁的前端開發。

伺服器端開發,也叫後台開發,這是唯一的,對應不同的平台,他負責數據的分發與存儲,和一些邏輯的處理,邏輯處理的多少由業務的復雜程度決定。服務端相對是獨立,與平台沒啥關系。

上述中不同的平台指web平台、移動設備平台等,移動設備又可分為Android平台、iPhone平台等。

每個平台都有自己的規范和開發技術。web平台的規范是鍵盤+滑鼠,開發技術是html+css+javascript;移動設備平台的規范是鍵盤+手指(觸摸和手勢),開發技術iPhone是Objective-C,Android是java。

業界很少有說移動web前端開發的,都是移動web開發。而web app特指的是用html5技術開發,之所以叫web app是因為他比較接近客戶端應用程序的用戶體驗,可以和系統深度融合,調用一些只有客戶端才能調用的功能,比如在移動設備上利用html5開發出的網頁可以訪問電話、攝像頭等本地功能。

通常看到的一些文章中會提到web app 和native app,這里的web app指的是mobile web app,而移動web和web開發沒本質的區別,但需要不同的開發框架,以解決在移動設備上的適配問題和一些特殊的操作以及功能調用。

web開發利用的是基於瀏覽器的網頁語言技術,native app開發利用的是基於操作系統的程序語言技術,web app介於兩者之間.當然現在比較流行混合型app。

『柒』 移動APP與web APP的區別,能詳解下嗎

開發方面的區別
移動Web App
1、因為運行在移動設備的瀏覽器上,所以只需要一個開發項目
2、這種應用可以使用HTML5,CSS3以及JavaScript以及伺服器端語言來完成(PHP,Ruby on Rails,Python)
3、這里可沒有標準的SDK,基本任意選擇別忘了有一些跨平台的開發工具,比如PhoneGap, Sencha Touch 2以及Appcelerator Titanium等等。
原生App
1、每一種移動操作系統都需要獨立的開發項目
2、每種平台都需要獨立的開發語言。Java(Android), Objective-C(iOS)以及Visual C++(Windows phone)等等
3、需要使用各自的軟體開發包,開發工具以及各自的控制項
能力方面的區別
移動Web App,只能使用有限的移動硬體設備功能。原生App,能夠與移動硬體設備的底層功能,比如個人信息,攝像頭以及重力加速器等等
獲取方法的區別
移動Web App
1、從移動設備上的瀏覽器訪問
2、不需要安裝額外的軟體
3、軟體更新只需要伺服器就夠了
4、因為現在沒有什麼商品或賣場提供這種App,所以如何搜索這些移動Web App相當不簡單
原生App
1、直接下載到設備
2、以獨立的應用程序運行(並不需要瀏覽器)
3、用戶必須手動去下載並安裝這些原生App
4、有一些商店與賣場來幫助用戶尋找你的App,目前app市場不計其數,比較
版本控制的區別
移動Web App,所有的用戶都是用同樣的版本。原生App,用戶可以自由地選擇是否更新軟體版本,所以會出現不同用戶同時使用不同版本的情況
原生App的優勢:
1、比移動Web App運行快
2、一些商店與賣場會幫助用戶尋找原生App
3、官方賣場的應用審核流程會保證讓用戶得到高質量以及安全的App
4、官方會發布很多開發工具或者人工支持來幫助你的開發
移動Web App
1、跨平台開發,用戶不需要去賣場來下載安裝App
2、任何時候都可以發布App,因為根本不需要官方賣場的審核
原生APP的特點:
1、每次獲取最新的APP功能,需要升級APP應用;
2、原生型APP應用的安裝包相對較大,包含UI元素、數據內容、邏輯框架;
3、手機用戶無法上網也可訪問APP應用中以前下載的數據。
4、原生型的APP可以調用手機終端的硬體設備(語音、攝像頭、簡訊、GPS、藍牙、重力感應等)
5、APP應用更新新功能,涉及到每次要向各個應用商店進行提交審核。
App測試方面
不管是移動web App還是原生App,都是需要在移動終端上運行的,那麼對移動終端的兼容性配適的需求就是一樣的。基本上線前,都需要進行app兼容性測試,app功能測試等,確保產品質量和用戶體驗。
testbird

『捌』 移動前端開發和web前端開發的區別

移動前端開發和web前端開發其實都屬於前端開發的范圍,目前前端發展的趨勢就是大前端
那麼他們的區別在哪呢?我給你分析一下:
1、新技術的使用
目前移動終端主要以Webkit內核為中心,更好地支持HTML5等新技術,讓新技術得到更廣泛的應用。但是PC終端的開發需要兼容IE等老瀏覽器,所以新技術的應用必須考慮瀏覽器的兼容性。
2、業務的應用場景
Web前端開發主要是指傳統的在電腦端開發網頁,網頁主要運行在PC端,而手機端開發的網頁運行在手機端。這兩者沒有區別,孰難孰易。開發難度主要看業務需求。
3、頁面的適配性
在傳統的PC端頁面開發中,需要為頁面設置固定的寬度,以確保兩側都有頁邊距。但是移動頁面會選擇在手機屏幕上顯示盡可能多的內容,因為它的運營商手機屏幕比PC端小得多。這時候就要求移動頁面要能完全適應各種屏幕尺寸的手機,最大限度地利用。從這個頁面的適應性來看,移動端比PC端更難。
4、頁面的性能
一般情況下, PC端的網路通過網線或 WIFI與網路相連,而移動端則比較復雜。除 WIFI外,還有2 G、3 G、4 G、5 G,甚至常常會有多個不同網路連接間的切換。因此, PC端的網路狀況將比移動端更加穩定。移動端的頁面資源不能太大,否則當網路狀況不好時,頁面無法訪問,這對網頁性能造成了很大的影響。
以上就是我給你分享的關於移動前端和web前端的區別,希望我的回答對你有所幫助

『玖』 移動前端和web前端的區別是什麼

移動前端指的是手機等移動設備的界面,也就是說是pc端與wap端的區別,而一般常說的前端大部分指的是web前端了,兩者在開發設計所用的語言上也有區別,移動端原生APP,也就是完全使用移動設備系統語言寫的客戶端,iPhone iPad就是純Object-C,安卓就是純JAVA。wap或者pc的網頁前端都是瀏覽器里打開的,用純HTML+CSS+JS。兆隆IT雲學院這種web前端學習課程基本上就是以HTML,js,jQuery這些知識為基礎重點,然後附以移動端語言學習的。

『拾』 移動前端開發和web前端開發有什麼區別

移動前端開發和 Web 前端開發的區別是:
1、前端是相對比較大的概念,一般是指用戶能夠看到、直接接觸的界面都算是前端,比如iOS界面,安卓界面,網頁界面,PC/Mac桌面軟體的界面。最常見的是Web前端,也就是針對於網頁端開發的工作。

2、Web App即Web application,也就是以瀏覽器作為客戶端的軟體。例如,用桌面客戶端來收發郵件,但也可以直接用瀏覽器登陸gmail或者QQ郵箱,直接使用網頁版的軟體來使用。總之就是使用網頁版代替本地軟體。
Mobile Web App就是在手機端打開的Web App。例如Gmail的移動端軟體

3、目前,移動客戶端的開發主要包括三種類型:
Native App(原生APP):也就是完全使用移動設備系統語言寫的客戶端。iOS系統就是使用Objective-C語言來編寫本地應用,也可以使用蘋果於2014年蘋果開發者大會上發布的SWIFT語言;Android平台就是使用Java語言來開發。原生APP就是從界面到交互都是使用官方標准語言來編寫,效率和穩定性都是最好的,但欠缺靈活性。
Web App:這個就是在移動瀏覽器里打開的,使用Web前端開發語言HTML CSS JavaScript來開發的,基本上就是個網頁,
Hybrid App:主要使用HTML5實現。一般使用Native語言實現一個容器,然後使用HTML CSS JS來實現用戶界面和交互。這樣方式既克服了Web App容器暴露偏底層的介面這樣的問題,同時比起原生的開發靈活性要高。這樣就更新可以更方便快捷,也不依賴於市場。例如,豌豆莢其實是個PC端的hybrid app 。
對於以上三種開發方式的比較和分析搜索引擎裡面有太多的內容了,這里也就不再贅述了。

4、移動端網頁布局方法與pc的差異。
主要是css方面,外加如何做到同一url,不同客戶端展現不一致的做法,俗稱pc和mobile都兼容。還有會說一下rem的相關用法和一段比較經典的rem.js

最後總結一下:
其實這兩者最顯著的區別就是,web app是不依賴於具體的設備的,通用性較強,只要手機或PC有相應內核的瀏覽器就基本OK。而mobile的app則依賴於具體的設備,一旦更換設備,需要重新下載才能繼續使用。
移動前端開發 主要來說的是Native Client的開發Android為Java,iOS為Objective-C,然後么HTML5應用號稱跨平台其實差異很大。
Web前端開發么基本上就是HTML JavaScript CSS,不過有些人把Servelt/JSP, PHP,Ruby,Python,C#之類的只要關繫到頁面的也叫做Web前端開發。
app是應用,每個操作系統有專門的開發工具和語言
web是網頁,使用html+css+js,有工具可以生成轉化為app,不過效果一般