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.

score 5 · Accepted Answer · answered May 01 '13 at 20:15

5

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!

answered May 01 '13 at 20:15

op1ekun

1,918
19
26

codingrose · Answer 2 · 2013-04-29T09:49:51.740

4

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.com/tutorials/viewport-meta-tag-for-non-responsive-design

edited Apr 29 '13 at 09:49

answered Apr 29 '13 at 09:42

codingrose

15,563
11
39
58

David Taiaroa · Answer 3 · 2013-05-01T23:08:56.160

3

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

edited May 01 '13 at 23:08

answered Mar 24 '13 at 20:05

David Taiaroa

25,157
7
62
50

I thought about using media queries but was not sure they help me. Sorry, but i can't check this answer right now, but i'll do it tomorrow, and accept your answer it your stuff will work correctly. Anyway, thank you very much for help, your solution really better then mine in any case. – Boris Zagoruiko Mar 24 '13 at 21:17
If this doesn't work and you want to revert to javascript, I think that in addition to what you have you would test for retina display, and if positive, double the break points (ie 420 and 540). See #4 on this page for help with the javascript: http://www.sitepoint.com/css-techniques-for-retina-displays/ Good luck! – David Taiaroa Mar 24 '13 at 22:08

score 2 · Answer 4 · answered May 01 '13 at 23:22

2

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.

answered May 01 '13 at 23:22

Ana Sampaio

351
1
3
8

Getting a real device's screen size

4 Answers4