How to debug web sites on mobile devices?
This is the correct answer, not sure why Blaine only left it as a comment!
As of iOS 6 Remote Debugging is available: https://stackoverflow.com/a/12762449/72428
On OS X you can use the Safari web inspector on the iOS Simulator AND iOS 6 devices.
- First enable the Developer menu in Safari on your Desktop.
Next, enable remote debugging on your iOS device (or simulator).
Settings > Safari > Advanced > Web Inspector (ON)
Go back to Safari on your computer, click the Developer menu, and select your device (e.g. iPhone Simulator, iPhone)
With Google Chrome for Android Beta you can now do remote debugging using the developer tools built into Google Chrome on your desktop. Here is a video demonstrating how this works.
I recently ran into the same issue with a mobile site I was developing for work. The best solution I found was to use Safari's UserAgent set to Iphone (make sure you have Safari's developer tools enabled). You will have to detect that the user is coming from a mobile device and either redirect them to your mobile url or load the mobile specific stylesheets, as this method doesn't work setting the css media type.
Firefox has this capability as well, but doesn't register webkit css styles (which I assume you will be using as they work for both Mobile Safari and Android).
You will run into a few inconsistencies between your desktop browser and your actual mobile browser, but for quickly identifying styles and javascript debugging it worked like a charm.
Hope this helps.