It can be challenging to build Visualforce Mobile pages that look good and perform well in both the BlackBerry and iPhone embedded browsers. Salesforce recommends using one of the following approaches:
<apex:page> <language="javascript" type="text/javascript"> if(!window.blackberry){ window.location.href='{!$Page.iPhoneOptimizedVersion}'; } </script> </apex:page>
<apex:component controller="mobileSampleCon"> <apex:image value="{!URLFOR($Resource.mobileImages, deviceType + '.jpg')}"/> </apex:component>
// mobileSampleCon Controller code snippet ... public class mobileSampleCon { public String deviceType { get; set; } public MobileSampleCon() { String userAgent = ApexPages.currentPage().getHeaders().get('USER-AGENT'); if(userAgent.contains('iPhone')) { deviceType = 'iPhone'; } else if(userAgent.contains('BlackBerry')) { deviceType = 'BlackBerry'; } } }
<!-- Visualforce code snippet --> ... <head> <linkrel="stylesheet" type="text/css" href="{!URLFOR($Resource.Global, '/inc/css/global.css')}"/> <c:conditionalStylesheets resource="{!$Resource.Global}" /> <linkrel="stylesheet" type="text/css" href="{!URLFOR($Resource.SendEmail, '/inc/css/local.css')}"/> <c:conditionalStylesheets resource="{!$Resource.SendEmail}" /> </head> ...
// Visualforce component code <apex:component controller="myConditionalController"> <apex:attribute name="resource" description="The resource name" type="String" required="true"/> // for a BlackBerry standard browser, e.g., Bold <apex:outputPanel layout="none" rendered="{!browserName = 'BlackBerry'}"> <linkrel="stylesheet" type="text/css" href="{!URLFOR(resource, '/inc/css/BBBrowser.css')}"/> </apex:outputPanel> // for a BlackBerry embedded browser in Salesforce Classic // the Apex code distinguished between the regular and embedded browsers <apex:outputPanel layout="none" rendered="{!browserName = 'Salesforce'}"> <linkrel="stylesheet" type="text/css" href="{!URLFOR(resource, '/inc/css/BBEmbedded.css')}"/> </apex:outputPanel> // for the iPhone Safari browser (inside Salesforce Classic or not) <apex:outputPanel layout="none" rendered="{!browserName = 'iPhone-Safari'}"> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> </meta> <linkrel="stylesheet" type="text/css" href="{!URLFOR(resource, '/inc/css/IPhone.css')}"/> </apex:outputPanel> </apex:component>
// Apex code snippet ... public static String getBrowserName() { String userAgent = ApexPages.currentPage().getHeaders().get('User-Agent'); if (userAgent.contains('iPhone')) return 'iPhone-Safari'; if (userAgent.contains('Salesforce')) return 'Salesforce'; if (userAgent.contains('BlackBerry')) return 'BlackBerry'; return 'other'; } ...