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 Service – Example
With and Without Viewport:
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:
- https://www.w3schools.com/css/css_rwd_viewport.asp
- https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
