Are you sending different content to either desktop or mobile devices?

If you aren't, you could use the "responsive web design" approach
(http://www.alistapart.com/articles/responsive-web-design/ or
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/)
or the "mobile first" approach (http://www.lukew.com/ff/entry.asp?933
or http://yiibu.com/).

Using either of these approaches, you can use CSS media queries to
style elements based on attributes like device width. You can even
have all your styles in one CSS file that render differently for
different devices.

/* Inside your .css file */
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

Reply via email to