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.
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.
<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.
`<head><meta charset="utf-8" name="viewport" content= "width=device-width, initial-scale=1.0">`
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.
Refer Below Links for HTML Viewport Meta Tag: