Skip to main content
menu_icon.png

Everything you need to learn Optimizely X in one place: See our resource pages for Web Experimentation and Personalization.

x
Optimizely Knowledge Base

Use screen measurements to design for responsive breakpoints

THIS ARTICLE WILL HELP YOU:
  • Align JavaScript and jQuery screen measurements with CSS attributes
  • Identify breakpoints for a responsive site

If you're using Optimizely 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 X, you'll need to enable jQuery in project settings or include it in your code. Check out this article to learn more about jQuery and the $ variable in Optimizely X.

Learn more about designing variations for responsive sites in Optimizely X or Optimizely Classic.

Understand screen measurements

In order to target experiments by screen size, you need to understand what each native screen measurement object describes. You may notice that many of these measurements end up being the same value. 

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, etc.
window.outerHeight JavaScript Height the current window visibly takes up on screen (including taskbars, menus, etc.)
Note: When the window is maximized this will equal screen.availHeight
$(window).height() jQuery The current document's viewport height, minus taskbars, etc.
$(window).innerHeight() jQuery The current document's viewport height, minus taskbars, etc.
$(window).outerHeight() jQuery The current document's viewport height, minus taskbars, etc.

 

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 (i.e. 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 two images visualize how each of the nine width and height objects described above is measured (the second image is courtesy Imgur):

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

Now that you understand what each JavaScript or jQuery object measures, you can use the same measurement(s) that your site’s media queries use to establish breakpoints. Here are the most commonly used CSS attributes: 

Heights

Object

Code Type

Description

device-height CSS Device screen height (i.e. all physically visible stuff)
height CSS The current document's viewport height, minus taskbars, etc.
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