移动端经常遇到的小bug

Posted 2020-10-11

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
　　}