Vue實踐經驗

<!-- 一、若是支持Google Chrome Frame：GCF，則使用GCF渲染；二、若是系統安裝ie8或以上版本，則使用最高版本ie渲染；三、不然，這個設定能夠忽略。 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- 對視窗縮放等級進行限制，使其適應移動端屏幕大小 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 當把這個網頁添加到主屏幕時的標題（僅限IOS） -->
<meta name="apple-mobile-web-app-title" content="北郵人論壇註冊">
<!-- 添加到主屏幕後全屏顯示 -->
<meta name="apple-touch-fullscreen" content="yes" />

這樣能讓背景平鋪

body:before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(bg.png) center 0 no-repeat;
  background-size: cover;
}

沒有數據的`{{message}}`直到編譯完成才顯示：

[v-cloak]{
    display:none;
}

//vue特有方法
<div v-cloak>{{message}}</div>

H5與APP iframe交互！

openBackLink(url){
   var iframe = document.createElement("iframe");
       iframe.setAttribute("src", url);
       iframe.setAttribute("style","dispaly:none;");
       iframe.setAttribute("height","0px");
       iframe.setAttribute("width","0px");
       iframe.setAttribute("frameborder","0");
       document.body.appendChild(iframe);
       iframe.parentNode.removeChild(iframe);
       iframe = null;
}

修復css屬性position fixed抖動

目前能夠解決的方法我也嘗試了一些，只剩下幾個。

第一種，給fixed的元素添加css的樣式，我試過，這個能夠解決此閃動的問題。

-webkit-transform: translateZ(0);

 

第二種，設置css。我是在不復雜的頁面作的測試。

 

html, body {height:100%;overflow:auto;margin: 0;}

第三種，引入jquery1.7.2的類庫。注意，引入這個CSS可能會致使原來的頁面佈局出現問題，慎重。個人同事也說，這個是爲了解決IE6系列的fixed抖動問題。

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

 

HTML，JQ插入script標籤：

var videoScript = document.createElement('script');
    videoScript.src = 'http://union.bokecc.com/player?vid=7E13A04AD8F826429C33DC5901307461&siteid=29639E609A1142B0&autoStart=true&width=100%&height=100%&playerid=2025478528BA86BE&playertype=1';
    videoScript.type ='text/javascript';
    $('#lol').html('');
    document.getElementById('lol').appendChild(videoScript);

判斷機型：

var userAgent = navigator.userAgent;
var index = userAgent.indexOf("Android");
if(index >= 0){
    var androidVersion = parseFloat(userAgent.slice(index+10));
    if(androidVersion < 4.5){
        return true
      }else{
        return false
      }
}