-1

I had created a vf page earlier now client requirement is to enhanced that page as it able to work in any eviornment such as ipad , iphone ,android etc. as of now my page is working for desktop and i included logic to work in mobile ,ipad and all but it seems that my logic is not working ...

here is my vf page where i included sfdc1 logic ::

 <apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />
    <apex:includeScript value="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js" />
    <apex:includeScript value="//code.jquery.com/ui/1.10.2/jquery-ui.js" />
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />


<script type='text/javascript'>
        j$ = jQuery.noConflict();
        /** Temporary Bug Fix for iOS 8 Touch/Scroll Bug */
        (function(){
            try{
                var a = navigator.userAgent; 
                if( ( a.indexOf( 'Salesforce' ) != -1 ) && ( a.indexOf( 'iPhone' ) != -1 || a.indexOf( 'iPad' ) != -1 ) && ( a.indexOf( 'OS/8' ) != -1 || a.indexOf( 'OS 8' ) != -1 ) && ( a.indexOf( 'Safari' ) == -1 ) ) { 
                        var s = document.createElement('style');
                        s.innerHTML="html,html body{overflow: auto;-webkit-overflow-scrolling:touch;}body{position:absolute;left:0;right:0;top:0;bottom:0;}";
                        document.getElementsByTagName('head')[0].appendChild(s);
                    }
            } catch(e) {}
        })();
    </script>


    <script type='text/javascript'>
        var ua=navigator.userAgent;
        if((ua.indexOf('Salesforce')!=-1)&&(ua.indexOf('iPhone')!=-1||ua.indexOf('iPad')!=-1)&&(ua.indexOf('OS/8')!=-1||ua.indexOf('OS 8')!=-1)&&(ua.indexOf('Safari')==-1)){
        function IOS_SCROLL_BOOTSTRAP() { 
        var children = Array.prototype.slice.call(document.body.children), 
        placeholder = document.createElement('section'),
        fragment = document.createDocumentFragment(),
        styles,
        width,
        height;
        children.forEach(function(c){fragment.appendChild(c);});
        placeholder.appendChild(fragment);
        styles = [
        'width:100%;',
        'height:', (window.screen.height - 42), 'px;',
        'position: absolute; overflow: auto; -webkit-overflow-scrolling: touch'
        ].join('');
        placeholder.style.cssText = styles;
        document.body.appendChild(placeholder);
        }
        window.addEventListener('load', function (e) {
        IOS_SCROLL_BOOTSTRAP();
        }); 
        }


    </script>


and my class logic :::


        String retVal = '';
        String userAgent = ApexPages.currentPage().getHeaders().get('USER-AGENT');
        //& some devices use custom headers for the user-agent.
        if( String.isBlank( userAgent ) )
            userAgent = ApexPages.currentPage().getHeaders().get('HTTP_X_OPERAMINI_PHONE_UA');
        //& some devices use custom headers for the user-agent.
        if( String.isBlank( userAgent ) )
            userAgent = ApexPages.currentPage().getHeaders().get('HTTP_X_SKYFIRE_PHONE');

        //& replace with custom setting - using (?i) case insensitive mode.
        String deviceReg = '(?i)(iphone|ipod|ipad|blackberry|mobile|android|palm|windows\\s+ce)';
        String ipadReg = '(?i)(ipad)';
        String iphoneReg = '(?i)(iphone)';
        String mobileReg = '(?i)(mobile)';
        String androidReg = '(?i)(android)';
        String desktopReg = '(?i)(windows|linux|os\\s+[x9]|solaris|bsd)';
        String botReg = '(?i)(spider|crawl|slurp|bot)';
        Matcher ipadM = Pattern.compile( ipadReg ).matcher( userAgent );
        Matcher iphoneM = Pattern.compile( iphoneReg ).matcher( userAgent );
        Matcher mobileM = Pattern.compile( mobileReg ).matcher( userAgent );
        Matcher androidM = Pattern.compile( androidReg ).matcher( userAgent );

        Matcher m = Pattern.compile(deviceReg).matcher(userAgent);

        if( m.find(0) )
        {
            if( ipadM.find(0) || ( !mobileM.find(0) && androidM.find(0) ) )
            {
                retVal = 'Tablet';
            }
            else if( iphoneM.find(0) || ( mobileM.find(0) && androidM.find(0) ) )
            {
                retVal = 'Phone';
            }
        }
        else
            m = Pattern.compile(desktopReg).matcher(userAgent);
            if( m.find(0) )
                retVal = 'desktop';

            m = Pattern.compile(botReg).matcher(userAgent);
            if( m.find(0) )
                retVal = 'desktop';
        }

        return retVal;

here i am taking all fields from custom setting and what i need to show 10 fields for desktop ..4 for tablet ...2 for mobile but when i run this vf page in sfdc1 ...one/one.app it is displaying vf same as it is showing in desktop..

anybody please help me out from this... thanx in advanced..

closed as unclear what you're asking by Sergej Utko, Mohith Shrivastava, Chris Duncombe, Alex Tennant, dphil Mar 4 '15 at 15:55

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • bootstrap / hammer / jQueryMobile ...? What is the problem you are facing? The statement like it should work in any environment is too broad. What have you tried so far? – Sergej Utko Mar 4 '15 at 10:01
  • when i run this vf page in sfdc1 ...one/one.app it is displaying vf same as it is showing in desktop.. – Tanmay Mar 4 '15 at 10:07
  • Is it not okay? So you want to show the page design depending on the environment? – Sergej Utko Mar 4 '15 at 10:20
  • noo!!! i dont knw kinda mistake i m on... – Tanmay Mar 4 '15 at 10:24
1

Why dont you go for some frameworks like Bootstrap, jQuery Mobile etc. These will help you to create responsive pages.

  • thanx for reply sachin ...but i dont hv that much of tym to move my vf to some angular or bootstrap.. it is correct but some where i m making kinda mistake which is resultiung me in cause.. – Tanmay Mar 4 '15 at 10:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.