Use screen measurements to design for responsive breakpoints

7 min

Optimizely Web Experimentation

Optimizely Personalization

Optimizely Performance 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 OptimizelyjQuery and the $ variable in Optimizely. See also Responsive designResponsive 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:

Note

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