You probably need this meta tag in the head:
I use it in this demo which will fit an iphone.Code:<meta name="viewport" content="width=device-width; initial-scale=1.0">
Or the one used in the examples you linked to is this one.
Code:<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
That works great. Finally I can move on.
Now, 2 things I need to clarify, base href doesn't work on mobiles? As least not from what I see. The links are broken on my site.
Another, despite setting border=0 in table tag, borders are still coming out. And there are unsightly breaks in the table structure. vertical-align doesn't seem to work too. Does mobiles have problem displaying tables compared to a full browser??
Is there an app thats like firebug or web developer in FF to troubleshoot on mobiles?
For testing n the iphone go to the apple site and download the developer sdk package (mac only) and one of the components is an iphone emulator although I don't know of any actual debugging tools.
Mobile testing is a bit like "try it and see" as there are so many differences.
If you prefer not to download anything, here is a nice webapp that lets you test your mobile design in your browser, simulating the behavior of different types of devices: ProtoFluid. Rapid Prototyping of Adaptive CSS and Responsive Design.