判斷瀏覽器與手機裝置的方法

2017 年整理的瀏覽器與手機裝置判斷筆記，包含 User Agent、IE 判斷、CSS Hack 與不同瀏覽器的判斷方式。

發布於 2017.01.26 ・更新於 2026.08.05W

這篇是當時整理瀏覽器與手機裝置判斷方式時留下來的筆記。

CSS Hack

當時參考：

IE6、IE7、IE8、Firefox 的一些辨識符號：

\9
*
_

判斷手機裝置

透過 navigator.userAgent 判斷目前使用的裝置。

var uA = navigator.userAgent;

if (
  uA.match(/iPod/) ||
  uA.match(/iPad/) ||
  uA.match(/iPhone/)
) {
  $("#moLoAppDownload").attr(
    "href",
    "https://itunes.apple.com/app/apple-store/id919043762"
  );
} else if (
  uA.match(/Android/) ||
  uA.match(/Windows Phone/)
) {
  /* $("#moLoAppDownload").attr("href", getAPK(medium, "", "", activity)); */

  $("#moLoAppDownload").attr("href", getAPK(medium));

  $("#moLoAppDownload").click(function () {
    $(".teachGroup").fadeIn();
  });
} else {
  $("#moLoAppDownload").attr(
    "href",
    getEXE(medium, activity)
  );
}

$("#closeTeach").click(function () {
  $(".teachGroup").fadeOut();
});

$("#homeURL").attr(
  "href",
  location.protocol +
    "//" +
    location.host +
    "/mobileHD/"
);

判斷 IE 版本

$(document).ready(function () {
  var isIE = function (ver) {
    var b = document.createElement("b");

    b.innerHTML =
      "<!--[if IE " +
      ver +
      "]><i></i><![endif]-->";

    return (
      b.getElementsByTagName("i").length === 1
    );
  };

  /* 判斷 IE8 / IE9 透明貼圖 */
  if (isIE(8) || isIE(9)) {
    $("img").each(function () {
      if (
        $(this)
          .attr("src")
          .indexOf(".png") != -1
      ) {
        $(this).css({
          filter:
            'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' +
            $(this).attr("src") +
            '", sizingMethod="scale");',
        });
      }
    });
  }
});

JavaScript 判斷瀏覽器：版本 1

var isFirefox =
  navigator.userAgent.match("Firefox");
// 判斷是否為 Firefox

var isIE =
  /Trident\/7\./.test(navigator.userAgent);

var isOpera =
  navigator.userAgent.match("Opera");
// 判斷是否為 Opera

var isSafari =
  navigator.userAgent.match("Safari");
// 判斷是否為 Safari 或 Google Chrome

if (isIE) {
  alert("你使用的是 IE");
}

if (isFirefox) {
  alert("你使用的是 FireFox");
}

if (isOpera) {
  alert("你使用的是 Opera");
}

if (isSafari) {
  alert("你使用的是 Chrome 或 Safari");
}

JavaScript 判斷瀏覽器：版本 2

// Opera 8.0+
var isOpera =
  (!!window.opr && !!opr.addons) ||
  !!window.opera ||
  navigator.userAgent.indexOf(" OPR/") >= 0;

// Firefox 1.0+
var isFirefox =
  typeof InstallTrigger !== "undefined";

// At least Safari 3+
var isSafari =
  Object.prototype.toString
    .call(window.HTMLElement)
    .indexOf("Constructor") > 0;

// Internet Explorer 6-11
var isIE =
  false || !!document.documentMode;

// Edge 20+
var isEdge =
  !isIE && !!window.StyleMedia;

// Chrome 1+
var isChrome =
  !!window.chrome &&
  !!window.chrome.webstore;

// Blink engine detection
var isBlink =
  (isChrome || isOpera) &&
  !!window.CSS;

var output =
  "Detecting browsers by ducktyping:<hr>";

output +=
  "isFirefox: " + isFirefox + "<br>";

output +=
  "isChrome: " + isChrome + "<br>";

output +=
  "isSafari: " + isSafari + "<br>";

output +=
  "isOpera: " + isOpera + "<br>";

output +=
  "isIE: " + isIE + "<br>";

output +=
  "isEdge: " + isEdge + "<br>";

output +=
  "isBlink: " + isBlink + "<br>";

document.body.innerHTML = output;

當時在 Chrome 上測試的輸出：

isFirefox: false
isChrome: true
isSafari: false
isOpera: false
isIE: false
isEdge: false
isBlink: true

2026 年後記

這篇是 2017 年留下來的瀏覽器相容性筆記，所以保留了當時使用 User Agent、IE 條件註解、jQuery 與瀏覽器特徵判斷的寫法。

現在瀏覽器環境已經和當時差很多，像是 IE、舊版 Edge、Windows Phone，以及程式碼裡拿來判斷瀏覽器的部分 API，都已經不適合直接套用到現在的新專案。

原文中的 AlphaImageLoader 也是早期 Internet Explorer 使用的專有濾鏡。這段程式碼保留下來，是作為當時處理瀏覽器相容性問題的紀錄，不建議拿來當現在的實作方式。

至於現在如果需要判斷裝置或瀏覽器能力，我會另外整理新的做法；這篇就先保留當年的版本。

分享這篇

X Facebook LINE Threads