前端里移動端到底比 PC 端多哪些知識，為什麼面試時好多公司都問 H5 水平如何？該從哪裡入手學習？

01-14

一直覺得pc端和移動端沒啥區別。。就按照手機的解析度做就好了。多幾個拖放什麼的事件。。但貌似經過幾次面試對移動這方面的要求越來越高，而且還經常被問到一個h5的概念。這就不明白了、、不就html5么。。。多幾個語義化標籤而已么不就。。這有啥可回答的，，，為啥說h5是為移動端量身打造的？還老問我會不會。。我感覺會h4肯定就會h5啊。。另現在經過面試經常被問，想求教一下怎麼學移動端這塊。之前網上教程基本都是pc端的。求大神們給小弟解解惑。以及推薦點視頻資料
另外大嬸們啊。。人總問我有沒有用過h5技術建立頁面。。。啥叫用h5技術建立頁面啊。。。就用寫把導航的div改成&。。。文章改成section？&?就這些？
請問有沒有啥手機的教程謝謝

我做過幾年的web前端開發，就簡單談談自己的感受吧。

首先來看看PC端和移動端在前端開發上的一些區別：

（1）PC考慮的是瀏覽器兼容性，移動端開發考慮的更多的是手機兼容性，因為目前不管是android手機還是ios手機，一般瀏覽器用的都是webkit內核，所以做移動端開發，更多考慮的應該是手機解析度的適配，和不同操作系統的略微差異化；

（2）在部分事件的處理上，移動端自然是偏向於觸屏的，所以觸屏事件的一些規律要多摸索一下，另外包括移動端彈出的手機鍵盤該如何處理，這樣的問題在PC上肯定不會遇到，但在移動端，如果你沒有經驗，處理起來是相當麻煩的；

（3）在布局上，移動端開發一般是要做到布局自適應的，在這裡我推薦用rem的解決方案，具體實現可以百度一下，相對比較簡單，處理起來也比較靈活；

（4）在動畫處理上，PC端由於要考慮到IE的兼容性，通常用JS做動畫的通用性會好一些，但相比CSS3卻犧牲了較大的性能，而在手機端，如果要做一些動畫、特效等，第一選擇肯定是CSS3，既簡單，效率又高。

區別就說到這裡，也許還不完全，我也是想到哪就說到哪，下面來談談如果要做移動端的web開發，也就是題主說的h5開發，在已有PC端的web開發基礎上，還需要再研究哪些技術：

（1）微信的一些介面最好都能去實現一遍，熟悉一下肯定有好處的，比如領導讓你通過微信分享的文章，title、description、以及icon圖標怎麼配置，你說你不清楚，那就太水了；

（2）百度地圖的一些API介面，有時間也去熟悉一下吧，對於移動端來講，LBS還是一個非常重要的特性，所以地圖這塊肯定也是需要了解的，再加上百度地圖已經是一個比較成熟的平台了，學起來也不費事兒；

（3）CSS3的動畫去熟悉一下，至少最基本的一些動畫實現和演算法要了解，在移動端應該也算用得比較多的；

（4）一般pc用jquery，移動端用zepto，這沒什麼好說的，在這裡主要是想提醒大家，移動端的流量相對還是比較重要的，所以引入的資源或插件，能小則小，一個30k的資源和80k的資源，在移動端還是相差挺大的；

（5）最好能掌握一套完整的前端開發架構，比如模塊化、打包、壓縮、緩存、發布，有條件的還能做一下自動化測試等等，我用過的有fis，還不錯，牛逼的朋友可以自己寫一套，另外再多說一句，如果想快速提升自己的前端開發技術，鑽研前端架構這塊是一個非常好的方向。

這幾個月，還抽空寫了一個APP，android和ios版本的都有，有興趣的朋友可以加微信：laoheipm，一起交流，一起進步！

H5 的公司不去，他也不懂，你也不懂，大家聊什麼呢。

他們要問的不是HTML5新增的tag，甚至不僅僅是CSS3動畫，而是在手機上搞交互、單頁app，有一些東西是得稍微注意的。

