1 reply [Last post]
dotolee
dotolee's picture
Offline
newbie
Last seen: 7 years 43 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.

Code:

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) {

or

@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?
Thanks.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 13 weeks ago
Brisbane
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