Nokia Browser 8.5 is very similar in its capabilities to iPhone Safari. "Porting" web apps designed for iPhone to Browser 8.5 consists mainly of removing any obstacle that would prevent it from loading the same quality of content as the iPhone.

To embrace the widest variety of devices, web apps should use media queries and other browser-based tests wherever possible to assign interface elements.

The alternative server-based approach, known as user agent switching, relies on user agent strings included in HTTP headers, often via third-party databases of device capabilities, such as WURFL and DeviceAtlas. As more high-capability mobile browsers are introduced, however, accurately keeping track of device capabilities using fixed sets of user agents becomes a challenge over the longer term. (See Server-side detection of Nokia devices for information on user agents used by Nokia browsers.)

The CSS media query standard offers a simpler and more robust interface-switching mechanism that accounts for any potential new set of browsers from different vendors. Under this approach, the browser assigns the appropriate mobile interface based on its own capabilities. The server only needs to supply that interface along with simple criteria used to assign it, typically screen size and resolution as a proxy for high-capability touch-screen browsers. (See Media queries and MatchMedia API for more information.) If user agent switching is unavoidable, make sure to configure the database to include Browser 8.5's user agent along with that of iPhone Safari so that they receive the same interface and content. (See User agent for more information.)

The following shows side-by-side comparisons of popular mobile websites as they appear in iPhone Safari and Nokia Browser 8.5, demonstrating a unified user experience when such browsers receive the same set of content:

To provide the same high-level user experience for web apps on Browser 8.5 as for iPhone, follow this set of best practices:

1. Avoid or adapt user agent switching. Avoid implementing any interface that depends on receiving a fixed set of user agents. Otherwise if user agent-dependent functionality is necessary, make sure to group the Nokia Browser 8.5 user agent along with that of iPhone Safari. (See User agent.)
2. Use media queries to define device classes. Media queries allow you to customize CSS-based layouts based on a handset's inherent capabilities, independently of its user agent. The MatchMedia API allows you to target JavaScript functionality based on the same criteria. Media queries offer a more robust and dynamic way to target a class of high-capability web browsers, rather than a static set of user agents. Media queries also offer a strategy to flexibly customize alternate interfaces for tablet devices as well as familiar desktop browsers. (See Media queries for information on how to customize CSS, and MatchMedia API for information on how to customize JavaScript using the same criteria.)
3. Use object detection as a fallback. Media queries allow you to distinguish broad categories of mobile browsers. If you need to determine more specific features, such as geolocation and local storage, use JavaScript to test for the presence of objects such as navigator.geolocation and window.localStorage.
4. Use flexible, viewport-based screen layouts. Nokia Browser 8.5 uses the same 320-pixel screen width as the iPhone, but as the images above demonstrate, allows more vertical content. Wherever possible, avoid screen layouts that position elements based on fixed-pixel measurements, especially along the vertical axis. Instead, apply an overall viewport to use as a basis for relative CSS measurements such as percentages. Browser 8.5 does not support the position:fixed CSS property. (See Viewport support.)
5. Specify web app icons. As is true for iPhone, Browser 8.5 web apps can be accessed via icons on the N9's home screen. Customize 80-pixel square icons using apple-touch-icon, otherwise allow Browser 8.5 to use icons sized for iPhone as a fallback. (See Configuring web app icons.)
6. Use touch events. As on the iPhone, relying on touch events instead of mouse events leads to a more responsive interface and allows web apps to support multi-point touch input. (See Touch support.)
7. Use HTML5 video. Browser 8.5 supports the HTML5 video tag. Since video playback displays on both iPhone and the N9 within a full-screen landscaped playback interface, controls initiating playback do not need to be sized as large as the video's own dimensions. (See Multimedia.)
8. Use geolocation. Use the Geolocation API to deploy web apps with location-aware functionality. (See Geolocation.)
9. Use offline storage. Use HTML5 application cache manifests to install web apps so that they natively on the N9, check online state to respond to changes in network availability, and use web storage or WebSQL to store data. (See Offline storage for details on these features.)
10. Use CSS-based visual effects. Like the iPhone, Browser 8.5 supports Level 3 CSS features: rounded corners, shadows, gradients, and custom fonts. CSS-based animations execute more efficiently than those deployed with JavaScript. (See Level 3 CSS support.)