ADAPT THE SCREEN RESOLUTION TO DIFFERENT DEVICES

[AGME]

Hello,

I have developed my HMI project for extra-wide resolution as this is the resolution of my laptop.

But now I would like to be able to display the developed HMI on other devices.

How can I adapt the resolution of all the widgets that I have used?

Regards.

[webiq-sk]

If you have created your HMI using the responsive design styling recommended by Smart-HMI depending on your layout there's probably not so much to do. Our Responsive Design Demo illustrates this: https://demo.smart-hmi.com/demo-responsive/ 

In modern web design you usually use a mobile-first approach, i.e. start with the lowest resolution first and then extend into larger resolutions.

If you used only absolute positioning which we do not recommend then you should change it to responsive layout.

Widgets do not have a resolution per se, they automatically adapt to the available space - unless you have restricted this and not used flex layout but set the dimensions to fixed resolutions in the style tab - then the browser adheres to your settings.

Device-specific styling might also be an option: https://www.smart-hmi.com/user/download/deliver/docs/documentation-manual-webiq-designer-2.14-3d30/i...

Maybe if you elaborate on the topic and provide more details I would be able to help you more, but specific issues cannot be answered if only general information is provided, unfortunately.

[AGME]

I have used most widgets and containers in absolute position.
Now, in order for it to automatically adapt to different resolutions, should I use static positioning on all widgets and containers?

Regards

[webiq-sk]

I think I already answered that question above:

1. "you should change it to responsive layout"
2. "Device-specific styling might also be an option"

Static positioning will not help: https://www.w3schools.com/css/css_positioning.asp

[HmiGuide · Accepted solution]

The advice "you should change it to responsive layout" sounds quite easy.

From my own experience, I can say that you need some time to get familiar with the mindset of responsive design. This is true regardless of the tool you use.

My recommendation:
- Read information about responsive layout in the WebIQ manual.
- Gain experience by following examples
- Analyze an existing project to find out align/wrap/hide your widgets for different resolutions
- Convert existing project

[webiq-sk · Accepted solution]

@HmiGuide That's why we always recommend to use responsive layouts in the first place - changing it later often means starting from scratch - especially when everything has been positioned absolutely.