1 reply [Last post]
dotolee's picture
Last seen: 9 years 45 weeks ago
Timezone: GMT-4
Joined: 2008-06-09
Posts: 3
Points: 2

I'm trying to figure out the width of the new ipod touch units. My css media queries are failing on the device... the logo that is appear is huge.

I've tried to google this and found some articles like: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

But nothing I've tried so far works.


Here's the media query I was expecting would work:

@media only screen and (max-width: 220px), only screen and (max-device-width: 480px) {}

I've also changed the query so it looks like:

@media (min-width: 320px) and (max-width: 480px) {


@media only screen and (max-device-width: 480px) {

On my desktop, using firefox debug tools, i can see that the correct css is being picked up when I resize the browser... but when i navigate to my site using my ipod, the wrong logo appears.

Can you tell me what I might be doing wrong?

Tyssen's picture
Last seen: 8 years 16 weeks ago
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

5th generation has a retina screen

Which means its screen pixel dimensions are 640 x 1136. So you need to be checking for pixel density too.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference