Javascript Device Checker

Add the Variables

This is a javascript function and it updates two variables in your Opus publication to provide information to your publication:

• ScreenWidth - the actual width of the current browser window
• userDevice - one of three preset values to indicate mobile, tablet or desktop

To use this script within a publication you need to add these two text variables to your Publication variables by clicking the Add button on the Variables tab in Publication Properties: The type of device being used is set by a series of breakpoints representing desktop, tablet and mobile in the main DW_getDevice script.

Using the Script

The first part of the script is the DW_getDevice function which gets the inner width of the browser window and puts it in a variable (winWidth). This value is then provided to the Opus publication variable ScreenWidth.

The next lines of the function check the screen width to see what type of device the screen might belong to based on the width. The default breakpoints are less than 480 pixels means it is a mobile, between 480 and 750 we assume it is a tablet and over 750 is a desktop. However, you can edit these breakpoints to suit your own preferences as well as changing the text each reports back to your publication(see below).

The second part of the main script tells the browser to "listen" for the window to be resized and run the DW_getDevice function whenever it does.

This main script needs to be placed in the HEAD section of the HTML page in which the content is being used. Open the HTML page in a text editor (see Additional Tools and type or paste the main function of the script (as illustrated above and including the <script> and </script> tags) into your HTML before the </HEAD> tag.

If you are publishing your Opus content as a Single HTML page (not a Single DIV) then you can put this script into the Head Additions section of the Publish Settings for your publication.

Initial Values

To ensure the variables are given initial values without the browser window being resized, the function must be run once when the page is loaded. The code to do this is

The problem with this is that the function updates the content of _DWPub and if this content has not loaded at the time you call the function then the variables will not be updated. Therefore you need to place this script after everything else - just before the </BODY> tag. Alternatively you can use a bit more complicated script which "listens" for the whole document to be loaded and then runs the script as illustrated here:

Changing the Breakpoints

Open the DW_getDevice.js script in a text editor such as Notepad++ (see Additional Tools) and change the values shown in red to match your requirements.

If required you can also change the text provided to Opus by editing the text between the quote marks.