How to detect the browser/device using javascript,css?

Question

I want to detect if the device is desktop or mobile or tablet .. On this basis i want to change the image directory for eg

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

i have tried this using css and 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");
          }

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

But i am getting prob for landscape and potrait states..so its better to get useragent than by css

I'm not the one to give you the perfect answer to your question. But what I do know is there are a large number of very nice frameworks, jQuery plugins and other ways available to do the detection. Why bother writing your own? On your question: might be a idea to check how it's done in Twitter Bootstrap? — Dennis Hunink
– Dennis Hunink, Commented Jul 28, 2014 at 9:36

Santosh Joshi · Accepted Answer · 2014-07-28 09:50:37Z

1

You can use device.js http://matthewhudson.me/projects/device.js/

source code and examples can be obtained from following link https://github.com/matthewhudson/device.js/tree/master

Use following methods to get the device type

device.mobile()
device.tablet()

Use below to get the orientation:

device.landscape()
device.portrait()

answered Jul 28, 2014 at 9:50

Santosh Joshi

3,3405 gold badges39 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Valery Viktorovsky · Accepted Answer · 2015-09-18 09:47:12Z

1

HTML has user agent field to send the device information:

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

kernel engine

IE、Gecko、WebKit、Opera
browser type

IE、Chrome、Firefox、Opera
system

Windows、Mac、Unix
mobile device

iPhone、iPod、Android、Nokia

You could detect like this:

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

edited Sep 18, 2015 at 9:47

Valery Viktorovsky

6,7863 gold badges47 silver badges52 bronze badges

answered Jul 28, 2014 at 9:51

SweenEy

911 silver badge2 bronze badges

Comments

Dmitry Maksakov · Accepted Answer · 2014-07-28 09:38:34Z

0

Using only JS you can check window.outerHeight and window.outerWidth. So, combine different sizes you can define device type. Also, you can parse navigator.userAgent, which contains name of user browser.

answered Jul 28, 2014 at 9:38

Dmitry Maksakov

1,7012 gold badges19 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to detect the browser/device using javascript,css?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related