移動端開發小結（實戰）

分享人：廣州華軟 佐羅

一. 前言

會了PC端開發就會了移動端開發，這個說法沒錯，雖然移動端開發避開了IE兼容適配的坑，可是移動端不一樣系統環境，不一樣屏幕尺寸的適配仍是須要謹慎。下面就說一下移動端開發的一些坑與技巧。

二. 目錄

1. 移動端開發（定義）

2. 移動端開發總結的做用（做用）

3. 移動端開發小結（過程）

3.1 meta標籤

3.2適配移動端

3.3 點擊延遲

3.4 上下拉動滾動條時卡頓、慢

4.總結

 

三. 移動端開發

PC 端頁面開發須要考慮更多的兼容性問題，ie、谷歌、火狐等瀏覽器各自內核不一樣。

移動端頁面開發基本不用考慮這種瀏覽器間的兼容問題，手機上的瀏覽器絕大部分是webkit內核的（webkit 的天下），可是須要考慮屏幕分辨率。

四. 踩坑

移動端有許許多多的莫名奇妙坑，在開發過程當中指不定哪一個節點就踩上了。坑移動的坑天天都有人在踩，在這裏總結了一下比較實用的技巧，給正在踩坑的開發者一些經驗，能快速定位問題並解決問題節省開發時間   

 

五. 移動端開發小結

5.1 Meta標籤

meta標籤，meta標籤在開發webapp時起到很是重要的做用

 

 

第一個meta標籤表示：強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽； 尤爲要注意的是content裏多個屬性的設置必定要用分號+空格來隔開，若是不規範將不會起做用。若是缺乏該meta標籤web app文檔的寬度與設備的寬度不是1:1的比例，頁面將能夠橫向拖動，形成極差的用戶體驗。

5.2 適配移動端

移動端頁面開發基本不用考慮這種瀏覽器間的兼容問題，可是須要考慮屏幕分辨率。目前市場上手機廠商，蘋果iOS系統是系列性的還說得過去，安卓系統是開源，有華爲，小米等廠商，屏幕的分辨率可謂是層出不窮，開發過程又如何去適配這些分辨率呢？

1. 媒體查詢

 

 

這樣咱們能夠根據不一樣的屏幕大小來切換響應的佈局。

目前電商網站已經再也不使用媒體查詢了，主要是經過不一樣屏幕大小來判斷使用設備，加載不一樣的文件實現，而一些新聞類網站還在使用。可是不推薦使用：

代碼量大，維護不方便。

爲兼顧大屏或高清設備，會形成其餘資源浪費，特別是加載圖片資源。

爲了兼顧移動端和 PC 端各自響應式的展現效果，不免會損失各自特有的交互方式。

2. js動態設置 html 的 font-size

添加動態設置 html 的 font-size的js

 

 

使用說明：例如設計稿的寬度是 750px，html的font-size設置爲100px；若是一個元素的實際寬高都爲 100px，那麼若是使用 rem 爲單位，寬高便都爲 1rem。

有興趣開發者們能夠去研究一下淘寶提供的適配方案，固然還有其餘適配方案

5.3 點擊延遲

關於移動端的300毫秒的點擊延遲，可使用fastclick.js來解決，首先引入fastclick，以後再引入這段代碼若是是引入了jQuery能夠直接引入

 

 

5.4 Retina屏的1px邊框

 

 

還有其餘方法，具體的能夠百度1px邊框

六. 總結

以上的開發技巧本人一直在使用，親測有效。移動端開發有許許多多的坑，當踩到坑時候還需我的找資料能力，藉助前者的經驗快速查找到問題。