Search code examples
javascriptjqueryjquery-mobilemodal-dialogmobiscroll

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

Solution

  • 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
    }    
}