If you are using Optimizely Web Experimentation with a responsive site and want to deliver dramatically different experiences by screen size, you may need to use custom JavaScript audience conditions to target visitors based on screen size. This article helps you understand what each native screen measurement object in JavaScript or jQuery describes and align it to a CSS media query.
To use jQuery in Optimizely Web Experimentation, enable jQuery in project settings or include it in your code. See jQuery and the $ variable in Optimizely. See also designing variations for responsive sites in Optimizely.
Understand screen measurements
To target experiments by screen size, you need to understand what each native screen measurement object describes.
|
Object |
Code Type |
Description |
| document.body.clientHeight | JavaScript | Inner height of the HTML document body, including padding but not the horizontal scrollbar height, border, or margin. |
| $(document).height() | jQuery | Full height of the HTML page, including content you have to scroll to see. |
| screen.height | JavaScript | Device screen height (i.e. all physically visible stuff) |
| screen.availHeight | JavaScript | Device screen height minus the operating system taskbar (if present). |
| window.innerHeight | JavaScript | The current document's viewport height, minus taskbars, and so on. |
| window.outerHeight | JavaScript | Height the current window visibly takes up on screen (including taskbars, menus, and so on.) Note: When the window is maximized this will equal screen.availHeight. |
| $(window).height() | jQuery | The current document's viewport height, minus taskbars, and so on. |
| $(window).innerHeight() | jQuery | The current document's viewport height, minus taskbars, and so on. |
| $(window).outerHeight() | jQuery | The current document's viewport height, minus taskbars, and so on. |
|
Object |
Code Type |
Description |
| document.body.clientWidth | JavaScript | Full width of the HTML page as coded, minus the vertical scroll bar. |
| $(document).width() | jQuery | The browser viewport width, minus the vertical scroll bar. |
| screen.width | JavaScript | Device screen width (that is, all physically visible stuff). |
| screen.availWidth | JavaScript | Device screen width, minus the operating system taskbar (if present). |
| window.innerWidth | JavaScript | The browser viewport width (including vertical scroll bar, includes padding but not border or margin). |
| window.outerWidth | JavaScript | The outer window width (including vertical scroll bar, toolbars, etc., includes padding and border but not margin). |
| $(window).width() | jQuery | The browser viewport width (minus the vertical scroll bar). |
| $(window).innerWidth() | jQuery | The browser viewport width (minus the vertical scroll bar). |
| $(window).outerWidth() | jQuery | The browser viewport width (minus the vertical scroll bar). |
The following images visualize how each of the width and height objects is measured:
Since the jQuery methods measure the first matched element, the above image reflects where that specific element’s padding, border, and margins make a difference in the number of pixels returned. Since there is only one document or window object, many of these measurements will return the same value.
Connect measurement objects to CSS media queries
You can use the JavaScript or jQuery object measures for your site’s media queries to establish breakpoints.
|
Object |
Code Type |
Description |
| device-height | CSS | Device screen height (that is, all physically visible stuff). |
| height | CSS | The current document's viewport height, minus taskbars, and so on. |
| min-height | CSS | The minimum viewport height pixel amount at and above which the indicated styles take effect. |
| max-height | CSS | The maximum viewport height pixel amount at and above which the indicated styles take effect. |
|
Object |
Code Type |
Description |
| device-width | CSS | Device screen width (i.e. all physically visible stuff). |
| width | CSS | The browser viewport width (minus vertical scroll bar). |
| min-width | CSS | The minimum viewport width pixel amount at and above which the indicated styles take effect. |
| max-width | CSS | The maximum viewport width pixel amount at and above which the indicated styles take effect. |
<%= heading %>