Device Detection Help

[Guber-X]

ive done loads of reading about using @media tags in CSS and all of them always say

@media only screen and (min-width: 481px), only screen and (min-device-width: 481px)

or this

@media only screen and (-webkit-min-device-pixel-ratio: 2)

to use for iPhone screens, but they dont work correctly. I've tried all sorts of @media strings and as far as it goes for iPhone and iPod Touch's, it seems to work when putting the min-width to 981px, or max-width to 980 either way depending on how you layout your CSS file. is there another way of doing this because basicly a desktop computer running a screen rez of 800x600 would end up getting the smaller layout.

[Guber-X]

hmmm... just came across something odd but works... instead of putting the media queries in a CSS document... i put it in the main file of my web page and it works better/proper.

this is what i have...

<style>
@media only screen and (max-device-width: 480px) {
   /* Mobile Layout 480px and below */

body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #000000;
background-image:url(images/mobile/background.png);
background-repeat:no-repeat;
background-position:center top;
margin: 0;
padding: 0;
color: #000000;
}

/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
width: 480px;
height: 530px;
margin: 140px auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

.menu {
width: 440px;
margin-left: 20px;
margin-right: 20px;
text-align: center;
}
.content {

padding: 0px 0;
}
}
</style>