移動端經常遇到的小bug

標籤：裝置   遇到   bar   移動   文字   固定   htm   top   llb   

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
　　}

移動端經常遇到的小bug