B4J Question [ABMaterial] Determine Screen / Device Size Issue

[Harris]

Using various ABM methods, I am getting some curious results with some - affecting my code to handle different device layouts.

The following examples shows results from phone, tablet and desktop:

Here is the phone log results. Everything looks fine with this...

ABM.GetBrowserWidthHeight(page) - Actual Screen Width: 360 and Height: 518
---
 page.GetCurrentPageSize result: phone
 page.Isphone result: true
 page.IsTablet result: false
 page.IsDesktop result: false
 ---

Here is the tablet results:
Page.GetCurrentPageSize states the screen / device is "initial" (and not Tablet). What the heck is an "initial"
Trying to use this method - on a tablet will not provide the proper layout for the login form (which is altered based on device detected).

 ABM.GetBrowserWidthHeight(page) - Actual Screen Width: 962 and Height: 482
 ---
 page.GetCurrentPageSize result: initial
 page.Isphone result: false
 page.IsTablet result: true
 page.IsDesktop result: false
---

Here are results from desktop where the browser is resized to simulate different devices:

Browser window shrunk to simulate phone.
The page.GetCurrentPageSize result - states "phone", but the page.IsDesktop result states "true"

 ABM.GetBrowserWidthHeight(page) - Actual Screen Width: 483 and Height: 533
 ---
 page.GetCurrentPageSize result: phone
 page.Isphone result: false
 page.IsTablet result: false
 page.IsDesktop result: true
 ---

Browser window shrunk to simulate tablet:
Same issue - correct currentpagesize, but still states - isDesktop = True...

 ABM.GetBrowserWidthHeight(page) - Actual Screen Width: 921 and Height: 716
 ---
 page.GetCurrentPageSize result: tablet
 page.Isphone result: false
 page.IsTablet result: false
 page.IsDesktop result: true
 ---

Browser window expanded to simulate desktop:
This is all fine...

 ABM.GetBrowserWidthHeight(page) - Actual Screen Width: 1678 and Height: 960
 ---
 page.GetCurrentPageSize result: desktop
 page.Isphone result: false
 page.IsTablet result: false
 page.IsDesktop result: true
 ---

Thanks for input...

 

[alwaysbusy]

The IsPhone/IsTablet/IsDesktop returns the device type. No matter what the screen size is, this will stay the same as the device doesn't change. This is for example useful to show tool-tips only on desktops (toolips do not work on phones on tablets as they don't have a hover event)

As for GetCurrentPageSize, it tries to find a type according to css @media queries (so relying only on width of the page and the settings of the ABMaterial.ThresholdPxConsiderd... settings). Initial means that is hasn't been determined yet (the @media query has not run yet, e.g. the page is still loading).

So except for the one 'initial', all look correct to me. If you want to fine-tune this mechanism, you can indeed use the ABM.GetBrowserWidthHeight(page) method and make the decision yourself how to present something. I use this often in my code.

 

[Harris]

you can indeed use the ABM.GetBrowserWidthHeight(page)

On tablet, the width (in portrait) is different from height (in landscape). So this sometimes screws one up.

Initial means that is hasn't been determined yet (the @media query has not run yet, e.g. the page is still loading)

The page was loaded, as I ran this call well after... Thats what surprised me.

I shall figure it out from here... Thanks for the definition...

 

[Harris]

On another note, I curse those dang phones (when creating web apps).
Yet, 99.5 percent of users live on them...

It is difficult to format everything for them, cause your web app can't (effectively) display the (complicated) content such as one can on a tablet (mini desktop) or a desktop.

I am resorting to using ABMCards (for phones) rather than ABMTables because they just dont work on small devices (especially when icon buttons are involved)...

Such is life - suck it up moi code developers...!!!

Thanks

 

[alwaysbusy]

I am resorting to using ABMCards (for phones) rather than ABMTables

Same here. Tables are indeed not very useful on phones. If the table has max 3 columns I may use it, but else ABMCards it is.