就我個人觀點，主要是以下區別。

1. meta viewport

2. 像素密度、媒體查詢等

3. 觸摸事件的處理

4. 解析度對布局的影響

5. 一些零零碎碎的hack，如fast click等等

6. 性能優化，包括首屏打開速度、用戶響應延遲、渲染性能、動畫幀率等等，在手機上需要特別注意

大概就這樣子。

對於我來說，Web前端在PC和在移動平台上確有不少差別，但並不能用來區分水平的高低，在面試時還是應當多注意應試者在js上的基礎功夫。

H5是個營銷概念，不是技術概念。

他們要H5就是要你能做那種在手機上能看的各種動畫效果的網頁。

比如這些那些過目不忘的H5頁面

講幾個常用的

之前接觸過這方面的知識，一直想寫一些關於代碼的文字，但考慮到浪費時間，又不具備大神的實力，也不想去把別人的代碼照搬過來，所以一直都是空白著的，今天敲代碼的時候，有了一個比較好的想法，第一，定位在學習這一塊，去學習一些領域的新知識，並分享自己每天的學習成果，第二，總結工作中遇到的代碼，解決的問題，拿出自己的demo截圖，做出一些文字說明解釋，相信通過這兩個途徑，能夠讓自己取得更大的發展空間。

h5調用本地攝像頭

前端時間使用HTML5做了一個WEB端APP，其中用到了H5頁面調用手機攝像頭的功能，當時也是花了不少時間去研究。最終是採用了HTML5plus（HTML5+）的方式完成了該功能，現將具體方法簡單介紹下，並講解下使用的注意事項。放在伺服器上然後瀏覽就可以了，只支持Chrome和Safari核的瀏覽器，QQ瀏覽器，Chrome，Safari瀏覽器都可以。在不同的手機和瀏覽器上面展現的方式不一樣。這是html5官方文檔地址，裡面有關於h5或js調用攝像頭的全部方法http://www.html5plus.org/doc/zh_cn/camera.htmlhttp://www.html5plus.org/doc/zh_cn/camera.html

本篇文章是個人學習期間整理的文檔，涉及到很多方面的鏈接，在Android開發過程中，有時需要調用手機自身設備的功能，本文側重攝像頭拍照功能的調用。使用許可權：調用手機自身設備功能（攝像頭拍照功能），應該確保已經在AndroidManifest.xml中正確聲明了對攝像頭的使用及其它相關的feature。安卓調用手機拍照功能：http://blog.csdn.net/mahoking/article/details/28225907；對一些class類的介紹是非常詳細的。

h5調用微信支付

用戶通過微信外瀏覽器打開商品頁面,進行微信支付購買商品... 第三方手機瀏覽器H5支付瀏覽器打開的移動網頁的主頁，通常是由後端人員來實現，在混合式開發之中，則是由前端人員來掉開發的介面，移動端手機支付功能體現在前端頁面上逐漸成為一個趨勢，h5微信開發調用支付介面文檔：https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=4_2

看到這樣的一個問題：手機系統自帶的瀏覽器，調用微信支付如何實現（非掃碼），翻看了微信支付的api沒發現支持h5調支付介面的情況（微信js除外），然後卻發現美團的支付成功調用了，這是怎麼實現的？H5支付用於非微信瀏覽器，在IOS上仍體驗不佳，具體來講就是無法自動回調。微信瀏覽器內的H5支付指公眾號支付，微信已將此嚴格區分;首先要參見官方文檔：https://pay.weixin.qq.com/wiki/doc/api/wap.php?chapter=15_1

剛開始做的時候，需要配置一些東西，當然這都是一些最基本的東西;需要搭建環境來進行測試看到一篇這樣的文章，博主對此總結了一些實質性的經驗，學習起來事半功倍；微信支付配置信息，JSAPI介面，H5調用微信js介面支付，微信公眾號支付：http://blog.csdn.net/u010248119/article/details/50638529

