yiibu

S60 5th Edition: The touch devices

In 2008, Nokia released their first touch device, the 5800 XpressMusic, and with it browser 7.0, the first touch enabled browser. Within two years, versions 7.1 and 7.2 had been released. These browsers were a bit different. Not only were they based on the newer WebKit 525, but they also supported non-touch manipulation. Entirely non-touch versions were also produced for S60 3rd Edition FP 2 devices, along with multi-manipulation versions for hybrid devices such as the QWERTY and touch based N97.

Practical advice

• CSS and HTML rendering are quite similar across all 7.n browsers. If something works on one device, it will likely work on all of them, with the exception of the 5800 XpressMusic which initially shipped with WebKit 413.
• These are also the first browsers to support media queries, however only color and device-width values are available.
• CSS 3 properties support is enhanced to include background-origin, background-clip, webkit-background size, webkit-box-sizing, HSL colour and multiple backgrounds. Additional CSS selectors include the element state pseudo classes and most remaining CSS 2.1 bugs have been resolved.
• See Peter Paul Koch’s Mobile Compatibility tests for additional information on events, DOM and overall browser performance.

↑ back to top

Known issues

• The touch browsers have a small default font size. An increase of 20-25% is recommended.
• These browsers have no formal touch events. Mouse events will (to a certain extent) reflect touch behaviour however there are differences in the interpretation of a mousedown, up, out and click across browsers.
• On browsers 7.0 and 7.2, a mouseover is triggered on the initial tap. A second tap triggers mousedown, mouseup and click events simultaneously, once the finger is released from the screen. Any :hover styles are also triggered at this time.
• On browser 7.1, a mouseover?? And mousedown event is triggered when a finger is pressed onscreen. No subsequent events occur on release.
• On all browsers, mouseout is triggered on subsequent tap, outside of the original tapped element. At this time, any :hover style is also disabled. Note as well that mouseover is only triggered on the initial tap. Repeated taps of the same element, with no tap outside to trigger a mouseout, will not trigger subsequent mouseovers.
• Depending on the browser implementation, the CSS hover style (:hover) may be triggered on mousedown.
• SVG-T 1.2 is supported however the practical implementation is poor. Users can download an SVG-T file and play it within a standalone player, however embedded SVG-T (i.e. using <embed>) displays in a small scrollable frame element. Displaying SVG via an <img> or <object> element is not supported. This makes SVG-T unusable from a practical point of view on web pages.

Recommended test devices

• Nokia 5800 XpressMusic: First touch device, browser 7.0 (WebKit 413)
• Nokia N97: Browser 7.1 multi-manipulation
• Nokia 6710 Navigator: Browser 7.1 non-touch
• Nokia N8: Browser 7.2 touch
• Nokia E5-00: Browser 7.2 non-touch

↑ back to top