Show TOC

Options for Further AdaptationLocate this document in the navigation structure

In addition to the adaptations done automatically by SAPUI5, the application can apply further platform adaptations.

To facilitate these adaptations, SAPUI5 provides a variety of detection mechanisms.

Mobile versus Desktop and Phone versus Tablet

How can an application detect whether it is on a Mobile device? This is not easy to answer: There are now desktop computers supporting touch operation, tablets where keyboards can be attached and even laptops where you can detach the screen which gives you a tablet. So where is the border? There is no clear separation. But depending on your own definition of the border you can detect for example touch capabilities by checking

var isTouchDevice = jQuery.support.touch;

Based on this check, SAPUI5 provides also the following flag:

var runningOnDesktop = sap.ui.Device.system.desktop;

Similarly, when not running on desktop browsers, one of the following is true:

var runningOnTablet = sap.ui.Device.system.tablet;
var runningOnPhone = sap.ui.Device.system.phone;

On iOS the separation is clear, on Android the border between these classes is assumed to be at 600 pixels virtual screen width.

For your CSS, the same information is available on the html root tag as one of these three CSS classes:

  • sap-desktop

  • sap-tablet

  • sap-phone

So you can provide style for the phone case using CSS cascades as follows:

.sap-phone .myControl {
      font-size: small;
}

You might also consider checking the screen size using media queries in CSS or the browser/jQuery APIS in JavaScript.

iOS vs Android and Version Information (as JavaScript API)

The sap.ui.Device.os object contains information about the operating system:

  • name: Operating system as string (ios, android, winphone, or bb)
  • ios, android, windows_phone, blackberry: Boolean flags for the respective platform
  • version: the operating system version as float number
  • versionStr: the full operating system version as string
iOS vs Android vs Windows Phone vs BlackBerry - and Version Information (for CSS styling)

SAPUI5 also adds platform and browser version information to the root element (the <html> element of the page). There are different three information packages:

  • The CSS class sap-ios, sap-android, sap-winphone, or sap-bb (for BlackBerry) is added for easy platform-dependent styling.
  • The attribute data-sap-ui-browser is added, providing more information about browser and version.
  • The attribute data-sap-ui-os is added, providing more information about operating system and version.

You can use the CSS class directly in cascades, the other two need attribute selectors which can also be used to match substrings:

/* make my control red on Apple devices only */
.sap-ios .myControl {
   color: red;  
}
/* Control should have a blue background whenever Mobile Safari is running... */
html[data-sap-ui-browser*=msf] .myControl {
   background-color: blue;  
}

/* ...but when running on an Apple device with version 5.0 of the operating system, it should rather be green */
html[data-sap-ui-os="iOS5.0"] .myControl {
   background-color: green;  
}

For more information, see Platform Attribute for Mobile.

Orientation and Change of Orientation

The sap.ui.Device.orientation object holds orientation information:

  • landscape: Flag indicating whether the current orientation is landscape
  • portrait: Flag indicating whether the current orientation is portrait

When the orientation is changed because the user rotates the device, the orientationchange event is fired by the browser, so you can handle this case as well. This event seems to be delayed in some cases, so the Device API also fires its own orientationChange event based on the browser's window resize event (which on mobile devices happens when the orientation is changed):

sap.ui.Device.orientation.attachHandler(function(evt) {
   if (evt.getParameters().landscape) {
      // do something...
   }
});

In CSS, you can use CSS media queries to check this.