對於微信支付如何繞過應用簽名這個問題；如果把微信支付的API封裝起來導出JAR包給多個應用使用，怎麼繞過這個應用簽名，如果繞不過，那豈不是每個應用我都要建個APP了嗎？題主提到的需求有兩種方案：https://www.zhihu.com/question/46841202

h5網頁中使用打電話功能

如果需要在移動瀏覽器中實現撥打電話，發送email，調用sns等功能，jquery mobile提供的介面是一個好辦法。採用url鏈接的方式，實現在safari ios，android 瀏覽器，webos 瀏覽器，塞班瀏覽器，ie，operamini等主流瀏覽器，進行撥打電話功能。在做一個微信的微網站中的一個便民服務電話功能的應用，用到移動web頁面中列出的電話號碼，點擊需要實現調用通訊錄，網頁一鍵撥號的撥打電話功能。微信開發之移動手機WEB頁面(HTML5)Javascript實現一鍵撥號及簡訊發送功能:http://www.cnblogs.com/skylaugh/p/3277899.html ;一句話總結html5中頁面撥打電話的方式.

在開發過程中，我們難免會遇到這種情況：H5跳轉鏈接，撥號怎麼做？在製作H5的過程中，很多時候需要用到事件功能，比如（鏈接跳轉、撥號、翻頁等），這裡為大家介紹H5中常用的事件設置方式。http://blog.sina.com.cn/s/blog_12d5cc7a50102wpzb.html

h5調用掃一掃的功能

使用H5調用手機攝像頭掃描二維碼。可以通過微信介面調用，直接用H5調用沒弄過，很多人說兼容性不好，很多人覺得盡量集成的微信裡面做，微信本身就提供了掃一掃的js ，直接自己在瀏覽器里h5 做掃一掃是沒必要的因為沒應用場景，在網上看了一位技術大牛親測有效的案例:web/html5調用攝像頭實現二維碼掃描,需要有後端代碼的支持:http://blog.csdn.net/xuewufeifang/article/details/49756099

這是一片以講解的方式，幫助大家來理解微信官方的文檔，同時給出調用掃一掃的例子。微信調用jssdk在網頁端實現調用掃一掃，java+jsp；http://blog.csdn.net/u011327333/article/details/50439462 ;微信官方技術文檔jssdk：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

HTML5網頁如何調用瀏覽器APP的微信分享功能？

最近有看到新浪的移動端網頁，增加了微信分享功能。在瀏覽器APP（Safari除外）中可以直接調用微信APP，分享至朋友圈或者聊天窗口。並不像很多網站是通過彈出一個圖片提示右上角分享。並不是通過微信介面實現的，而是直接調用了瀏覽器APP自帶的微信分享功能。比如我用安卓手機自帶webkit內核瀏覽器（原生瀏覽器沒有微信分享功能），打開新浪文章頁，就不會出現這個微信分享的功能按鈕。那麼,用HTML5寫的頁面怎麼獲得微信介面，來實現一鍵分享的功能?廢話就不多說了，直接上代碼：HTML5網頁如何調用瀏覽器APP的微信分享功能:http://blog.csdn.net/web_qdkf/article/details/50442938

其實在移動端html5手機網站調用微信分享包括：獲取網路類型。調起客戶端的圖片播放組件。調用微信掃描二維碼。判斷是否安裝對應的應用。發送郵件。分享到微信朋友圈。

不談技術，我告訴你這個情況大概是怎麼演化而來的。

首先，移動開發大熱，包括h5。

然後，某公司有個js或者css大神，他做出了完美的響應式，或者漂亮的框架或者等等

然後，他告訴同事和領導，他在研究的是h5。別人給了他一個標籤「h5大神」

然後，領導以及別的team領導想，我還想招個這樣的員工，hr想，h5哥哥好厲害，我也要多招幾個來。

然後，分派給其他面試官的任務，去問問這個面試的會不會h5，h5厲害不厲害。面試官想，哦，面試h5，我想想問些什麼問題，於是乎就出來兩類面試官，一類真的在面試h5，還一類問你懂不懂h5標籤。

