Question

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

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;
    }
}

但是我对于景观和第二代州来说是个问题。所以获得使用费比使用css更好

Answer 1

您可以使用device.js http://matthewhudson.me/projects/device.js/

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

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

device.mobile()
device.tablet()

使用以下方法获取方向：

device.landscape()
device.portrait()

Answer 2

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

Answer 3

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

<强> PC

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 Phone

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，壁虎，WebKit的，歌剧
浏览器类型

IE，铬，Firefox，歌剧
系统

在Windows，Mac，Unix的
移动设备

的iPhone，iPod，机器人，诺基亚

你可以这样察觉：

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

如何使用javascript，css检测浏览器/设备？

3 个答案: