why can't I target smart phone vs. not smart phone with responsive design

Question

I'm trying to define css for smart phone, and everything else in my CSS can be as-is.

Css:

.content { background: orange; padding: 30px; }
#mobile { display:none; }

@media screen and (max-device-width: 480px){
    #mobile { display: block; }
    #desktop { display: none; }
}

Html:

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div id="mobile">this is mobile</div>
  <div id="desktop">this is desktop</div>
</body>
</html>

Live demo: http://jsfiddle.net/L5zDQ/

If you make the browser window shrink w/ the demo above, "this is mobile" never shows up. What am I missing?

What is this "smart phone" you speak of? – zzzzBov Jan 28 '13 at 19:50 — zzzzBov, Jan 28 '13 at 19:50

score 1 · Answer 1 · answered Jan 28 '13 at 19:51

1

instead of using max-device-width you should be using max-width, which is subject to the size of the browser's current state:

@media screen and (max-width: 480px) {
    ...
}

answered Jan 28 '13 at 19:51

zzzzBov

174,988
54
320
367

score 0 · Answer 2 · edited May 23 '17 at 11:44

0

max-device-width is the size of your screen, it does not change when you resize the window.

What you want is max-width which compares to the size of the browser window;

@media screen and (max-width: 480px){
    #mobile { display: block; }
    #desktop { display: none; }
}

See this question for a little more discussion on the topic.

edited May 23 '17 at 11:44

Community

1
1

answered Jan 28 '13 at 19:51

Joachim Isaksson

176,943
25
281
294

why can't I target smart phone vs. not smart phone with responsive design

2 Answers2