Standard Visualforce Pages

Normal Visualforce pages render well on mobile browsers, and can be used as-is, with a modest reduction of the user experience compared to mobile-optimized Web pages. Pages display as they would on the full Salesforce site, and won’t visually match other Salesforce app features.

Limitations

Limitations to the user experience include:

  • Tap targets—buttons, links, form fields, and so on—are optimized for mouse cursors, and can be difficult to hit accurately with a fingertip.
  • The visual design is unchanged, and may not fit with the mobile-optimized, modern visual design of the Salesforce mobile app.

If your development timeline is aggressive, you might find these limitations acceptable.

Example of a Standard Visualforce Page

The following code provides a sample for a standard Visualforce page that allows a user to edit a warehouse record. The edit feature is provided by the standard controller for the object.
1<apex:page standardController="Warehouse__c">
2
3<apex:form>
4
5  <apex:pageBlock title="{! warehouse__c.Name }">
6
7    <apex:pageBlockSection title="Warehouse Details" columns="1">
8      <apex:inputField value="{! warehouse__c.Street_Address__c }"/>
9      <apex:inputField value="{! warehouse__c.City__c }"/>
10      <apex:inputField value="{! warehouse__c.Phone__c }"/>
11    </apex:pageBlockSection>
12        
13    <apex:pageBlockButtons location="bottom">
14      <apex:commandButton action="{! quickSave }" value="Save"/>
15    </apex:pageBlockButtons>
16    
17  </apex:pageBlock>
18
19</apex:form>
20
21</apex:page>
This page can be used in both the Salesforce mobile app and the full Salesforce site. It displays as a standard desktop Visualforce page in both contexts.