With a heavily themed app (PhoneGap), one where the stock sencha ui doesn't exist (i.e, i have tool bars, but toolbars in name only, they are not sencha toolbars), it seems the best approach to customizing a tablet app for phones is to use a phone-friendly style sheet. Some research on this has only shown me CSS Media queries and UA detection via javascript as the recourse (yes, i have looked at the idomatic layout sencha tut, not easily applied or an option in this case). And, I've read that Sencha itself is depends on the UA for its tablet/phone detection anyway...

If i look at the UA string on an EVO 4G (android 2.3) I see two things of interest: 1) "android" and 2) "Mobile Safari".

On an Acer Iconia (honeycomb) I see the following comparable strings: 1)"android" and 2) no mention of the word "Mobile".

This essentially tells me everything i need to know for Android though of course i will have to assume that all my android tablet users are running Honeycomb and i am making a sweeping assumption that the word "mobile" is present in the UA strings of my targeted Android versions. i suppose I can flash my phone back to stock 2.2 to test..... but in theory I can write a style tag as needed on DeviceReady and be done.

I haven't tried on iOS yet, but, as long as i get the OS from the UA string I'm thinking thats all i need. I would write a style tag into the page and the rest i can take care of with css media queries where i look for the width as we know the values to look for.

So, this seems like a plausible approach to me and maybe a tad too simple.

Any experience out there to shed some light on the topic?