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

移動端web

發布時間: 2022-02-24 11:26:25

① 移動前端開發和 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移動端網站前端和app前端,這兩個有什麼區別么技術和本質上的區別

1,開發語音不一樣,安卓是java,ios是swift語音,web是html,一般來說web前端相對簡單點。
2,開發工具不一樣,安卓是Android studio Ios是xcode,web是eclipse等。
3,唯一相同都是程序,邏輯想通,實現方法不一樣。

④ Web前端pc和移動端的區別

pc,我們需要考慮五大瀏覽器,ie6-11,firefox,chrome,safari都得兼容的吧。css還是js,以及各種框架。
mobile的網頁開發,我們需要考慮什麼呢?
就目前來說,我們只需要考慮webkit內核的瀏覽器和chrome,uc,qq,小米手機瀏覽器就好了
1、PC端在開發過程中考慮的是瀏覽器兼容性,移動端開發中考慮的是手機兼容性問題,做移動端開發,更多考慮的是手機解析度的自適應和不同手機操作系統的略微差異化;

2、在部分事件的處理上,移動端自然是偏向於觸屏的,另外包括移動端彈出的手機鍵盤該如何處理,這樣的問題在PC上肯定不會遇到,但在移動端,如果你沒有經驗,處理起來是相當麻煩的;
3、布局上,移動端開發是要做到頁面布局自適應的,而PC端頁面布局的比例會相對固定;
4、在動畫效果處理上,PC端要考慮IE的兼容性,通常用JS做動畫的通用性會好一些,但相比CSS3卻犧牲了較大的性能,而在手機端,如果要做一些動畫、特效等,第一選擇肯定是CSS3,既簡單,效率又高。
在實際中肯定還有其他一些不常見的問題

⑤ 移動前端開發和 Web 前端開發的區別是什麼

1.web前端開發

用最簡單粗暴的方式來講,就是用html + css + javascript來構建一個供人瀏覽的網頁,其中又包括兩個主要的分類:pc端網頁開發以及移動端網頁開發(很多時候被稱為h5開發)。
那麼這兩者有什麼區別呢,依據本人的經驗來看,pc端的網頁開發要考慮更多樣式兼容性的問題,ie,火狐,chrome等各大瀏覽器內核不一,使用到新特性的時候需要給樣式加上最基礎的兼容前綴,所以最好的做法還是盡量避免使用新樣式屬性來完成預期的效果。在移動端開發網頁就基本不用考慮這種瀏覽器間的兼容問題了,手機上的瀏覽器絕大部分是webkit內核的,所以在移動端網頁開發的時候能用到很多新的特性,像是極大簡便了頁面布局的flex布局,還有各種語義化的標簽等。但是由於移動端手機的尺寸種類繁多,所以在這方面要下點功夫,舉個最簡單的例子就是一行本來是能顯示3個目標的item但是在某些小尺寸的手機上只能顯示2個。其他還有一些細微的區別例如js庫的選擇(pc上用jQuery,移動端用zepto等)。
像一個官方網站肯定是需要在pc上以及移動端都能有較好的顯示效果,為了解決這個問題的方案主要有2種。一是使用像是bootstrap這種自適應的網頁UI框架,根據設備的寬度不同顯示不同的效果。但是現在主流還是做2套UI再根據UserAgent等來分別顯示不同的頁面,這樣在移動端的顯示能更靈活一點。
2.移動前端開發
主流的移動前端開發指的是Android一級iOS的原生開發,什麼是原生開發,最簡單來講就是Android用java寫iOS用ObjectC(swift)寫。這樣做出來的app在瀏覽體驗上肯定是優於網頁的。
由於原生開發需要兩個端開發,開發周期長(原生開發難度比web開發要大),所以最近很多公司都會把產品的一些頁面抽出來用webview來實現,甚至還可以使用phonegap將你的網頁打包成app(可以理解為純webview的一個app)。這樣的app稱為hybrid app,可以說是在開發效率以及用戶體驗上各有取捨得出來的產物吧。本人也是使用過ionic以及react native這兩個hybrid app框架,可以說是節約時間人力成本的一種不錯的選擇吧,並且還能讓你一個web程序員產生了一種自豪感:「卧槽我居然能開發app了。」

⑥ 移動端Web App和WAP有什麼不同

移動端Web App和WAP有什麼不同?最直接的區別就是功能層面。WAP更側重使用網頁技術在移動端做展示,包括文字、媒體文件等。而Web App更側重「功能」,是使用網頁技術實現的App。總的來說,Web App就是運行於網路和標准瀏覽器上,基於網頁技術開發實現特定功能的應用。
WebApp是指基於Web的系統和應用,其作用是向廣大的最終用戶發布一組復雜的內容和功能。ASP,PHP,HTML,JAVA等。使用這些常見的網路開發工具,可以製作絕大部分的webapp程序,使其在網站頁面上實現傳統的C/S架構軟體的功能,也就是我們常說的SaaS模式。

從一個簡單的幫助消費者計算汽車租借費用的網頁,到為商業人員和度假者提供全套旅遊服務的大型復雜的WEB站點,都是WebApp。它包括一些完整的WEB站點,WEB站點的專門功能以及在Internet、Intranet或ExtraNet上的信息處理應用。
當用戶登錄一個網站(如Pixlr),大家很容易理解這是在訪問一個Web App。但是對那些僅僅提供基礎服務(如電話查詢或是信息查詢)的網站,區分用戶是否在訪問Web App就變得相當困難了。
其實這些服務大多都是Web App。我常常這樣問自己「這個程序是否完成了某個任務?」。即便它只完成了某個非常小的任務,那麼它也是一個Web App。Google的搜索引擎就是一個Web App,它本質上和電話查詢服務沒有什麼區別。
這樣說來,也並非所有的網站都是Web App。如果這個網站並沒有執行任何任務,那麼它就並不是Web App。

⑦ 移動前端開發和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,不過效果一般

⑧ 移動前端開發和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前端和移動web前端有什麼區別

web前端開發包括pc端開發和移動端開發,應該是屬於包含關系,用到的技術無非都是html+css+js/jquwey/ajax/json等前端技術,但是移動web前端主要用html5+css3來實現,現在流行的一種webapp,就是用純html5+css3來實現的,任何手機平台都可以用,不需要考慮安卓或者ios系統的顧慮,所以web前端的發展前景還是很不錯的

⑩ 移動端Web和Webapp有什麼區別

web是一個站點的總稱,任何站點都可以稱之為web。
webAPP就是web應用,一個具有完備實現某一個功能的程序,都可以稱之為應用。比如一個看小說的閱讀器,一個播放器等等。webAPP就是這類的應用是基於瀏覽器運行的。
webAPP都是web,web不一定都是APP。
大約就是這樣。
從開發的角度來看,並沒有區別,都是開發~只是技術選型不同罷了。