檢測設備（手機/電腦）並采取措施

Question

我想檢測訪問我網站的用戶是否使用手機或PC，如果他使用PC，則該代碼應加載特殊的CSS和HTML代碼，否則該代碼應加載不同的CSS和HTML代碼（兩種設備的html和CSS都在相同的文件中）。
為了檢測設備，我檢查了許多代碼，但不幸的是，它們都提供了僅適用於特殊手機（iphone，ipad，android，blackberry，galaxy ...）的代碼，我想要一個適用於整個手機的代碼。
設備檢測示例：

function DetectIphone()
{
   var uagent = navigator.userAgent.toLowerCase();
   if (uagent.search("iphone") > -1)
      alert('false');
   else
      alert('true');
}

此代碼中的問題是它僅適用於iphone。

Answer 1

如果您以前使用過Twitter Bootstrap，則會發現他們使用@media區分不同設備的CSS。 該鏈接應該有所幫助，您不必編寫自定義代碼即可確定設備類型。

http://www.w3schools.com/css/css_mediatypes.asp

Answer 2

您可以使用以下媒體查詢：（ 這是CSS方式）

@media (max-width: 600px) {
  .selector {
    /* some style */
  }
}

這種樣式適用於max-width:600px ，您可以根據需要進行更改。

在這里了解更多