Use screen measurements to design for responsive breakpoints in Optimizely Web Experimentation

  • Updated
This topic describes how to align JavaScript and jQuery screen measurements with CSS attributes and identify breakpoints for a responsive site.

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.  

Heights

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.

 

Widths

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:

website-screen-measurements.png

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.

Heights

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.

 

Widths

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.