CODEWITHSUNDEEP
javascriptmobileresponsive-designmedia-queries
Sarath
Sarath

Reputation: 9156

How can i classify between mobile devices and large screen devices .?

Im bulding a web application , i have a two set fluid layout one for small screen devices and other for large screen.? So how can i put my benchmark between these two catagory .? I know how to put different css media queries and device detection technique in js.

But i want a general standard to differentiate between these two category

For eg: i have 

var deviceIs = {
    android : agent.match(/Android/i),  
    iPhone  : agent.match(/iPhone/i),
    iPad    : agent.match(/iPad/i),
    iPod    : agent.match(/iPod/i),
    BB      : agent.match(/BlackBerry/i),
    webOS   : agent.match(/webOS/i)
};

var currentRES = {
    width : screen.width,
    height : screen.height
}

But i want to create an object like 

var screenTypeis ={

       smallScreen : function(){     
         if(i want this generalized condition){
                 return true;    
           }
          else{    
           return false;
          }    
}

}

For example device width > 480 on potrait and < 480 && etc etc ....

Upvotes: 2

Views: 517

Answers (4)

Sarath
Sarath

Reputation: 9156

OK so what i fonund is something like this

 var screenType = {
        isMobileScreen: function () {
            if (deviceIs.iPhone || deviceIs.iPod || deviceIs.BB || deviceIs.webOS || deviceIs.mobile || (currentRES.width <= 480 && currentRES.height <= 720)) {
                return true;
            }
            return false;
        }
    };

And I have added more device list also .

 var deviceIs = {
        mobile: agent.match(/Android; Mobile|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i),
        iPhone: agent.match(/iPhone/i),
        iPad: agent.match(/ipad/i),
        tab: agent.match(/ipad|android 3|gt-p7500|sch-i800|playbook|tablet|kindle|gt-p1000|sgh-t849|shw-m180s|a510|a511|a100|dell streak|silk/i),
        iPod: agent.match(/iPod/i),
        BB: agent.match(/BlackBerry/i),
        webOS: agent.match(/webOS/i)
    };

Upvotes: 1

bezmax
bezmax

Reputation: 26142

Basically, you can't. The only way to know that, would be by getting DPI setting somehow, and dividing resolution by it. However, DPI can not be accessed by javascript. See this question for details: Can you access screen display’s DPI settings in a Javascript function?

Upvotes: 1

noob
noob

Reputation: 9212

As far as I understand you want something like this

function detectDevice(s) {
    var userAgent = navigator.userAgent.toLowerCase(),
        platform = navigator.platform.toLowerCase();
    if (s) {
        if (userAgent.match(s.toLowerCase()) != null)
            return true;
        return false;
    }

    this.isSmall = function() {
        if (screen.width <= 480 && screen.height <= 480)
            return true;
        return false;
    };
    this.device = function() {

        var a = ["Android", "iPhone", "iPad", "iPod", "BB", "webOS"];
        for (var i = 0; i < a.length; i++) {
            if (userAgent.match(a[i].toLowerCase()) != null)
                return a[i];
        }
        var a = ["Win", "Mac", "Linux"];
        for (var i = 0; i < a.length; i++) {
            if (platform.match(a[i].toLowerCase()) != null)
                return (a[i] == "Win") ? "Windows" : a[i];
        }
        return "Unknown Device";
    };
    this.userAgent = userAgent;
    this.platform = platform;
}

Example

Upvotes: 1

Paul
Paul

Reputation: 9022

Who says what is a small screen and what not?

The new iPad for example is rather small in size (compared to normal screens) but got a high resolution resulting in a million pixels more than HD standard.

Personally, I would just go for CSS media queries since user agent strings can easily be modified anyways.

Upvotes: 1

Related Questions