css前端初始化

mikyou 發(fā)布于2019-08-29 16:19 / 3017人閱讀

摘要：初入前端，若有不足歡迎指正頭部初始化標(biāo)簽問題一般要添加背景音樂的話，我們的第一反應(yīng)就是使用標(biāo)簽，但是這里有一個(gè)坑。

前言

當(dāng)下移動(dòng)端橫行，平常我們做一些移動(dòng)端的項(xiàng)目，接觸最多的就是H5，雖然做移動(dòng)端不用兼容IE，但是
我們要兼容微信、app、ios、android... 今天就給寫幾個(gè)平常開發(fā)經(jīng)常會(huì)遇到的問題以及解決辦法。

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

頭部初始化

1.audio標(biāo)簽問題

一般要添加背景音樂的話，我們的第一反應(yīng)就是使用audio標(biāo)簽，但是這里有一個(gè)坑。如果你的項(xiàng)目是一進(jìn)頁(yè)面就要播放音樂的話，audio標(biāo)簽在微信端是不生效的。這時(shí)候我們可以添加如下代碼：

 document.addEventListener("WeixinJSBridgeReady", function () {
        audioAutoPlay(‘XXX’);//給一個(gè)全局函數(shù)
    },false);
    //兼容ios微信不能一打開就播放音樂
    function audioAutoPlay(id){ //全局控制播放函數(shù)
        var audio = document.getElementById(id),
            play = function(){
            audio.play();
        document.removeEventListener(“touchstart”,play,false);
            };
        audio.play();
        document.addEventListener(“touchstart”,play,false);
    }

原理：

我們給一它一個(gè)全局的函數(shù)，自動(dòng)執(zhí)行一次就可以了。

2.video標(biāo)簽問題 a. app里面不能控制隨心所欲的控制視頻的播放和暫停。

解決辦法：

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

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

b.微信端自動(dòng)播放

3.彈出鍵盤問題

ios手機(jī)彈出鍵盤有時(shí)候會(huì)遮住輸入框，給人一種很不爽的體驗(yàn)，但是這種情況很少出現(xiàn)。下面簡(jiǎn)單介紹一下解決辦法：

 keyboardEvent:function($footer,winHeight){
    //這里默認(rèn)軟鍵盤的高度小于屏幕高度的二分之一
    $(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.獲取文檔滾動(dòng)高度

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

5.zepto獲取select文本

我們平常使用的是

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

但是在使用zepto的時(shí)候竟然報(bào)錯(cuò)。研究好久不曉得是什么原因。后來查了下zepto的api 發(fā)現(xiàn)獲取方法改了。現(xiàn)在是

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

6.swiper圖片超出父級(jí)盒子

給img添加

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

7.幀動(dòng)畫的簡(jiǎn)單實(shí)現(xiàn)

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);

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0;
}
a {
  text-decoration: none;
}
ul,ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {vert-align: top;} //移動(dòng)端圖片邊框   相當(dāng)于  border:0

a,
input,
button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
//-webkit-tap-highlight-color:rgba(0,0,0,0);//透明度設(shè)置為0，去掉點(diǎn)擊鏈接和文本框?qū)ο髸r(shí)默認(rèn)的灰色半透明覆蓋層(iOS)或者虛框(Android) 
input，textarea{outline:none}  
//取消chrome下默認(rèn)的文本框聚焦樣式

-webkit-appearance: none;
//消除輸入框和按鈕的原生外觀，在iOS上加上這個(gè)屬性才能給按鈕和輸入框自定義樣式 

-webkit-user-select: none;
// 禁止頁(yè)面文字選擇 ，此屬性不繼承，一般加在body上規(guī)定整個(gè)body的文字都不會(huì)自動(dòng)調(diào)整
input,
button {
  -webkit-appearance: none;
  border-radius: 0;
}
//去掉IOS移除原生控件樣式

-webkit-touch-callout:none; 
// 禁用長(zhǎng)按頁(yè)面時(shí)的彈出菜單

body {
  margin: 0;
  -webkit-user-select: none;
}
//禁止移動(dòng)端用戶進(jìn)行復(fù)制.選擇.

body * {
  -webkit-user-select: none;
  font-family: Helvetica;
}

body {
  -webkit-text-size-adjust: 100%;
}
//移動(dòng)端橫豎屏字體乎大乎小

-webkit-text-size-adjust: none; 
//禁止文字自動(dòng)調(diào)整大小(默認(rèn)情況下旋轉(zhuǎn)設(shè)備的時(shí)候文字大小會(huì)發(fā)生變化)，此屬性也不繼承，一般加在body上規(guī)定整個(gè)body的文字都不會(huì)自動(dòng)調(diào)整