移動端HTML5如何開發？跟PC端有什麼區別？

01-14

移動端HTML5如何開發？跟PC端有什麼區別？

謝邀。

這問題很大，我就說個方向，有很多資料你可以自己去查。

考慮如下問題：

1. 移動端不需要 300ms 的單擊確認，所以不要監聽 click 事件

2. 移動端網路一般較慢，如何減小頁面體積及請求數，利用好緩存？

3. 移動端需要點擊的元素及其間隔不能太小，考慮手指的面積？

4. 橫屏和豎屏下的表現？

5. 不同瀏覽器間的兼容性（太多了，如 position:fixed）？

6. Retina 屏圖片會不會模糊？

7. 輸入狀態鍵盤會不會擋住輸入內容？

8. 在瀏覽器上點擊後退的行為？

9. 某些瀏覽器（如 Safari）的隱私模式下 cookie 和 localStorage 的替代方案？

……

樓上Vkki說的對，但對於一個還沒入門的人來說太深了

—————

在我看先選一個合適的框架很重要，能讓人快速上手，bootstrap可以但就我的經驗看某些情況下的性能表現像吔了屎一樣，有些情況下跟jquery的插件混用還tm不兼容

個人推薦mui，別看成miui

跟hbuilder一家公司出的，js和css都比較完善

前幾個月給一家網站做app，跨平台表現不錯，很適合移動端h5開發

缺點是性能性能性能，兩個webview疊上去就有點卡了，持續關注中

請務必了解媒體查詢

觸摸友好

我還很業餘……寫一些常見的吧：

1 採取更小的js庫。比如說jQuery1.x -&> jQuery2.x/zepto

2 記得用meta-viewport標籤調節視口

3 觸摸事件的處理。推薦一個庫，hammer

4 小心安卓機……有些時候他們會出一些類似於「一個事件只能綁定一個回調」之類的奇怪bug……

5 盡情使用websocket吧，主流機型好像是都支持的。

6 調試很麻煩，詳見這個：怎麼在移動端調試web前端? - 計算機網路

7 position:fixed不要隨便用

8 flexbox很棒，你不一定非得用Bootstrap之類的庫

9 做小遊戲為什麼不優先考慮canvas呢

常握移動端開發的各項技能，是公司進行商業活動的犀利武器。比如公司的 「產品服務展示、活動專題、營銷廣告、人才招聘、社群運營」 等各個方面，都需要在移動端體現出來。如今公司招聘技術人才，不懂移動端是註定要被淘汰掉的，因此深度掌握移動端開發，這已經成為前端開發工程師的標配技能。