CSS3 brings sites to mobile comfortably.
One requirement that is becoming hugely popular in web development is mobile device support.
One of the biggest issues with sites on mobiles is bandwidth.
A lot of it is contributed to the sites style alone.
This can be resolved with CSS3, at least on Android and iPhone.
I tested them myself.
Of course, I doubt Windows Mobile will handle it as IE does not. Maybe the upcoming IE9 will.
On with the code!
To make a site have an alternate theme for the above mentioned phones and maybe others is simple.
No JavaScript required.
Simply make a CSS stylesheet, name it anything, eg. mobile.css
Now in this file you overwrite the widths of the site (main box model blocks).
Making them a max-width of less than 480px.
Make sure you count your padding in there.
In the example I am going to show, I also increase the navigation size for ease on touch screen devices.
I also increase the overall font size. This is easy if you use a Typographic scale like I do. (You will see this also)
Now link in the mobile styesheet with the CSS media=”” property.
In CSS3 you can now use it like this
|
1 |
media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" |
The first part only screen and (max-width: 480px) works nicely so we can test it on our desktops in FireFox, Safari, Chrome… Not IE..
The second part , only screen and (max-device-width: 480px) is a device detection eg.(mobile device).
So this complete line linking to the mobile.css will look like this
|
1 |
<link href="mobile.css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css"> |
Add this after you normal CSS linked file so it overwrites it when used.
One other thing we need is a meta tag required for some mini browsers.
The tag looks like this
|
1 |
<meta name="viewport" content="width=device-width" /> |
Add this line to the top of your sites header by the other meta tags before your CSS links.
Here is a working sample
CSS3 Mobile Device Site Sample
View it in your browser and reduce the browser width to 480px or less and you will see it change.
Or view it in an iPhone or Android phone.
I also included links in this sample to the source code so you can see the code in full.
Here they are again
Index Source
StyleSheet
Mobile Stylesheet
Conclusion:
With simple options like this you can make a lightweight version of any site for these devices.
Simple overwriting backgrounds, CSS image links, etc…..
Nice simple solution with no extra URL re-writes or JavaScripts for detection…
We can only hope this will be fully adopted to all Mobile HTML browsers, and soon.