How To Identify Screen Size

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

Solution 1:

use jquery to find current width of window

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

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

Solution 2:

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.

Solution 3:

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/