I have made a test site, i used CSS, where you can have one set of css for screens less that a certain width, and 1 for wider pages. you will also need the metat tag below that will set your page to the correct width for each phone.
So when a mobile comes to the page, its sets a width lets say 320px, then your css will take over (note: set to <850)
you can then set a layout for the small screen, this way you can have 2 layouts in the sdame page, and keep the rank, rather then having one page for browsers and one for mobiles
if you want to see it work, try this link, it is a simple example, and i have not tested it on a phone, (I am one of the few poeple in the world that does not have a mobile phone) http://news.thatsit.net.au/
.myclass{ for the main page }
@media only screen and (max-width: 850px)
{
.myClass{ for the mobile page}
}