browser namespace

This page documents the uil.browser namespace/module. This namespace contains many functions to explore the browser and hence device of the client.

getBrowserInfo()

Returns an object with some preformatted device information: Browser: name and version Device: device name (not always retrievable) OS: The name of the OS, and it’s version if known isMobile: true if the device is a phone isTablet: true if the device is a tablet isTouchCapable: true if the browser has touch controls enabled.

If this function is called before all scripts are loaded, this function will return undefined. (You should always wrap your experiment in an onload function anyway).

getResolutionInfo()

Returns information about the resolution of the monitor the browser window currently inhabits. Please note that these values aren’t constant, as participants can resize or move the browser window at will. It’s advised to retrieve this data repeatedly in every trial where resolution can be a relevant factor.

Returns:

actualWidth/actualHeight: The actual resolution of the monitor. This will always be the entire resolution.

usableWidth/usableHeight: The amount of space available to the browser. Most of the time, this will correspond to the actualX. In some cases however, this will be slightly lower as the OS won’t make the entire screen available to the browser

usedWidth/usedHeight: The size of the page itself. This does not include the user interface of the browser itself (the tab/navigation bar etc), so will only correspond to usableX if the browser is set to fullscreen mode. Note: some browsers don’t include the scrollbar in this value, some do.

pixelRatio: Websites don’t use actual pixels anymore when rendering, but a ‘scaled’ pixel. Usually, the ratio is set to 1. (Meaning 1 scaled pixel equals 1 actual pixel). However, when using a HDPI screen (such as a Retina screen, or most mobile phones), this will be a lot higher. For example, MacBook screens use a pixelRatio of 2 (meaning 1 scaled pixel equals 2 actual pixels). In addition, the zoom feature of a browser is often implemented by increasing this ratio. Thus,this variable can tell you if a user is using HDPI and/or is zoomed in.

getBrowser()

Returns the name of the browser and it’s version.

If this function is called before all scripts are loaded, this function will return undefined. (You should always wrap your experiment in an onload function anyway).

Returns:: string|undefined –

getDevice()

Returns the name of the device. Only a very small information of d devices will actually identify itself, mostly on mobile.

If this function is called before all scripts are loaded, this function will return undefined. (You should always wrap your experiment in an onload function anyway).

Returns:: string|undefined –

getOS()

Returns the OS this browser is running on. And if known, it’s version.

Not all browsers are as descriptive. For example, Chrome on Ubuntu will return ‘Linux’. Firefox however, will return ‘Ubuntu’.

If this function is called before all scripts are loaded, this function will return undefined. (You should always wrap your experiment in an onload function anyway).

Returns:: string|undefined –

isMobile()

Returns true if this device is a smartphone

If this function is called before all scripts are loaded, this function might be inaccurate.

NOTE: Some android tablets will also be seen as a smartphone!

Returns:: boolean –

isTablet()

Returns true if this device is a tablet

If this function is called before all scripts are loaded, this function might be inaccurate.

Returns:: boolean –

isTouchCapable()

Tries to find out if this device has touch support.

Note: this isn’t a check if the device is mobile. Some laptops are touch capable too!

Original source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent

Modified to only check for touch support

Returns:: boolean – True if the browser has a touch screen

redirect(new_url, qs_params=null)

Redirects participant to a new url.

Arguments:

new_url (string) – The url where you would like to upload the participant to
qs_params (object) – An object containing query string parameters This function is designed to redirect a participant to a new url and forward the query string parameters. This function is added because, sometimes it is nice to split an experiment into parts. E.g when sub parts of the experiments require versions of e.g. jsPsych. Additionally, online platforms such as Prolific might require a participant to be send back to a specific link. let params = { a: “a”, b: 1}; redirect(”http://www.some-surfer.some.domain”, params) would redirect to: http://www.some-surfer.some.domain?a=a&b=1

rejectMobile(): Rejects mobile devices, the participant is redirected to an error html page that will tell them not to run the experiment on a Mobile device.

rejectMobileOrTablet(): Rejects mobile and tablet devices, the participant is redirected to an error html page that will tell them not to run the experiment on a Mobile or Tablet device.