超齐全的移动端开发的坑 参考

进行开发调试的时候可以安装browser-sync

移动端分类

• Native 原生App 使用Java/Objective-C/Swift 开发
• Webapp 在手机浏览器上展现的网页
• Hybird 混合应用 Native+Html
• 小程序 知乎小程序话题

常用的事件

原生的JS中针对移动端有这些事件：
click,touchstart,touchend,touchmove

    node.addEventListener('touchstart',function () {
        console.log('start touch')
    })
    node.addEventListener('touchend',function () {
        console.log('end touch')
    }  )

手势和滚动

实际应用中移动端还有如下手势：

gesture.jpg

由于原生JS没有这些事件，可以使用外部的手势库，例如hammerjs

对于移动端的滚动事件，有iscroll库

300ms delay

指的是 移动端浏览器为了区分 双击还是单击事件 对于click事件判定会有300ms的延时时间，300ms之内没有第二次点击则判断为单击事件

针对300ms delay的情况，如果想要点击立即生效的话,可以使用：

• 使用touchstart 事件
• 使用fastclick 库（原理为监听touchend事件，然后触发一个模拟的click事件，同时将300ms后才会触发的真正的click事件取消掉）

移动端的页面适配

一般视图加上这个meta：
<meta name="viewport" content="width=device-width,height=device-height>

对于页面缩放,可以继续在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中其实就已经没有300ms delay了

动态rem方案

rem相对html的font-size来确定大小