移動端開發

 移動端檢測

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";
};