iPhone Considerations

The mobile application launches Visualforce Mobile pages in an embedded browser. The iPhone embedded browser is the same full-featured Safari browser used for the default Web browser. It has excellent JavaScript support and performs well.

When developing pages for the iPhone, these considerations apply:

Page Zoom
By default, the iPhone browser sets your page width to 980 pixels—a value chosen to maximize compatibility with a broad range of websites. Use a <meta> tag to let the iPhone browser know how wide to display the initial page:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Other browsers ignore this tag.
For iPhone-specific applications, you should set the page width to the width of the device. When providing multiple properties for the viewport meta key, use a comma-delimited list of assignment statements. The following table describes the viewport properties:
Property Description
width The width of the viewport in pixels. The default is 980. The range is from 200 to 10,000. Use the device_width value to set the page to the width of the device in pixels.
height The height of the viewport in pixels. The default is calculated based on the value of the width property and the aspect ratio of the device. The range is from 223 to 10,000 pixels. Use the device_height value to set the page to the height of the device in pixels.
initial-scale The initial scale of the viewport as a multiplier. The default is calculated to fit the web page in the visible area. The range is determined by the minimum-scale and maximum-scale properties. You can set only the initial scale of the viewport, which is the scale of the viewport the first time the web page is displayed. Thereafter, the user can zoom in and out unless you set user-scalable to no. Zooming by the user is also limited by the minimum-scale and maximum-scale properties.
minimum-scale Specifies the minimum scale value of the viewport. The default is 0.25. The range is from >0 to 10.0.
maximum-scale Specifies the maximum scale value of the viewport. The default is 1.6. The range is from >0 to 10.0.
user-scalable Determines whether or not the user can zoom in and out. Set to yes to allow scaling and no to disallow scaling. The default is yes. Setting user-scalable to no also prevents a page from scrolling when entering text in an input field.
Screen Rotation
In the mobile application, rotating the screen will not cause the page to flip and re-size.
URL Targets
The embedded browser does not support the target="_blank" attribute. If you use it in your page, the URL target doesn’t load.
File Access
The embedded browser does not natively offer access to the file system, camera, location, or other device data.
Static Resource Caching
In the mobile application, static resources (such as imahes, JavaScript, or CSS) are not cached. This can have affect performance on slow connections. The embedded browser does support caching.
As a general rule for mobile development, you shouldn't use components that:
  • Rely on JavaScript to perform an action
  • Depend on Salesforce.com stylesheets
To check if your Visualforce Mobile page falls into one of these categories, you can view the HTML source of the page. If you see a <script> tag that refers to JavaScript (.js) or a <link> tag that refers to a stylesheet (.css), you should test that the page displays as expected.
Previous
Next