Need help - device detector

[MaxZ]

Hi there

I was wondering why my device detector is not working even though I linked each according to classifying both mobile and login screens, is there any way to fix this? Also, it seems like once I linked every page with the device detector all my current data is gone.

Any solution for this? Thanks

[Victor]

Hi @MaxZ,

Just in case - this is a NoCodeMonkey component, here is the link for the demo Demo - Device Detector - WEB, and this is the video: Demo Device Detector - YouTube.

Also, I don’t think that linking this component to all screens is a good idea

Maybe @Michael can advise more about the functionality.

Best,
Victor.

[MaxZ]

Hi yes i checked the video but still couldn’t fix the function

[Flawless]

I’ve seen this before. It’s because your browser window size is large and it’s detecting the actual browser window size, not the viewport. Shrink your actual browser window and hit refresh.

The device detector works “on load” and does not make the layout “responsive”.

This means that if you load the screen with the desktop size and then resize the window, it will NOT adjust. It will only go to the mobile version if the window size is below the mobile dimensions when the screen is first loaded.

Also, I have to agree with @Victor here where he says linking to all screens is not a good idea. This WILL make these actions really slow and sometimes they may not work. The last time I had a ton of actions like this, I had to scrap the entire idea and start from scratch.

[MaxZ]

Thanks for this

But seems like it is still not working when I try it on the phone screen, as after login still loads the page for desktop rather than phone version, is there any solution around this?

[Flawless]

I would imagine that it’s because you have way too many actions and the component is getting confused.

What you SHOULD do is put the device detector on each screen individually and then link to the desktop/mobile versions of THAT specific screen so that you don’t have so many actions on 1 component.

[MaxZ]

Hi it seems like still not working out, check this out

[Flawless]

Hang on, let’s take this a step at a time.

First, why do you have 3 actions here with no “conditions”?

This will force all users to go to “Translating 2” if viewport is <=480px.
And just to make sure that I’m understanding correctly based on what you’ve got here,
Donation = desktop
Donate List Mobile = tablets/landscape phones
Donate List Mobile 2 = phone

Is this correct?

[Michael]

So one of the easiest ways to use the Device Detector is to just have it update the users database.

You can have a user property called “Device”.

Then have the device detector save the text “mobile”, “tablet”, or “desktop” to the user’s “Device” property.

Then you can filter all your future actions by what is in the “Device” property.

For instance, when the user logs into their app you can have the device detector check what device it is. Then you don’t even need to use the device detector again (unless you want to update the field).
Instead you can use the “Sometimes” field in the action. For example…Link to screen “Home(Desktop)” if “Device” property is equal to “desktop”

Let me know if that is confusing.

[Flawless]

The primary reason I do it this way is to get the closest to responsive that I can. So if a user navigates to a new screen and the browser has been resized, it’d just shift them to the right mobile screen.

[MaxZ]

Hi I think it is fixed now i just put another device detector on another page and ends up all working, however one more thing I was wondering about is due to the button, how can I make the user auto-login to the right size so they don’t have to click on the button to activate device detector and go through the whole process again?

[Flawless]

Take a look here. Login > directs to splash screen > directs to the proper home screen based on device size. Super simple.

I like to think about it like this… try to dumb it down. Any time I run into situations where I’m not sure if I’m doing things the right way or when I realize that there are too many actions or things going on, try to think about the logic of what you need your app to do and come up with the absolute easiest way to accomplish it. I’ve had to rebuild things a dozen times after learning new tricks.

[MaxZ]

Hi, thanks I will give it a try, I think the device sector is working fine now but just the fact need to figure out the way to have auto login for users so they don’t have to see the splash screen and log in again.