防止頁面快取

<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">

UA= User Agent

用瀏覽器瀏覽網頁時,瀏覽器會發送User Agent到網站伺服器,

伺服器可以根據User Agent識別使用者的作業系統及版本,瀏覽器及版本.

然後判斷使用者瀏覽器可以支援的功能,從而返回給瀏覽器不同的程式碼,

但這種差異一般會很小,甚至沒有,所以我們很難會覺察到它的存在

很多視訊網站比如優酷都有對ipad進行優化，可以選擇觀看高清版視訊，而iphone版就不行，能否在瀏覽器中加入ipad的ua讓這些視訊網站將裝置識別為ipad跳轉到ipad版以便能觀看高清視訊呢？

UA的含義

User Agent中文名為使用者代理，簡稱 UA，它是一個特殊字串頭，使得伺服器能夠識別客戶使用的
作業系統及版本、CPU 型別、瀏覽器及版本、瀏覽器渲染引擎、瀏覽器語言、瀏覽器外掛等。

一些網站常常通過判斷 UA 來給不同的作業系統、不同的瀏覽器傳送不同的頁面，因此可能造成某些頁面無法在某個瀏覽器中正常顯示，但通過偽裝 UA 可以繞過檢測。
通過UA，可以知道使用者的手機型別，是moto的，還是三星的。是moto哪一款的，都可以明白。
通過UA，可以檢視手機型別是什麼的。 根據UA，可以向用戶提供適合於他的機器的相關服務，如大
小合適的圖片，格式準確的鈴聲等。

UA字串

標準格式為：瀏覽器標識 (作業系統標識; 加密等級標識;作業系統或CPU;瀏覽器語言) 渲染引擎標識;版本資訊

瀏覽器標識

手機瀏覽器的標識是針對移動運營商的一個標 志。 某些地區會禁止某些標識的瀏覽器連線網路，因此造成瀏覽器無法聯網。 當你的手機瀏覽器出現無法連線某些網站或者無 法聯網的情況時，可以嘗試修改瀏覽器標識

加密等級標識

　　N: 表示無安全加密
　　I: 表示弱安全加密
　　U: 表示強安全加密

瀏覽器語言

　　設定 >語言和鍵盤設定>手機中指定的語言

作業系統標識

FreeBSD      類unix 作業系統
Mac          蘋果電腦的作業系統Mac OS系統
Solaris     Sun Microsystems研發的計算機作業系統
Linux
Windows
 

渲染引擎

渲染引擎，其實就是網頁瀏覽器的排版引擎，也被稱為樣版引擎。
它負責取得網頁的內容（HTML、XML、影象等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要渲染引擎
瀏覽器使用 AppleWebKit 渲染引擎，格式為：AppleWebKit /版本號

版本資訊

顯示瀏覽器真實版本資訊，格式為： Version/版本號

Android標準的手機瀏覽器UA

Mozilla/5.0 (Linux; U;Android 2.3.5;zh-cn;P331Build/GRJ22) AppleWebKit/533.1 (KHTML,like Gecko) Version/4.0 Mobile Safari/533.1

1. Android版本：這是瀏覽器拼接UA之時，取的系統（Build.VERSION.RELEASE）字串，位於標準UA中用紅色標識的2.3.5處，可以通過 設定 –》關於手機–》Android版本 進行檢視，也就是瀏覽器的Android版本欄位和系統的Build.VERSION.RELEASE 字串保持一致，如果提需求、故障請提交相應維護同事， 不過一般該處使用系統預設不會有問題；

2. 語言和國家：這是系統當前使用語言和國家，位於標準UA中用綠色標識的zh-cn處。前者是語言名，後者是國家名，這點系統預設一般是正確的，和需求不同往往是因為你現在所使用語言及其國家不同而造 成的，不應該算是故障,這點要注意；

3. 外部型號:這部分字串每個專案都會更改且是來回溝通需求成本最高的地方。這部分瀏覽器取的系統（Build.MODEL）字串，位於標準UA中用藍色標識的P331處,可以通過 設定 –》關於手機–》型號進行檢視，也就是瀏覽器的外部型號和系統的Build.MODEL 字串保持一致;

