目錄

前言

當下移動端橫行，平常我們做一些移動端的專案，接觸最多的就是H5，雖然做移動端不用相容IE，但是我們要相容微信、app、ios、android... 
今天就給寫幾個平常開發經常會遇到的問題以及解決辦法。

初入前端，若有不足 歡迎指正！

1.audio標籤問題

  一般要新增背景音樂的話，我們的第一反應就是使用audio標籤，但是這裡有一個坑。如果你的專案是一進頁面就要播放音樂的話，audio標籤在
  微信端是不生效的。
  這時候我們可以新增如下程式碼：

    document.addEventListener("WeixinJSBridgeReady"
 
, function () {
        audioAutoPlay(‘XXX’);//給一個全域性函式
    },false);
    //相容ios微信不能一開啟就播放音樂
    function audioAutoPlay(id){ //全域性控制播放函式
        var audio = document.getElementById(id),
            play = function(){
            audio.play();
        document.removeEventListener(“touchstart”,play,false);
            };
        audio.play();
        document.addEventListener(“touchstart”,play,false
 
);
    }

原理：
- 我們給一它一個全域性的函式，自動執行一次就可以了。

2.video標籤問題

說完audio，我們來說一下video。這個video有很多坑。

a. 視訊格式。

這個很少出問題，不多解釋，有問題一般都是編碼格式不對，自己轉換一下就可以了。

b. ios11 下功能不可用。

這個情況暫時我只是知道ios11系統有這個問題。解決方案也很簡單：
弄一張縮圖放上去，控制播放和暫停的事件寫在圖片上面就能解決

c. app裡面不能控制隨心所欲的控制視訊的播放和暫停。

解決辦法：

var video=$("#video"
 
)[0];
        $("#video").click(function(){
                  if($(this).hasClass("pls")){
                        video.play();
                  }else{
                        video.pause();
            }
            $("#video").toggleClass("pls")
        })

如果出現這種情況的話，我們就不能使用系統自帶的控制播放和暫停的功能了，需要我們自己封裝一段控制播放和暫停的方法出來。

d.微信端自動播放

<!-- 必須加在微信api資源 --> 
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 
<script> 
  //一般情況下，這樣就可以自動播放了，但是一些奇葩iPhone機不可以 
  document.getElementById('car_audio').play(); 
  //必須在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 
  document.addEventListener("WeixinJSBridgeReady", function () { 
      document.getElementById('car_audio').play(); 
      document.getElementById('video').play(); 
  }, false); 
    //若是還不能解決，換成這樣
    document.getElementById('video2').play();
    wx.getNetworkType({
         success: function (res) {
         console.log('res is',res);
             document.getElementById('video2').play();
         }
     });
</script> 

3.彈出鍵盤問題

ios手機彈出鍵盤有時候會遮住輸入框，給人一種很不爽的體驗，但是這種情況很少出現。下面簡單介紹一下解決辦法：

    keyboardEvent:function($footer,winHeight){
    //這裡預設軟鍵盤的高度小於螢幕高度的二分之一
    $(window).resize(function(){
        var currentWinHeight = $(window).height();
        if(isInputsFocus($(‘input’)) && currentWinHeight < winHeight/1.2){
            //鍵盤彈出
            $footer.hide()
        }
        if(currentWinHeight >= winHeight/1.2){
            //鍵盤收起
            $footer.show()
        }
    });
}
Var isInputsFocus = function($inputs){
    if($inputs && $inputs.length > 0){
        for(var i=0;i<$inputs.length;i++){
            if($($inputs[i].is(“:focus”))){
                return true
            }
        }
        return false
    }
    return false
}

這段程式碼可以直接使用。

4.獲取文件滾動高度

常用的獲取方式是 document.documentElement.scrollTop 但是在手機上不生效。查了好久也不知道哪裡有問題。後來偶然發現document.body.scrollTop 就生效了，但是PC又不行了，所以建議大家做一下判斷

5.zepto獲取select文字

我們平常使用的是

$("#select").val()//獲取option的value值；
$("#select").find("option:selected").text()//獲取option的文字

但是在使用zepto的時候竟然報錯。研究好久不曉得是什麼原因。後來查了下zepto的api 發現獲取方法改了。現在是

$("#select option").not(function(){ return !this.selected }).val()//獲取value值
$("#select option").not(function(){ return !this.selected }).text()//獲取文字值

5.swiper圖片超出父級盒子

給img新增

img{max-width:100%;max-height:100%}

6.判斷手機型別

window.onload = function () {
    var u = navigator.userAgent;
    if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手機
        phoneType = 0;
    } else if (u.indexOf('iPhone') > -1) {//蘋果手機
        phoneType = 1;
    } else if (u.indexOf('Windows Phone') > -1) {//winphone手機
        phoneType =2;
    }
};

7.幀動畫的簡單實現

var timeout = 1000; //每隔100ms
var index = 1;
var am,
  am = setInterval(function () {
      if (index >= $(".roll").length) {
          $(".roll").removeClass("run");
          clearInterval(am);
          $('.goinfo').removeClass('hide');
              console.log('res enter');
      } else {
          $(".roll").eq(index++).addClass("run");
      }
  }, timeout);