Body element
Browser name in lowercase. Popular results:
Document
Device pixel ratio
Current viewport height
HTML element
Is viewport in landscape mode
LG breakpoint is active
If the page is loaded
Lower device pixel ratio (1 for desktop and maximum 2 for mobile devices)
MD breakpoint is active
Is mobile device
Add an event on page load.
Adds viewport callbacks.
Adds a callback and returns a destructor to remove it.
Event name to associate the callback with.
Function to execute on the event.
Optional callback settings (e.g., timeout, one-time).
A function to remove the callback.
vevet.onResize('width', () => console.log('when the viewport width changes (ignores height)'));
vevet.onResize('height', () => console.log('when the viewport height changes (ignores width)'));
vevet.onResize('both', () => console.log('when both width and height change'));
vevet.onResize('onlyWidth', () => console.log('only when the width changes (height remains the same)'));
vevet.onResize('onlyHeight', () => console.log('only when the height changes (width remains the same)'));
vevet.onResize('any', () => console.log('when either width or height changes'));
const destruct = vevet.onResize('trigger', () => console.log('on any resize event, including width, height, or body size changes'));
// cancel the event
destruct();
OS name in lowercase. Popular results:
Is phone device
Is viewport in portrait mode
Prefix used by Vevet for class names.
Application properties
Root font-size in pixels (1rem to pixels)
Page scrollbar width
Current viewport small height
Used to prevent layout shifts on some browsers such as In-App Safari.
SM breakpoint is active
Current viewport small height divided by 100 (svh).
Used to prevent layout shifts on some browsers such as In-App Safari.
Is tablet device
Current Vevet version
Current viewport height divided by 100
List of viewport callbacks
Current viewport width divided by 100
Current viewport width
Vevet Core