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

Question

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 ....

Why isn't a buch of `if`s tossing around `screen.height` and `screen.width` enough? — bezmax, Apr 26 '12 at 07:51
no its not ..but iPhone 4s re resolution is double that of previous . So i want a combined condition of these two. — Sarath, Apr 26 '12 at 08:29

score 1 · Answer 1 · answered Apr 26 '12 at 07:53

1

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.

answered Apr 26 '12 at 07:53

Paul

8,974
3
28
48

ys media queries is a good option but how many i can right .? I jsut need to make it two catagory , so is there any mark for tht .? – Sarath Apr 26 '12 at 08:32
It's up to you. You may set the point anywhere you want. Say, you regard 640px as small, then you can just use `@media (max-width:640px) { … }` for the small display and `@media (min-width:641px) { … }` for the large one. You can of course enhance that and take orientation (landscape/portrait) into account. You can add multiple limitations. – Paul Apr 26 '12 at 13:46

score 1 · Answer 2 · answered Apr 26 '12 at 08:27

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

score 1 · Answer 3 · edited May 23 '17 at 12:06

1

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?

edited May 23 '17 at 12:06

Community

1
1

answered Apr 26 '12 at 08:36

bezmax

25,562
10
53
84

score 1 · Accepted Answer · answered Jul 11 '12 at 13:14

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

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

4 Answers4