css前端初始化

時間 2019-11-08

標籤 css 前端初始化欄目 CSS 简体版

原文原文鏈接

前言

當下移動端橫行，日常咱們作一些移動端的項目，接觸最多的就是H5，雖然作移動端不用兼容IE，可是
咱們要兼容微信、app、ios、android... 今天就給寫幾個日常開發常常會遇到的問題以及解決辦法。

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

頭部初始化

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=」Content-Type」 content=」text/html; charset=utf-8″>
<meta id=」viewport」 name=」viewport」 content=」width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no」>
<meta name=」MobileOptimized」 content=」320″>
<meta name=」format-detection」 content=」telephone=no」>

</head>

</html>

1.audio標籤問題

通常要添加背景音樂的話，咱們的第一反應就是使用audio標籤，可是這裏有一個坑。若是你的項目是一進頁面就要播放音樂的話，audio標籤在微信端是不生效的。這時候咱們能夠添加以下代碼：html

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標籤問題

a. app裏面不能控制爲所欲爲的控制視頻的播放和暫停。

解決辦法：android

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

若是出現這種狀況的話，咱們就不能使用系統自帶的控制播放和暫停的功能了，須要咱們本身封裝一段控制播放和暫停的方法出來。

b.微信端自動播放

<!-- 必須加在微信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手機彈出鍵盤有時候會遮住輸入框，給人一種很不爽的體驗，可是這種狀況不多出現。下面簡單介紹一下解決辦法：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文本

咱們日常使用的是web

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

可是在使用zepto的時候居然報錯。研究很久不曉得是什麼緣由。後來查了下zepto的api 發現獲取方法改了。如今是chrome

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

6.swiper圖片超出父級盒子

給img添加api

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

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;} //移動端圖片邊框   至關於  border:0

a,
input,
button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
//-webkit-tap-highlight-color:rgba(0,0,0,0);//透明度設置爲0，去掉點擊連接和文本框對象時默認的灰色半透明覆蓋層(iOS)或者虛框(Android) 
input，textarea{outline:none}  
//取消chrome下默認的文本框聚焦樣式

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

-webkit-user-select: none;
// 禁止頁面文字選擇 ，此屬性不繼承，通常加在body上規定整個body的文字都不會自動調整
input,
button {
  -webkit-appearance: none;
  border-radius: 0;
}
//去掉IOS移除原生控件樣式

-webkit-touch-callout:none; 
// 禁用長按頁面時的彈出菜單

body {
  margin: 0;
  -webkit-user-select: none;
}
//禁止移動端用戶進行復制.選擇.

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

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

-webkit-text-size-adjust: none; 
//禁止文字自動調整大小(默認狀況下旋轉設備的時候文字大小會發生變化)，此屬性也不繼承，通常加在body上規定整個body的文字都不會自動調整

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。