移动端经常遇到的小bug

1、video 不能自动播放


  (1) autoplay 及 js 控制播放,仍然有部分设备不起作用
  (2) $("html").one("touchstart",function(){
      video.play();
    })

2、input 输入框,软键盘弹出的时候会把底部的内容往上压缩,使得底部布局混乱


  (1)获取内容的总高度,赋值给body,写死body的高度
  $("body").css("height",parseInt($(".scroll-wrap").height()+$(".fixNav").height()));
  (2)fix固定定位元素
  当获取焦点(软键盘出来时候) 就把fix定位的元素改为静态定位
  当失去焦点(软键盘消失时候) 再把原fix定位的元素改为fix定位

  (3)input框被软键盘遮盖
  https://mingyili.github.io/2015/11/05.html

3、手机拍照及上传


  <input type="file" accept="image/*">
  <input type="file" accept="video/*">
  部分安卓设备不支持

 

4、移动端模拟hover


  (1) active模拟 document.addEventListeren("touchstart",function(){},true);
  (2) js监听触屏事件 动态添加/移除class类名

5、修改input placeholder文字颜色


  input::-webkit-input-placeholder{color:red;}

 

6、去除webkit默认的滚动条


  element::-webkit-scrollbar{
    display:none
  }

posted @ 2017-10-18 12:20  桃李不言~  阅读(428)  评论(0编辑  收藏  举报