Show TOC

Options for Further AdaptationLocate this document in the navigation structure

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

You can use the sap.ui.Device API to check for touch enablement, a particular screen size, orientation, browser or operating system, for example. For more information about this API, see The Device API.

Besides using this API, there are also several options available for you to use by using CSS, as outlined below.

Hiding/Displaying Controls Depending on the Device

To determine a control’s visibility in a device-dependent way, you can use the following CSS classes:

  • sapUiVisibleOnlyOnDesktop

  • sapUiHideOnDesktop

  • sapUiVisibleOnlyOnTablet

  • sapUiHideOnTablet

  • sapUiVisibleOnlyOnPhone

  • sapUiHideOnPhone

The names are actually self-explanatory; for each device, you have a corresponding class that you can use to either explicitly hide or show the particular control.
Note

The control will still be part of the app but hidden by CSS only. For managing visibility on a generic level, consider controlling the visible property with the device API instead, as this means the controls will not be added to the DOM at all but just treated as invisible by SAPUI5.

Responsive Margin and Padding Classes

In order to make it possible for app developers to adjust margins and paddings in their apps without needing to write their own CSS, SAPUI5 provides them with convenience classes. For responsiveness, the classes sapUiResponsiveMargin and sapUiResponsiveContentPadding are particularly useful.

To read more detailed documentation about margins and padding classes, see Using Predefined CSS Margin Classes and Using Container Content Padding CSS Classes respectively.

Writing Device-Dependent Custom CSS

It is easy to add your own device-dependent or screen-size-dependent custom CSS by prefixing your selectors with the classes that come from the device API (for more information about the device API, see the link below under Related Information). Whenever you need to set a particular style on, say, a small screen like a phone only, you can do so by picking the sapUiMedia-Std-Phone CSS class as part of your selector. For example, a particular style for phone only could look like this:

.sapUiMedia-Std-Phone .yourSelector{
	Style-applied-to-phone-only: someValue;
}

Additionally, the information regarding which device you are currently on is available on the html root tag as one of these three CSS classes:

  • sap-desktop

  • sap-tablet

  • sap-phone

This means you can provide style for the phone use case using CSS cascades as follows:

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

The main difference between the two options is that the first one makes assumptions based on the current range interval (so the screen size), whereas the latter is indeed set depending on which device is present.

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

For more information about writing custom CSS in general, please also read CSS Styling Issues.

Related Information