CODEWITHSUNDEEP
javascripthtmlcssipaduser-agent
Vaibs_Cool
Vaibs_Cool

Reputation: 6160

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

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

Upvotes: 0

Views: 2253

Answers (3)

SweenEy
SweenEy

Reputation: 91

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

  1. kernel engine

    IE、Gecko、WebKit、Opera

  2. browser type

    IE、Chrome、Firefox、Opera

  3. system

    Windows、Mac、Unix

  4. 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") > -1

Upvotes: 1

Santosh Joshi
Santosh Joshi

Reputation: 3320

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()

Upvotes: 1

Dmitry Maksakov
Dmitry Maksakov

Reputation: 1701

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.

Upvotes: 0

Related Questions