超齊全的移動端開發(fā)的坑 參考
進(jìn)行開發(fā)調(diào)試的時候可以安裝browser-sync
移動端分類
- Native 原生App 使用Java/Objective-C/Swift 開發(fā)
- Webapp 在手機(jī)瀏覽器上展現(xiàn)的網(wǎng)頁
- Hybird 混合應(yīng)用 Native+Html
- 小程序 知乎小程序話題
常用的事件
原生的JS中針對移動端有這些事件：
click,touchstart,touchend,touchmove
node.addEventListener('touchstart',function () {
console.log('start touch')
})
node.addEventListener('touchend',function () {
console.log('end touch')
} )
手勢和滾動
實(shí)際應(yīng)用中移動端還有如下手勢：
gesture.jpg
由于原生JS沒有這些事件，可以使用外部的手勢庫吩谦，例如hammerjs
對于移動端的滾動事件鸳谜，有iscroll庫
300ms delay
指的是 移動端瀏覽器為了區(qū)分 雙擊還是單擊事件 對于click事件判定會有300ms的延時時間，300ms之內(nèi)沒有第二次點(diǎn)擊則判斷為單擊事件
針對300ms delay的情況式廷，如果想要點(diǎn)擊立即生效的話,可以使用：
- 使用touchstart 事件
- 使用fastclick 庫（原理為監(jiān)聽touchend事件卿堂，然后觸發(fā)一個模擬的click事件，同時將300ms后才會觸發(fā)的真正的click事件取消掉）
移動端的頁面適配
一般視圖加上這個meta：
<meta name="viewport" content="width=device-width,height=device-height>
對于頁面縮放,可以繼續(xù)在meta中加上
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
加上這個meta之后懒棉，在chrome中其實(shí)就已經(jīng)沒有300ms delay了
動態(tài)rem方案
rem相對html的font-size來確定大小
