Does anyone have a solution to check what platform the client is being displayed on?
Knowing this would give me the opportunity to change the form design of a few forms to improve the user’s experience on mobile devices.
Thanks in advance.
2 Likes
Something like this?
https://learn.jquery.com/code-organization/feature-browser-detection/
You could create a JS function in Native Libraries and call it from python -
https://anvil.works/docs/client/javascript
JQuery is loaded by Anvil so is already available for you to use.
3 Likes
@stein - here’s one way you might go about it:
take a look at stackoverflow for the question in javascript:
and then adapt a solution using anvil.js.window
the most popular answer in stackoverflow can be adapted as follows:
from anvil.js.window import navigator
import re
mobile_devices = "Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini"
is_mobile = re.search(mobile_devices, navigator.userAgent) is not None
9 Likes
The true way to do it is to check check CSS hover is possible, mobile devices cannot do that.
Just some further information for anyone reading this down the track. It looks as there is a new way of detecting a mobile device that is being phased in to replace the unwieldy use of the userAgent string. As per this documentation there is now a boolean attribute of userAgentData which detects whether the device is mobile.
From the Docs (referencing Java Script):
# If you are checking for mobile or desktop, use the boolean mobile value:
const isMobile = navigator.userAgentData.mobile;
If I am not mistaken, this would be the Anvil way to approach this
from anvil.js.window import navigator
is_mobile = navigator.userAgentData.mobile
3 Likes
This is very cool - good find!
It looks like this is mostly but not entirely supported. See here:
Specifically it looks like Firefox, Internet Explorer, and Safari do not implement this attribute, so I’d suggest a try-except just in case. I usually use window.innerWidth <= 640 as a check.
2 Likes
hm, sorry @stucork , i cant get it to work, i get following error trying to import it:
from anvil.js.window import navigator
ModuleNotFoundError: No module named 'anvil.js.window'; 'anvil.js' is not a package
are there any prerequisites? i tried changing my python env but that didn’t do the trick… 
@jo.ra just checking the obvious, but you’re running that import in the client, right? That’s the only place the Javascript module is available.
2 Likes
@jshaffstall aahhh. my bad! i expected that somehow also to be available in the server env, similar to
anvil.server.context.client
but yeah, my shortcoming of not knowing JS in websites that well yet.
How about detecting the exact type of mobile device? What is the best way of saying
if device == 'iPhone' or 'iOS'
pass
else
pass
?
Given Python’s expression-evaluation rules, you probably mean
if device in {'iPhone', 'iOS'}
from anvil.js.window import navigator
print(navigator.userAgentData.platform)
For me this prints “Windows” which is correct.
According to that MDN / WebAPI link above, the available values for platform are:
One of the following strings: "Android" , "Chrome OS" , "Chromium OS" , "iOS" , "Linux" , "macOS" , "Windows" , or "Unknown" .
Running this code on my iMac + Chrome gives the output “macOS”
When running it on my Android + Chrome, or iPhone + Safari, I get the error
"AttributeError: 'Navigator' object has no attribute 'userAgentData'
Chrome Android should be supported and yet I got the same error… Well, technically Chromium, but I think that should be the same thing.
Yeah what I meant by “not very useful”, “Chrome” / “Firefox” / etc on iOS are just basically skins on top of Webkit, which is Safari.
This means you will (currently) never see ‘iOS’ as the result of platform because there are no browsers on the platform ‘iOS’ that support platform. 