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:

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.

回答1:

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

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

回答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/

来源：https://stackoverflow.com/questions/12195371/how-to-identify-screen-size