PDA

View Full Version : thoughts on CSS switching for tablet and phones within Phone Gap'd Sencha app?



eyepoker
4 Oct 2011, 4:01 PM
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?

eyepoker
4 Oct 2011, 4:57 PM
so it turns out that using document.write/writeln will either lockup or crash phonegap. Tried putting the code in all sorts of places... you cannot write in a style tag like you can in a normal web browser. Won't work.

for those who care:


// don't do this!!!
function writeStyle(){
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('android') != -1 && ua.indexOf('mobile') != -1){
//must be an android phone
} else if (ua.indexOf('ios') != -1){
//must be an ios something
}
}

So now the option is pure css media queries, and this seems to work on android - i get the desired affect on an android 3.1 Tablet (acer iconia) and on an Android 2.3 phone (EVO4G):



<link rel="stylesheet" href="css/phone.css" type="text/css" media="handheld, only screen and (max-device-width: 640px)">


Again, need to test on ios.... will do so when the programmers get in in the morning... its late!

steve1964
4 Oct 2011, 11:52 PM
Hi, in your html:


<link rel="stylesheet" href="css/custom.css" type="text/css" id="customcss">

In your js:


if(Ext.is.Android){
Ext.get("customcss").dom.href = "css/android.css";
} else if(Ext.is.iOS){
Ext.get("customcss").dom.href = "css/apple.css";
} else if(Ext.is.Blackberry){
Ext.get("customcss").dom.href = "css/bb6.css";
}

eyepoker
5 Oct 2011, 7:43 AM
thanks steve...

I see - you're replacing the href of the link tag based on the platform....

Here's that idea applied to my specific situation, where i have a base css and only want the second mobile one if the device is not a tablet:

html:


<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" href="empty.css" type="text/css" id="customcss">


and the js:



if(!Ext.is.Tablet){
Ext.get("customcss").dom.href = "css/mobile.css";
}

eyepoker
5 Oct 2011, 1:42 PM
seems like the media query works better than the Ext.get replacement method. its more reliable - some styles don't get over-rided... will keep tinkering...

alexdg69
19 Sep 2012, 9:18 AM
worked like a charm for me.:))