Get device/OS information

Ask us anything
1

Hi there,

Is it possible to put conditional content on a page when someone is using for example and Android or iOS device.

I am exploring the possibilities to build a PWA with WeWeb, and I want to inform the user with installation instructions of the PWA. The instructions differ a bit between Android and iOs. I want to show the user the correct information.

3

Mmmm I’m not sure. Let me check with the tech team and get back to you on that one @FJP84

4

Thanks looking forward to their answer.

5

With JavaScript, you should be able to gather quite a bit of details about the device, its operating system, and other general configurations using various APIs and properties:

  1. User Agent: You can use the navigator.userAgent property to get information about the user agent string, which provides details about the browser, device, and operating system being used.
  2. Screen resolution: You can use the screen.width and screen.height properties to get the width and height of the screen in pixels.
  3. Device orientation: You can use the window.orientation property to get the orientation of the device, either in portrait or landscape mode.
  4. Operating system: You can use the navigator.platform property to get the name of the operating system being used, such as “Windows”, “MacOS”, or “Linux”.
  5. Browser details: You can use the navigator.appName, navigator.appVersion, and navigator.vendor properties to get details about the browser being used, such as its name, version, and vendor.
  6. Language preferences: You can use the navigator.language property to get the user’s preferred language for displaying content.

It’s important to note however that some of this information may not be available or may be restricted based on the user’s browser and device settings.

Code snippet example:

 * Determine the mobile operating system.
 * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
 *
 * @returns {String}
 */
function getMobileOperatingSystem() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;

    // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
        return "Windows Phone";
    }

    if (/android/i.test(userAgent)) {
        return "Android";
    }

    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "iOS";
    }

    return "unknown";
}

Sources:

6

Thanks, no I need to look how to use this on the canvas to conditionaly show the correct information.

7

On a side note, the user knows exactly what platform is using.
You can display two buttons and show the corresponding information when the button is pressed so that the user is one click away from the correct information.

2 Likes
8

Not sure if I misunderstood your situation, but as far as I know you can hide any component based on the return value of javascript code

image
image1554Ă—1188 109 KB

1 Like