Ⅰ 求教:移動端web頁面適配問題
之前默認使用的系統內置瀏覽器對象,去年應該已經在Android切換為第三方瀏覽器內核了。兼容性基本不用考慮,不需要考慮media
query了等等適配工作。基於參考要求,在任意一個終端上開發,在所有終端上都會有統一的展現。
基於em相對字體大小技術+屏幕DPI適配。
Ⅱ reactjs適合移動端的web頁面開發嗎
React是適合移動端,而不適合pc端的。
原因:
1、pc端使用React需要重做很多已有組件,包括但不限於highCharts圖表類、dataPicker基礎組件。
2、移動web app恰恰是不需要這類復雜的組件的,這給寫移動端項目重寫組件帶來了機會。
pc端要seo,移動端基本不需要,所以用這種數據後載入的框架有了可能。
3、用webpack編譯出來的基礎庫React + es6 + Route + rex + tappable,minify之後大概200k不到,gzip之後50k左右。所以明確的說,是適合移動端的。
4、不管是用etag或者Expires的強緩存,還是用localStorage做緩存。第一次訪問的50k基礎庫,都不是2g用戶的致命傷,2g致命傷是一個RTT的時間巨長。用React基本沒有操作需要zepto了,少了13k gzip之後的zepto,也少用一個模板引擎。
5、用了es6之後代碼編譯會顯大,但明顯這十幾k並不是阻止用React的理由。
可以試用一下微信錢包裡面的城市服務的首頁,剛剛做了React的嘗試,基本能做到秒出,以後會推到其它的微信商業項目中。
Ⅲ 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前端和移動web前端有什麼區別
web前端開發包括pc端開發和移動端開發,應該是屬於包含關系,用到的技術無非都是html+css+js/jquwey/ajax/json等前端技術,但是移動web前端主要用html5+css3來實現,現在流行的一種webapp,就是用純html5+css3來實現的,任何手機平台都可以用,不需要考慮安卓或者ios系統的顧慮,所以web前端的發展前景還是很不錯的
Ⅳ 手機WEB頁面開發跟PC端差別大嗎
差別大,主要差別在一下方面。
一、開發終端不同
1、手機端:以手機、PDA、UMPC等便攜終端為基礎,進行相應的開發工作。
2、PC端:是開發基於B/S(IE瀏覽器)的網頁開發是由若干個頁面組成的有聯系的集合。
二、開發方式不同
1、手機端:是為小型、無線計算設備編寫軟體的流程和程序的集合,像智能手機或者平板電腦。移動應用開發類似於Web應用開發,起源於更為傳統的軟體開發。
2、PC端:主要針對電子商務領域,不僅是網站美工和內容,可能涉及到網站的一些功能的開發,比製作有更深層次的意思。
三、特點不同
1、手機端:無線中間件(移動中間件)的原理就是把原生的功能封裝打包成簡單的API,開發人員只需要了解調用這些API的方法,即可完成移動開發。
2、PC端:針對不同的行業領域與市場規模,提供有針對性的解決方案,採用業內最優化的電子商務流程,以及各種受消費者歡迎的營銷工具。
Ⅵ 移動web和PCweb優化的區別
其實移動web和傳統的web並沒有本質的區別。但是,同一個頁面不可能被桌面瀏覽器和移動瀏覽器同時瀏覽,asp.net可以為移動web提供一個系統自適應結構,這個結構可以為瀏覽器提供特定的輸出,而且可以將呈現邏輯細分為較小的部分,這樣在顯示區域和輸入設備硬體都有限的情況下更好的工作。
移動web開發這部分跟web前端開發差別不大,使用的技術都是html+css+js。區別為手機瀏覽器是webkit的天下,pc端是IE的天 下。手機網頁可以理解成pc網頁的縮小版加一些觸摸特性。因為是在瀏覽器中進行的網頁開發,所有最終代碼具有跨系統平台的特性。web app開發特指的是用html5技術開發,之所以叫web app是因為他比較接近客戶端應用程序的用戶體驗,可以和系統深度融合,調用一些只有客戶端才能調用的功能(比如在移動設備上利用html5開發出的網頁可以訪問電話、攝像頭等本地功能).
Ⅶ 移動web前端開發 頁面重構布局
是這樣的,手機的屏幕有大有小,移動web最好做成響應式布局,也就是自適應屏幕,沒有固定寬高,這樣的話,在所有手機上都可以正常顯示。ico的話可以使用字體圖標,現在大部分手機瀏覽器都支持html5和css3的。
Ⅷ 移動前端開發和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頁面,用Jquery Mobile 嗎
方法/步驟1簡單的說明一下JQueryMobile.它是一個很好的跨平台的移動端網站開發框架。是一個前台的框架。現在要使用這個框架組一個界面,這個界面很簡單,但是麻雀雖小五臟俱全,然後模板實現,知識講解完畢。html要使用HTML5的標准來寫,因為JQueryMobile是基於HTML5的。書寫html5的格式如圖,2既然使用JQueryMobile就要有這個框架,這里可以使用本地引用的方式,和網上引用,也叫做cdn引用。就是比較穩定和快速的引用外部文件的一種方式。這里使用cdn的方式,這樣只要可以上網就可以使用該框架。3在寫移動端的網站的時候,一定要寫一個meta的name為viewport的屬性,因為該屬性代表著網站頁面的自適應。簡單的寫法為:代表著網站為驅動設備的寬度。4然後加入框架之後,寫一個簡單的界面。這裡面JQueryMobile大量的使用了一個data-的屬性,這里使用最多的事data-role。代表著他默認的樣式規則。就是提前定義好了很多的樣式來供你使用。常用的page.代表著頁面,listview,代表著一個列表視圖。下面是代碼和效果圖5稍微說明一下。data-role="page"是代表著一個頁面可以看做該內容下是一個頁面顯示的內容data-role=」header"代表著頁面的頁頭,就是頁面的最上面顯示的內容這里需要注意,裡面要加上子標簽內容,要不然,就不會居中顯示內容了。推薦使用h1.data-role="footer"代表著頁腳的內容。也是網站的一個說明信息。或者是一個底部導航菜單。還有一部分,就是data-role="content"是代表著頁面內容部分,主要的內容在這裡面顯示。這3個部分構成了一個簡單的頁面。所以,現在可以體驗到它的強大,不用寫太多的代碼一個簡單的框架就好了,下面繼續增加一個listveiw的列表視圖。6完成列表視圖的代碼,增加一個文章列舉表的代碼,這里列表是使用data-role="listview"來修飾樣式。然後這里只需要加上data-role="listview"你發現想要的list效果就實現了。這樣我們一個簡單的頁面效果就實現了。一個簡單開發例子