Body element
Browser name in lowercase. Popular results:
Document
Device pixel ratio
Current viewport height
HTML element
Detects In-App Browser and returns its name, otherwise - false.
Is viewport in landscape mode
If the page is loaded
Lower device pixel ratio (1 for desktop and maximum 2 for mobile devices)
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.
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