如何使用 javascript、css 检测浏览器/设备？答案

【问题标题】：How to detect the browser/device using javascript,css?如何使用 javascript、css 检测浏览器/设备？
【发布时间】：2014-07-28 09:30:01
【问题描述】：

我想检测设备是台式机还是移动设备或平板电脑.. 在此基础上我想更改图像目录例如

if (getDeviceState() == 'phone') {
              alert("phone");
          }
          else if (getDeviceState() == 'tablet') {
              alert("tablet");
          }
          else {
              alert("small-desktop");
          }

我已经尝试过使用 css 和 javascript

          var indicator = document.createElement('div');
          indicator.className = 'state-indicator';
          document.body.appendChild(indicator);

          // Create a method which returns device state
          function getDeviceState() {
              var index = parseInt(window.getComputedStyle(indicator).getPropertyValue('z-index'), 10);

              var states = {
                  2: 'small-desktop',
                  3: 'tablet',
                  4: 'phone'
              };

              return states[index] || 'desktop';
          }
          if (getDeviceState() == 'phone') {
              alert("phone");
          }
          else if (getDeviceState() == 'tablet') {
              alert("tablet");
          }
          else {
              alert("small-desktop");
          }

在css中

/* small desktop */
@media all and (max-width: 1200px) {
    .state-indicator {
        z-index: 2;
    }
}

/* tablet */
@media all and (max-width: 768px) {
    .state-indicator {
        z-index: 3;
    }
}

/* mobile phone */
@media all and (max-width: 360px) {
    .state-indicator {
        z-index: 4;
    }
}

但是我对风景和肖像状态越来越有把握了..所以获得 useragent 比使用 css 更好

【问题讨论】：

我不是为您的问题提供完美答案的人。但我所知道的是有大量非常好的框架、jQuery 插件和其他可用于检测的方法。为什么要费心自己写？关于您的问题：在 Twitter Bootstrap 中检查它是如何完成的可能是一个想法？
试试这个：jquerymobile.com/download
你也可以使用像 Modernizr 这样的 JS 库来检测

标签： javascript html css ipad user-agent

【解决方案1】：

你可以使用device.jshttp://matthewhudson.me/projects/device.js/

源代码和示例可以从以下链接获得 https://github.com/matthewhudson/device.js/tree/master

使用以下方法获取设备类型

device.mobile()
device.tablet()

使用下方获取方向：

device.landscape()
device.portrait()

【讨论】：

【解决方案2】：

仅使用 JS 可以检查 window.outerHeight 和 window.outerWidth。因此，结合不同的尺寸，您可以定义设备类型。此外，您可以解析 navigator.userAgent，其中包含用户浏览器的名称。

【讨论】：

【解决方案3】：

HTML有user agent字段发送设备信息：

电脑

mozilla/5.0 (windows nt 6.3; wow64) applewebkit/537.36 (khtml, like gecko) chrome/36.0.1985.125 safari/537.36

iPhone

Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9B176 MicroMessenger/4.3.2

Windows 手机

UCWEB/2.0 (Windows; U; wds7.10; zh-CN; Nokia 900) U2/1.0.0 UCBrowser/8.6.0.199 U2/1.0.0 Mobile

内核引擎

IE、Gecko、WebKit、Opera
浏览器类型

IE、Chrome、Firefox、Opera
系统

Windows、Mac、Unix
移动设备

iPhone、iPod、Android、诺基亚

你可以这样检测：

    var ua = navigator.userAgent.toLowerCase();
    //check the device like this
    isChrome = ua.indexOf("chrome") &gt; -1

【讨论】：