移动前端开发小技巧

1. 有时候，厚厚的border也许有用，例如区域滚动，却要在顶部或底部留出一块死边。

 

2. 切记，告别px吧，em是不错的选择，PC端也适用。

 

3. :empty选择器选择里面没有内容的标签。

 

4. 如果你在文档中使用了 overflow: hidden/auto; 的话，添加下面的 css 可以使滚动更加流畅。 

-webkit-overflow-scrolling: touch; 

 

5. input框直接调用相机等：

<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">

 

6. webkit核心浏览器自定义滚动条方法：

::-webkit-scrollbar{}    /*整体*/
::-webkit-scrollbar-track {}    /*滚动条槽*/
::-webkit-scrollbar-thumb {}    /*控制部分*/

 

7. 移动端，适当的可以采用 -webkit-flex-box(伸缩盒子)布局。

 

8. 垂直居中3个方法：

display:table-cell; vertical-align:middle; 
display:-webkit-box; -webkit-box-align:center; 
position:absoloute(fixed); top:50%; margin-top:-(1/2)width;

 

9. 有时，:after(:before)会解决一些头疼的问题。

10. 增加点击样式，需使用a标签，不使用其:active伪类（手机端滑动时有bug，滑动过程中，点击效果不消失）。而是在a标签上加-webkit-tap-highlight-color:rgba(0,0,0,.1)。

 

11. 手机网页中禁用input弹出的输入法，可以用readonly（disabled会将input报废），但是特殊情况例如调用插件时，效果不理想，那么可以在插件的配置时，调用函数启动input的blur()。

 

12. jQuery Mobile中，不希望表单元素初始化（自动增高等特效），在标签中加入 data-role="none" 。

 

13. textarea的内填充效果在border没有被占用的情况下可以用border来实现。

 

14. 自定义placeholder ::-webkit-input-placeholder

 

15. ￥在英文状态下，实体代码是： ¥

 

16. 点击效果：

　　为了避免ajax加载出的数据绑定不到事件，因此把事件绑定到body上，再进行进一步选择。

$('body')
.on('touchstart' , '.click-effect' , function(){
　　$(this).addClass('touched');
})
.on('touchend , touchmove' , '.click-effect' , function(){
　　$(this).removeClass('touched');
})

 

17.判断滚动方向是向上还是向下

var prevTop = 0,
    currTop = 0;
$(window).scroll(function() {
    currTop = $(window).scrollTop();
    if (currTop < prevTop) { //判断小于则为向上滚动
        $("#head").addClass("float");
    } else {
        $("#head").removeClass("float");
    }
    //prevTop = currTop; //IE下有BUG，所以用以下方式
    setTimeout(function(){prevTop = currTop},0);
});