So I have 2 phones an Android Nexus One and a cheap simple Android device I bought for like $100 retail.
I am trying to make my website mobile device friendly using @media and CSS (I am actually using stylus and Node.JS so the code may look a bit funny).
So I added the following to my style
//trial 1
@media (max-width:480px)
display none
//Trial 2
@media (resolution: 163dpi)
display none
//Trial 3
@media (-webkit-device-pixel-ratio:0.75)
display none
//Trial 4
@media screen and (max-width:480px)
display none
At first I thought my screen was just super high res, but none of these help the less expensive device either. Everything seems to work fine in my browser so I am stumped.
Thanks!
Try adding this meta tag to the <head> of your html:
<meta name="viewport" content="width=device-width,initial-scale=1">
Try from this list, hope it will help:
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}
As tw16 says, you need width=device-width to tell the browser not to pretend to have a bigger resolution. On another note, with recent versions of Stylus this is also legal:
.foo
display block
&
@media (max-width:480px)
display none
@media (resolution: 163dpi)
display none
@media (-webkit-device-pixel-ratio:0.75)
display none
@media screen and (max-width:480px)
display none
Which compiles to:
.foo {
display: block;
}
@media (max-width:480px) {
.foo {
display: none;
}
}
@media (resolution: 163dpi) {
.foo {
display: none;
}
}
@media (-webkit-device-pixel-ratio:0.75) {
.foo {
display: none;
}
}
@media screen and (max-width:480px) {
.foo {
display: none;
}
}
I find this helps keeping the media queries related to the specification.