移动端经常遇到的小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
}