移动端开发

 移动端检测

var sUserAgent = navigator.userAgent.toLowerCase();            
        var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";            
        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";            
        var bIsMidp = sUserAgent.match(/midp/i) == "midp";            
        var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";           
        var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";            
        var bIsAndroid = sUserAgent.match(/android/i) == "android";           
        var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";         
        var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";     

 

H5监听摇一摇和手机倾斜事件（重力感应）

 

监听css3动画结束事件，兼容写法:

function whichAnimationEvent(){
  var t,
      el = document.createElement("fakeelement");

  var animations = {
    "animation"      : "animationend",
    "OAnimation"     : "oAnimationEnd",
    "MozAnimation"   : "animationend",
    "WebkitAnimation": "webkitAnimationEnd"
  }

  for (t in animations){
    if (el.style[t] !== undefined){
      return animations[t];
    }
  }
}

　　

 

qruerySelector 选择器

在通过DOM的属性进行选择是要加上双引号才能选择到，例如 : document.querySelector('img[alt=1]')  ,这样是会报错的，document.querySelector('img[alt=" 1 "]') ，这样才能选择到。

document.querySelectorAll 配合ES6的扩展符可以直接获取DOM的数组，而非类数组，要这样写 [...document.querySelectorAll('div')]

 

iOS移动端点击阴影如何去除

*{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}

 

清除input或button的默认样式

-webkit-appearance: none ;

 

手机号验证

input type=number 在苹果上没效，可以用input type=tel 代替，因为maxlength属性在type=number上是没效的

不过如果需求更进一步，不准用户输入除数字之外的任何字符，可以加入下面的oninput事件

<input type="tel" name="phone" maxlength="11" class="phone" oninput="this.value=this.value.replace(/[^0-9.]+/,'');">

var reg=/^1[3|4|5|8]\d{9}$/;  //验证手机的正则

 input 还有一个pattern属性，规定用于验证输入字段的模式。模式指的是正则表达式。

例子：http://www.w3school.com.cn/tags/att_input_pattern.asp

 

propertychange 和 input 事件:

1）propertychange只要当前对象的属性发生改变就会触发该事件

2）input是标准的浏览器事件，一般应用于input元素，当input的value发生变化就会发生，无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化

$(function(){ 

    $('#username').bind('input propertychange', function() {  

    $('#result').html($(this).val().length + ' characters');  

  });  

})  

这里bind同时绑定了input和propertychange两个方法。

 

css3动画停留在完成状态

animation-fill-mode: forwards;  //在应用动画的元素上加上这个属性，就可以在动画完成后停在结束的状态，不会返回原始状态animation属性之后，不然没效；
will-change:xxx;  //提前告诉浏览器那些属性会发生变化，例如背景色会变，就把xxx写上background，主要作用是优化css的动画或变化效果

 

Swiper插件常用属性备忘//初始化

var mySwiper = new Swiper('.swiper-container',{
initialSlide :2,    //设定初始化时slide的索引
autoplay: 5000,//可选选项，自动滑动
direction : 'vertical',  //轮播方向，horizontal 水平方向（默认）vertical 垂直方向
speed:300,  //轮播速度
loop:ture , //循环

pagination : '.swiper-pagination',  //使用分页器
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next', //使用前进后退按钮
effect : 'fade', //切换效果 默认为slide
})

mySwiper.activeIndex  //当前页的索引
    

/*改变前进后退按钮的样式*/
<style>
/*Swiper原样式 */
.swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");}
/*改变了颜色和加粗的样式*/
.swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");}

</style>

 

将swiper对象的显示slider定位到指定的索引

mySwiper.slideTo(index); 

注意：如果swiper-container是设置了display:none;的话，是无法初始化的，如果一定要隐藏的话，要么初始化后再隐藏，要么用别的方法隐藏（opacity:0;之类的）,要么在外层在套一层div.                                   

单选框、复选框与文字垂直居中

以vertical-align:middle为基础的

 

css代码如下：vertical-align:middle; margin-top:-2px; margin-bottom:1px;

参考: input 对齐

 

改变input 的 placehoder 属性的样式

input::-webkit-input-placeholder { /* WebKit browsers*/ 
　　color:#999;font-size:14px;
　　}
input:-moz-placeholder {  /* Mozilla Firefox 4 to 18*/ 
　　color:#999;font-size:14px;
　　}
input::-moz-placeholder {  /* Mozilla Firefox 19+*/ 
　　color:#999;font-size:14px;
　　}
input:-ms-input-placeholder { /* Internet Explorer 10+*/ 
　　color:#999;font-size:14px;
}

 

移动端长按会出现复制黏贴菜单按钮，经过查询资料，解决了此问题；

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

苹果端可以css解决：*{-webkit-touch-callout: none;}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

安卓端需要添加js解决：

window.ontouchstart = function(e) { 
e.preventDefault(); 
};

 

/**
 *禁止出现右键菜单，移动端防止微信长按出现菜单
 *
 */
function contextmenu(){
    $(document).on('contextmenu', function(e){
        e.preventDefault();
    });
}

/**
 *@desc 自动播放音乐（微信端）  安卓和IOS都可以自动播放
 *
 * @param {dom} dom  直接的dom，不是JQ对象
 */
function autoPlay(dom){
    if(window.WeixinJSBridge){
            WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
                dom.play();
            }, false);
        }else{
            document.addEventListener("WeixinJSBridgeReady", function() {
            WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
                dom.play();
            });
        }, false);
    }
}

//设置rem  50px
function setRem() {
    var cw=document.body.clientWidth || document.documentElement.clientWidth;
    document.getElementsByTagName("html")[0].style.fontSize = cw / 7.5 + "px";
};