Hybrid View

  1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    93
    Vote Rating
    3
    eyepoker is on a distinguished road

      0  

    Default thoughts on CSS switching for tablet and phones within Phone Gap'd Sencha app?

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


    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?

  2. #2
    Sencha User
    Join Date
    Jun 2011
    Posts
    93
    Vote Rating
    3
    eyepoker is on a distinguished road

      0  

    Default


    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:
    Code:
    // 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):

    Code:
    <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!

  3. #3
    Sencha User
    Join Date
    Aug 2010
    Posts
    303
    Vote Rating
    3
    steve1964 is on a distinguished road

      1  

    Default


    Hi, in your html:

    Code:
    <link rel="stylesheet" href="css/custom.css" type="text/css" id="customcss">
    In your js:

    Code:
    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";
           }

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    93
    Vote Rating
    3
    eyepoker is on a distinguished road

      0  

    Default


    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:
    Code:
    <link rel="stylesheet" href="main.css" type="text/css">
    <link rel="stylesheet" href="empty.css" type="text/css" id="customcss">
    and the js:

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

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    93
    Vote Rating
    3
    eyepoker is on a distinguished road

      0  

    Default


    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...

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    2
    Vote Rating
    0
    alexdg69 is on a distinguished road

      0  

    Default


    worked like a charm for me.

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar