WoltLab Suite 6.2 Handbuch
Deutsch/PHP-Version: Die Website-Struktur, Navigation und Überschriften sind auf Deutsch vorbereitet. Code-Beispiele und technische Namen bleiben unverändert.

Browser and Screen Sizes - JavaScript API

Ui/Screen

CSS offers powerful media queries that alter the layout depending on the screen

sizes, including but not limited to changes between landscape and portrait mode

on mobile devices.

The Ui/Screen module exposes a consistent interface to execute JavaScript code

based on the same media queries that are available in the CSS code already. It

features support for unmatching and executing code when a rule matches for the

first time during the page lifecycle.

Supported Aliases

You can pass in custom media queries, but it is strongly recommended to use the

built-in media queries that match the same dimensions as your CSS.

| Alias | Media Query |

|---|---|

| screen-xs | (max-width: 544px) |

| screen-sm | (min-width: 545px) and (max-width: 768px) |

| screen-sm-down | (max-width: 768px) |

| screen-sm-up | (min-width: 545px) |

| screen-sm-md | (min-width: 545px) and (max-width: 1024px) |

| screen-md | (min-width: 769px) and (max-width: 1024px) |

| screen-md-down | (max-width: 1024px) |

| screen-md-up | (min-width: 769px) |

| screen-lg | (min-width: 1025px)

on(query: string, callbacks: Object): string

Registers a set of callback functions for the provided media query, the possible

keys are match, unmatch and setup. The method returns a randomly generated

UUIDv4 that is used to identify these callbacks and allows them to be removed

via .remove().

remove(query: string, uuid: string)

Removes all callbacks for a media query that match the UUIDv4 that was previously

obtained from the call to .on().

is(query: string): boolean

Tests if the provided media query currently matches and returns true on match.

scrollDisable()

Temporarily prevents the page from being scrolled, until .scrollEnable() is

called.

scrollEnable()

Enables page scrolling again, unless another pending action has also prevented

the page scrolling.

Environment

!!! warning "The Environment module uses a mixture of feature detection and user agent sniffing to determine the browser and platform. In general, its results have proven to be very accurate, but it should be taken with a grain of salt regardless. Especially the browser checks are designed to be your last resort, please use feature detection instead whenever it is possible!"

Sometimes it may be necessary to alter the behavior of your code depending on

the browser platform (e. g. mobile devices) or based on a specific browser in

order to work-around some quirks.

browser(): string

Attempts to detect browsers based on their technology and supported CSS vendor

prefixes, and although somewhat reliable for major browsers, it is highly

recommended to use feature detection instead.

Possible values:

platform(): string

Attempts to detect the browser platform using user agent sniffing.

Possible values: