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

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

| improve this answer | | | | |
  • 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.