Bootstrap breakpoint viewport sizes

Question

I'm building a multi-device cropping tool using cropperjs. At the moment I'm guessing viewport sizes at each bootstrap breakpoint, but I'm not sure what the real height is (so I can create a ratio). You can find the grid width breakpoints here: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss (lines 168-174)

To summarise, I'm looking for the viewport sizes at each breakpoint: sm, md, lg, xl. I could research the most common device size (I may still do this), but I'd prefer something that relates to bootstrap's sizing. Thank-you.

sm: {
    width: 576px,
    height: ...
}
md: {
    width: 768px,
    height: ...
}
lg: {
    width: 992px,
    height: ...
}
xl: {
    width: 1200px
    height: ...
}

Answer 1

It seems the best option for this question is to use common ratios and calculate the viewport heights. Includes assumtions of the user's device.

i.e.

{
    xl: {
        width: 1200,
        height: 1200 * (9/16) // Landscape
    },
    lg: {
        width: 992,
        height: 992 * (9/16) // Landscape
    },
    md: {
        width: 768,
        height: 768 * (3/4) // Landscape
    },
    sm: {
        width: 576,
        height: 576 * (4/3) // Portrait
    }
}