Analysis on Breakpoints | Community
Skip to main content
U
user70977
Level 3
April 15, 2026
Question

Analysis on Breakpoints

  • April 15, 2026
  • 1 reply
  • 7 views

Hi! I’m doing analysis on breakpoints and bringing in adobe analytics ootb dimensions but saw that some are not always reliable in another community post. I want to double check what dimensions I should be using. 

 

So far, I’ve been using monitor resolution for desktop and mobile screen size for mobile. For both desktop and mobile, I’ve broken out by browser height-bucketed and browser width-bucketed. 

 

The one concern i had is that most of the mobile screen size for mobile device is unspecified. Is there any suggestions on how I should be looking at this analysis? 

 

Can I layer in monitor resolution for mobile and can I break down mobile screen size for desktop? What would be the most accurate breakdowns and what’s the difference between monitor resolution and mobile screen size?

 

    1 reply

    Jennifer_Dungan
    Community Advisor and Adobe Champion
    Jennifer_DunganCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    April 15, 2026

    I track the breakpoint, but I don’t do it based on the collected data….

     

    Since our responsive site has several key breakpoints, I use JS to check width, and assign a value based on this. Or, you could ask your developers to add the breakpoint into your Data Layer, so that IF they change something, you should be aligned with the changes.

     

    var breakpoint;
    if (window.innerWidth <= 800) {
      breakpoint = "mobile";
    }
    else if (window.innerWidth >= 1000) {
      breakpoint = "desktop";
    }
    else {
      breakpoint = "tablet";
    }
    return breakpoint;

     

    Of course, you would need to adjust the values based on your site… and you might have 4 or 5 distinct breakpoints that you need to account for…  so maybe you need something more like:

     

    var breakpoint;
    if (window.innerWidth <= 600) {
      breakpoint = "mobile-small";
    }
    else if (window.innerWidth >= 601 && window.innerWidth <= 800) {
      breakpoint = "mobile-large";
    }
    else if (window.innerWidth >= 801 && window.innerWidth <= 1000) {
      breakpoint = "tablet";
    }
    else if (window.innerWidth >= 1001 && window.innerWidth <= 1200) {
      breakpoint = "desktop-small";
    }
    else if (window.innerWidth >= 1201) {
      breakpoint = "desktop-large";
    }
    return breakpoint;

     

     

    This is code I have in a custom code Data Element.

    Terms & ConditionsAccessibility statement

    Loading footer...