OH4 Hide components on small screen devices

Hi All

Is there a “simple” expression that could be used to “hide” content for example on an oh-cell when the screen size is small to prevent overflows etc?

My use case would be with the following oh-cell

image

This displays perfectly on a larger screen, however on a device etc the result is less than pretty:

image

So My idea was to simply use the visible: ... expression to not display the extra information on small screens. Just don’t know what I could use in the expression or if this even at all possible.

You’re on OH4 so your widget expressions have access to the screen object:

In this case you probably just want visible to be some simple boolean involving the viewAreaWidth property.

visible: =(screen.viewAreaWidth >= 800)

If the problem really is between desktop and mobile devices, however, then the other option may just be to use the device object with has a desktop property that is true if the viewer agent is a desktop browser and false if it is a mobile browser.

visible: =device.desktop
3 Likes