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

  • Updated
  • Optimizely Web Experimentation
  • Optimizely Personalization
  • Optimizely Performance Edge Available for Edge

If you use Optimizely Web Experimentation with a responsive site and want to deliver different experiences by screen size, you may need to use custom JavaScript audience conditions to target these visitors. 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 Responsive design.

Understand screen measurements

To target by screen size, 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
screen.availHeight JavaScript Device screen height minus the operating system taskbar (if present)
window.innerHeight JavaScript The current document's viewport height, minus taskbars
window.outerHeight JavaScript Height the current window visibly takes up on screen (including taskbars and menus). When the window is maximized, this equals screen.availHeight.
$(window).height() jQuery The current document's viewport height, minus taskbars
$(window).innerHeight() jQuery The current document's viewport height, minus taskbars
$(window).outerHeight() jQuery The current document's viewport height, minus taskbars

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
screen.availWidth JavaScript Device screen width, minus the operating system taskbar (if present)
window.innerWidth JavaScript The browser viewport width (including vertical scroll bar and padding but not border or margin)
window.outerWidth JavaScript The outer window width (including vertical scroll bar, toolbars, 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 image shows how each width and height object is measured:

Since the jQuery methods measure the first matched element, the above image reflects where that specific element’s padding, border, and margins affect the number of pixels returned. Because there is only one document or window object, many measurements return the same value.

Connect measurement objects to CSS media queries

You can use JavaScript or jQuery object measures to establish breakpoints for your site’s media queries.

Heights

Object

Code Type

Description
device-height CSS Device screen height
height CSS The current document's viewport height, minus taskbars
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
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