Getting a real device's screen size

Question

I have a problem with getting a real device's screen size. Look at the jsfiddle: http://jsfiddle.net/glenswift/CpBkU/

Resizing output frame causes changes in h1 text. I know pixel size of different parts of h1, so it works correctly on desktop. But on device with big dpi and small screen, my solution does not work, text goes out of screen.

I don't know how to solve this problem. I've seen simular questions (1, 2) but they don't help me.

My code:

function setPositions(){
    var W = $(window).width(),
        h1 = '';
    if (W < 210) {
        h1 = 'Hello';
    } else if (W < 270) {
        h1 = 'Hello World';
    } else {
        h1 = 'Hello World Text'
    }
    $('h1').empty().text(h1);
}
$(document).ready(function(){
    setPositions();
});
$(window).resize(function(){
    setPositions();
});

Thank you a lot.

Answer 1

One more thing about media queries http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

It's really a great article that has opened my mind :)

ENJOY!