As usual my experience comes just after I need it.

Been working on mobile enabling a web page and am trying to get the content to display sensibly on an iPhone and a Galaxy.

I’m making a lot of mistakes… I’ve been using pixels for button sizes and they are horrendously different sizes depending on how it’s being viewed ( Desktop / Mobile )

So to the Google and I have found:

http://www.html5rocks.com/en/mobile/responsivedesign/ – Which is an over view of responsive design. In other words how to squish stuff into different screen sizes. It’s also explains data uris (Packing Icons into base64 encoded CSS attributes  so you can load your icons as part of your CSS load and not do dozens of extra HTTP requests for them).

This led to a Fluid Grid site which gives  you the secret (a formula and examples) to creating proportional CSS. http://alistapart.com/article/fluidgrids

Finally there is the Google Page on Responsive Design which is an improved update of the first link I listed and should prove very interesting once I read it.

https://developers.google.com/web/fundamentals/layouts/

Another couple of helpful links:

http://www.useragentstring.com Which provides a database of User Agents Strings too.

The below link shows options for emulating mobile devices in Google’s Chrome browser.
https://developer.chrome.com/devtools/docs/device-mode <== this allows me to remove the User Agent Switcher (which  I found annoying because it changed the User Agent for all my tabs)  and just use the emulation mode in one tab…. nice!