最後，這個故事的結局題主已經知道了。

把H5掛在嘴邊的是不懂技術的，至少是不懂前端的，這樣的公司慎去

xhr2、cors、formdata、blob、filereader、dataurl、localstorage + 拖拽 websql 定位 canvas

說幾個html5常用的題主沒提到的東西，xhr2、cors、formdata、blob、filereader、dataurl、localstorage，這些題主未必沒用過，只是沒有注意到。html5到底包含哪些已經實用的、草案中的東西，哪些瀏覽器支持，請參考w3c發表的最新的移動互聯網發展路線圖，每年更新2次。

section和div什麼區別，一個有語義一個沒語義。

建議題主可以看看《html5從入門到精通》很適合快速入門者

做移動端的開發肯定要掌握html5相關知識的

學完這個建議題主在去看看 Android 、iOS、wp等應用的界面設計教程

既然要學就學全

問HTML5是因為它在手機上表現的很好，看趨勢將來會表現的更好。因為移動端流量的不斷增加自然容易理解人家總問你移動端的東西了嘛。

再說HTML可不是多幾個語意化標籤那麼簡單！它是一套系統的解決方案！

新增的各種API，更系統的模塊組織，搭配更好的CSS3和過兩三年之後越來越嚴謹的ECMAscript6，很明顯的來勢洶洶嘛！

加上真正的一次編寫蘋果安卓都能跑的口號，輕量級應用的迅捷，簡直就是開發上的騎兵先鋒！

前端說的H5，一般是指HTML5和CSS3以及相關的一些技術；

非前端尤其是產品或者運營人員說的H5，基本上就是一個有點動畫效果、有點交互響應、能播放音樂能播放視頻的頁面。他們才不管你用jq還是css3甚至是gif去實現呢。

個人感覺移動端比pc更加關注性能因素。這塊需要多多注意

我主要在公司做微信相關的東西，我們領導比較喜歡的東西是CSS3，常常主動跟我提「搞點動畫效果」，然後盡我所能，搞到最炫。然後老闆開心了，對我說「謝謝」，醉了。

我面過很多公司，很多面試官都跟我提H5，我不太喜歡這個名詞，但面的多了，都喜歡這麼說，就習慣了。這東西沒有多高深，對我而言，就好比是語言中的形容詞或者副詞，作用就是讓頁面更加活潑生動，起到一定的點綴作用。

ps：CSS3比較重要。我很多面試成功的直接原因，就是那些帶有動畫效果的頁面。

移動端的網頁比pc端寫起來快很多我寧願天天寫移動端的也不願意寫一個PC端的

樓上說的對，H5隻是所謂的營銷概念。在可攜帶設備能看的頁面現在都叫什麼鬼H5。

那麼會是什麼概念呢？其實就是讓你拿點能看的出來，然後可能再問你遇到過什麼坑吧，寫是肯定能寫出來的。用我常說的一句話「難道我寫固定布局就不能做移動頁面了？」，所謂的要你說區別，大抵就是問「嘿，你給我回答點東西呀」

———————————————

例如：首屏載入？性能優化？響應式？甚至說我為啥不用雪碧圖呢+_+

以上。

h5不是html5 具體是什麼請知乎

有些人說h5指html5有些人說的是指手機是的宣傳頁，h5到底是什麼我也不知道

做過移動端網頁的都知道，在解決Iphone5、6、6p，的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，測試看薦各種設備上顯示還有稍微有一點差距的。我曾今也嘗試了很多辦法，也參考了別人加的思路，有點用js，有的用媒體查詢，有的用一些比較新的單位rm、rem等等。。。。。。我覺得還是很麻煩，難道就沒有一個可以一行代碼覺接問題的方案嗎？經過我各種的嘗試之後終於有了，目前階段還沒發現bug，如果有問題，還請不吝賜教!

把微信上面的那些ppt就說成h5。和把java8喊成捷豹一樣好笑