interface LayoutWatcherConfig {
    aspectRatioBreakpoints?: {
        square: number;
        tall: number;
        "very-tall": number;
        "very-wide": number;
        wide: number;
    };
    deviceBreakpoints?: {
        desktop: number;
        mobile: number;
        "mobile-wide": number;
        tablet: number;
    };
    root?: null
    | HTMLElement;
}

Properties

aspectRatioBreakpoints?: {
    square: number;
    tall: number;
    "very-tall": number;
    "very-wide": number;
    wide: number;
}

Use custom aspect ratio breakpoints. Only known aspect ratio names (AspectRatio) are supported. If any are missing from the given dictionary, the value from settings.aspectRatioBreakpoints is used.

Type declaration

  • square: number

    Anything with a wider aspect ratio than the given value is "square", up to the value of "wide".

    3 / 4
    
  • tall: number

    Anything with a wider aspect ratio than the given value is "tall", up to the value of "square".

    9 / 16
    
  • very-tall: number

    This should be left as 0 as it's the catch-all for anything with a narrower aspect ratio than "tall".

    0
    
  • very-wide: number

    Anything with a wider aspect ratio than the given value is "very-wide".

    16 / 9
    
  • wide: number

    Anything with a wider aspect ratio than the given value is "wide", up to the value of "very-wide".

    4 / 3
    
deviceBreakpoints?: {
    desktop: number;
    mobile: number;
    "mobile-wide": number;
    tablet: number;
}

Use custom device breakpoints. Only known device names (Device) are supported. If any are missing from the given dictionary, the value from settings.deviceBreakpoints is used.

Type declaration

  • desktop: number

    Anything wider than the given value is "desktop".

    992
    
  • mobile: number

    This should be left as 0 as it's the catch-all for anything narrower than "mobile-wide".

    0
    
  • mobile-wide: number

    Anything wider than the given value is "mobile-wide", up to the value of "tablet".

    576
    
  • tablet: number

    Anything wider than the given value is "tablet", up to the value of "desktop".

    768
    
root?: null | HTMLElement

The root element whose layout to watch. If not given or null, then the viewport layout is watched.

null