移动端

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

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

  1. photoswipe单击时关闭预览,页面会闪烁,并且pswp没有彻底的关闭,由于它的z-index比较高,导致下面的内容被遮挡了,查看它的HTML代码可以看到
    移动端_第1张图片
    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)
        })

解决这个问题

  1. 在做移动端时给一个div固定高度,超出部分overflow:auto ,可以滚动查看。
    手机调试的时候发现,在安卓手机上滑动非常流畅,但是苹果手机滑动有卡顿现象,体验很差,简直不能忍。于是上网搜索,找到了解决办法,
    -webkit-overflow-scrolling: touch; // 解决ios滑动卡顿问题
    据说这玩意的坑也很多,只是我在那个页面暂时还没涉及到滚动的其它功能需求 详见:IOS与惯性滚动

  2. 移动端input输入框,获取焦点后弹出来的软键盘右下角的按钮作用是可以更改的!


    移动端_第2张图片
    IMG_6324.jpg

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

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


移动端_第3张图片
111IMG_6325.jpg

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

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

(3)如果输入框是个搜索输入框,想让‘go’变成'search',可以使用h5的

移动端_第4张图片
2.jpg

你可能感兴趣的:(移动端)