Media Queries

Feb, 22, 2011

 

Pretty exciting for me…I have successfully targeted Screen, Ipad, and Mobile devices using css media queries. This is a simple bare bones experiment but it has tons of possibility. I wanted to use just CSS to show and hide elements on a page. I think for best practice you would have to use a little bit of PHP to limit the actual amount of content being served to a mobile device. I found this script which I have yet to use.


Browser.php

The Ipad and Screen were super easy to hide the H1 text from the other browser however My android was a bit trickier it seems that Android doesn’t accept media queries unless you put in this little meta tag.

meta name=”viewport” content=”width=device-width”

So anyways back to the media querys.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

 
body{font-family: Helvetica, arial, sans-serif;}
h1{font-size:2.5em;font-weight:900;}
h1#mobile{visibility:hidden;}
h1#ipad{visibility:hidden;}</code>
 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {   //This Targets the Ipad
body { background:#999; }
h1#screen{visibility:hidden;}
h1#mobile{visibility:hidden;}
h1#ipad{visibility:visible}
}
 
@media all and (max-width: 600px) {   //This Targets the Android or Any Mobile Device
body {background:#333;color:#fff}
h1#screen{visibility:hidden;}
h1#ipad{visibility:hidden;}
h1#mobile{visibility:visible;}
}

This was done with alot of help from this article http://css-tricks.com/css-media-queries/