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

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.

I have a problem with getting a real device's screen size. Look at the jsfiddle: http://jsfiddle/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.

• javascript
• jquery
• responsive-design

Share Improve this question Follow edited May 23, 2017 at 12:21 CommunityBot 111 silver badge asked Mar 24, 2013 at 2:32 Boris ZagoruikoBoris Zagoruiko 13.2k1515 gold badges5353 silver badges8080 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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

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

ENJOY!

Make sure that you use "viewport" in meta tag. It is for responsive web designing. i.e. <meta name="viewport" content="width=device-width" />

Reference : http://webdesignerwall./tutorials/viewport-meta-tag-for-non-responsive-design

Out of interest I've tried a CSS approach. I don't have a retina display device to double check this on, but see how this looks: http://jsfiddle/panchroma/Z678z/

I know this may not be practical in your specific case, but since you are dealing with text and not images, CSS does have some advantages.

HTML

<h1 class="small">Hello</h1>
<h1 class="med">Hello World</h1>
<h1 class="lge">Hello World Text!</h1>  

CSS

 @media (max-width: 210px){
 .small{
 display:inherit;
 }

 .med, .lge{
display:none;
}  
}

etc  

Depending on the viewport, the h1 text changes from hello, to hello world, to hello world text

To know the screen size you should use meta tag <meta name="viewport" content="width=device-width" />

Instead of using your setPositions function, you can use media queries to adjust content depending on screen size width.