4. 版本號：這部分字串一般是帶的系統字串，復現的概率一般，瀏覽器取的系統（Build.ID）字串，是由該專案SCM同事負責維護的，位於標準UA中用紫紅標識的GRJ22處,也就是瀏覽器的版本號和系統的Build.ID字串保持一致，如果提需求和故障請直接提交到該專案SCM處；

5. 其餘：瀏覽器負責，一般是固定的。電信專案中瀏覽器的UA絕大部分字串是由瀏覽器來寫死的，有一處例外，以一個電信專案中瀏覽器UA需求為例。
6. 電信專案中瀏覽器的UA：

Mozilla/5.0 (Linux;U;Android 2.2.2;zh-cn;ZTE-C_N880S Build/FRF91) AppleWebkit/531.1
(KHTML, like Gecko) Version/4.0 Mobile Safari/531.1 

標題更新

在切換頁面路由之後需在 body 裡面新增 iframe，隨後移除掉 iframe 即可，程式碼如下

// iPhone，iPod，iPad下無法更新標題
if (/ip(hone|od|ad)/i.test(window.navigator.userAgent)) {
  let iframe = document.createElement('iframe')
  let body = document.querySelector('body')
  iframe.style.display = 'none'
  iframe.src = '/favicon.ico'
  iframe.onload = () => {
    setTimeout(() => {
      iframe.remove()
    }, 10)
  }
  body.appendChild(iframe)
}

關於單頁面修改title一事

先道出問題：當頁面載入時，微信頂部 title 獲取並顯示，之後怎麼用JS修改 title ，無效。

這個是針對IOS出現的 hack ，Android是有效的。 貌似是IOS的webview沒有監聽titlechange事件。 目前的處理就是使用重新載入頁面的形式來喚醒頁面的title有關事件。

這裡使用在頁面過載了個iframe的形式：

//解決iOS裝置修改title不起作用的bug
  function set_title(title) {
    document.title = title;
    if (!ua.is_idevice) return;
    //隨便訪問iframe訪問一個網頁，title就可以重新整理了
    var $iframe = $("<iframe style='display:none;' src='/favicon.ico'></iframe>");
    $iframe.on('load',function() {
      setTimeout(function() {
        $iframe.off('load').remove();
      }, 0);
    }).appendTo($body);
  }

iOS Safari 中繫結點選事件失效的解決辦法

因為專案裡的HTML是使用了模板引擎塞進去的，固然統一的事件會用繫結，也可在模板引擎後面新增。 我這裡使用了全域性事件繫結：

// 是否為系統分發禮包
    is_system_activity ? to_system_activity() : distribute_activity();

    $("body").on("touchstart", ".explain", function() {
        if (_hmt) {
            _hmt.push(["_trackEvent", "點選次數", "檢視遊戲規則"])
        }
        $("#game-info").show();
    })

我這裡使用了.on()事件，在IOS測試的時候，無效； 我在想是不是.on事件太新了，啊哈哈哈哈啊哈固然不是啦！！！ 我就直接使用了.bind()事件來繫結，測試沒問題。

那麼現在問題來了，到底為什麼會這樣呢？

問題描述 當使用委託給一個元素新增click事件時，如果事件是委託到 document 或 body 上，並且委託的元素是預設不可點選的（如 div, span 等），此時 click 事件會失效。

解決辦法 解決辦法有 4 種可供選擇：

​將 click 事件直接繫結到目標​元素（​​即 .target）上 將目標​元素換成 或者 button 等可點選的​元素 ​將 click 事件委託到​​​​​非 document 或 body 的​​父級元素上 ​給​目標元素加一條樣式規則 cursor: pointer; ​推薦後兩種。從解決辦法來看，​推測在 safari 中，不可點選的元素的點選事件不會冒泡到父級元素。通過新增 cursor: pointer 使得元素變成了可點選的了。