检测设备（手机/电脑）并采取行动答案

【问题标题】：detect device(mobile/pc) and do action检测设备（手机/电脑）并采取行动
【发布时间】：2013-11-28 14:38:06
【问题描述】：

我想检测访问我网站的用户是使用手机还是电脑，如果他使用的是电脑，代码应该加载特殊的 css 和 html 代码，否则代码应该加载不同的 css 和 html 代码（html 和 css对于同一文件中的两个设备）。
为了检测设备，我检查了许多代码，但不幸的是，它们都只为特殊手机（iphone、ipad、android、黑莓、galaxy...）提供了该代码，我想要一个适用于整个手机的代码。
设备检测示例：

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

此代码中的问题是它仅适用于 iphone。

【问题讨论】：

这里有很多关于 SO 的现有答案。看看this 和that 或者试试谷歌！
对不同的屏幕尺寸使用@media 比使用Javascript 进行设备检测更好。

标签： javascript jquery css

【解决方案1】：

如果您之前使用过 Twitter Bootstrap，您会发现他们使用 @media 来区分不同设备的 css。此链接应该会有所帮助，您不必编写自定义代码来确定设备类型。

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

【讨论】：

【解决方案2】：

你可以像这样使用媒体查询：（这是 CSS 方式）

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

这种样式适用于带有max-width:600px 的设备，您可以随意更改。

learn more here

【讨论】：