Skip to Content
Technical Articles
Author's profile photo Abhijeet Tikar
Abhijeet Tikar
July 5, 2022 1 minute read

Super Dynamic Scaling of SAP ITS Mobile Application Screens using HTML Viewport Meta Tag

The ITS mobile application is a vital part of SAP when it comes to accessing SAP from remote locations, especially for scanning data from different types of handheld devices (HHD) using one application. Major challenges in developing ITS applications are related to the shape and size of application screens when we execute them from different resolution devices. To overcome this issue, I have proposed a solution that uses an HTML viewport meta-tag to dynamically scale the shape and size of the application screen. This blog explains how to use the Viewport tag to set ITS mobile application screens’ shape and size dynamically based on device resolution.

Traditional Approach:

`<head><style>.MobileRow {zoom:200%}</style>`

In this approach, we can set the zoom percentage using the above syntax. But the screen will not be scaled automatically based on device resolution.

Source: https://blogs.sap.com/2019/04/25/super-easy-zooming-of-its-mobile-screens/

 

New Approach:

Syntax:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Width: Width can be set between 1 and 10,000. For dynamic scaling, it should be set to content=”width=device-width.

Initial scale: This will set the initial zoom of the page. It should be set between 0.1 and 10.

Example:

`<head><meta charset="utf-8" name="viewport" content= "width=device-width, initial-scale=1.0">`

HTML%20Service%20-%20Example

HTML Service – Example

With and Without Viewport:

With%20and%20Without%20Viewport

With and Without Viewport

With this proposed approach, ABAP developers do not need to worry about the resolution of ITS application screens. Hence, the approach will reduce development time by automatically setting the application screen shape and size.

Finally, from an end-user point of view, screens will be more user-friendly.

I’m looking forward to hearing more about ITS resolutions. Feel free to comment and discuss.

Best regards, thanks for reading, stay healthy.

Abhijeet Tikar

Refer Below Links for HTML Viewport Meta Tag:

  1. https://www.w3schools.com/css/css_rwd_viewport.asp
  2. https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

 

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Dominik Tylczynski
      Dominik Tylczynski

      That's a nice alternative especially if devices with various resolutions are used in the warehouse.

      Also I'm super happy that my blog is being read and inspires people.