移动端

iphone5s及以下使用transform无效，需要使用-webkit-transform.

2.on click无效问题
Zepto('.detail-content').on('click','img',function(){ .. })此时回调函数并未执行，是因为暂未获取到.detail-content
3.点击时on tap 事件总是会触发两次，换成 singleTap后就只触发一次了。

photoswipe单击时关闭预览，页面会闪烁，并且pswp没有彻底的关闭，由于它的z-index比较高，导致下面的内容被遮挡了，查看它的HTML代码可以看到

2b1a6ebb-1d24-4b70-b90f-362fc52e0569.png

已经关闭的photoswipe却又加上了pswp-open这个class，而这个class就是使其display:block
可能也是由于点击事件触发了两次，使其关闭后又打开了，可以添加代码

 gallery.listen('destroy', function() {
            console.log('destroy')
         _this.openning = false
              setTimeout(function () {
              Zepto('.pswp').removeClass('pswp--open')
            },10)
        })

解决这个问题

在做移动端时给一个div固定高度，超出部分overflow：auto ，可以滚动查看。
手机调试的时候发现，在安卓手机上滑动非常流畅，但是苹果手机滑动有卡顿现象，体验很差，简直不能忍。于是上网搜索，找到了解决办法，
-webkit-overflow-scrolling: touch; // 解决ios滑动卡顿问题
据说这玩意的坑也很多，只是我在那个页面暂时还没涉及到滚动的其它功能需求详见：IOS与惯性滚动
移动端input输入框，获取焦点后弹出来的软键盘右下角的按钮作用是可以更改的！

IMG_6324.jpg

如上图，想要输入完成后进行一系列操作，例如校验输入、发送请求等，但是一不小心输入完点击‘GO’（中文键盘就是‘前往’），网页就自动刷新了！并不想要这种操作啊，怎么办？有以下几种办法：
（1）我的input输入框都是包含在form表单里面的，所以点击前往就会提交表单，

<form action="">
  <input type="text">
</form>

而form的action属性为空，所以就刷新了页面。解决办法可以去掉form表单或者将这个input框放在form表单外面。
去掉之后变成了return

111IMG_6325.jpg

（2）不去掉form表单也有办法，那就是监听表单的submit事件，然后阻止其默认事件的发生。

$('form').on('submit',function (e) {
    console.log(e)
    e.preventDefault()
    return true // 或者在这里进行其他操作
})

（3）如果输入框是个搜索输入框，想让‘go’变成'search'，可以使用h5的<input type="search">

2.jpg

推荐阅读更多精彩内容