How to identify screen size

Question

I am working on some mobile web application (it my firs time) and I faced such problem: despite the use of special mobile frameworks some sizes of modal windows are not correct on small screens. For example i have an ipod and ipad:

iPod iPad

On iPod the size of buttons is already changed for a bit. So, may be there is any way to identify screen size like category (small, normal, large or may be just get list of sizes to the array) using js may be and then based on it i would do some basic changes in the source.

Try screen.height and screen.width http://www.w3schools.com/jsref/prop_screen_height.asp — Mathew Thompson, Aug 30 '12 at 11:01
@mattytommo As i said before, i need something like a category or array of sizes. — NoNameZ, Aug 30 '12 at 11:05

score 0 · Answer 1 · answered Aug 30 '12 at 11:06

0

You can get screen height width using jquery like

alert("Width :"+$(window).width()+" Height :"+$(window).height());

You does not get size specification like small,big etc.

You have write responsive code yourself using screen width and height.

answered Aug 30 '12 at 11:06

Hkachhia

4,463
6
41
76

score 0 · Accepted Answer · answered Aug 30 '12 at 11:08

0

use jquery to find current width of window

$(function() {
    showWidth($(this).width());
    $(window).resize(function() {
        showWidth($(this).width());
    });
});

function showWidth(wid) {
     var width = parseInt(wid);
     if (width < 1440) {
        //use wider stylesheet
    } else if ((width >= 901) && (width < 1440)) {
        //use wide stylesheet
    } else {
        //use small stylesheet
    }    
}

answered Aug 30 '12 at 11:08

Sark

4,458
5
26
25

@NoNamez i used the above code for changing the style sheet of web page which is viewed in desktop, in your case you can put whatever screen size you want to use. – Sark Aug 30 '12 at 11:23

score 0 · Answer 3 · answered Aug 31 '12 at 13:24

I would strongly suggest to use css media-queries instead of identifying the width in js and serving stylesheets based on that.

CSS Media Queries are standradrized: http://www.w3.org/TR/css3-mediaqueries/

Also see examples and usage here: http://css-tricks.com/css-media-queries/

How to identify screen size

3 Answers3

Linked