[GitHub/WoltLab/woltlab.github.io.git] / latest / javascript / new-api_browser / index.html


<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
      
      <link rel="shortcut icon" href="../../assets/default.favicon.ico">
      <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.0.5">
    
    
        <title>Browser and Screen Sizes - WoltLab Suite Documentation</title>
      
    
      <link rel="stylesheet" href="../../assets/stylesheets/main.77f3fd56.min.css">
      
        
        <link rel="stylesheet" href="../../assets/stylesheets/palette.7fa14f5b.min.css">
        
          
          <meta name="theme-color" content="#009485">
        
      
      <link rel="stylesheet" href="../../stylesheets/extra.css">
    
    
  </head>
  
  
    <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
      
  
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#browser-and-screen-sizes-javascript-api" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
        <aside class="md-announce">
          <div class="md-announce__inner md-grid md-typeset">
            
    <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>

          </div>
        </aside>
      
    </div>
    
      
<header class="md-header" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href="../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation">
      
  <img src="../../assets/logo.png" alt="logo">

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            WoltLab Suite Documentation
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              Browser and Screen Sizes
            
          </span>
        </div>
      </div>
    </div>
    <div class="md-header__options">
      
    </div>
    
      <label class="md-header__button md-icon" for="__search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
      </label>
      
<div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
      <label class="md-search__icon md-icon" for="__search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
      </label>
      <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
      </button>
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            Initializing search
          </div>
          <ol class="md-search-result__list"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
    
    
  </nav>
</header>
    
    <div class="md-container" data-md-component="container">
      
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation">
      
  <img src="../../assets/logo.png" alt="logo">

    </a>
    WoltLab Suite Documentation
  </label>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
    <li class="md-nav__item">
      <a href="../../getting-started/" class="md-nav__link">
        Getting Started
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
      
      <label class="md-nav__link" for="__nav_2">
        PHP API
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="PHP API" data-md-level="1">
        <label class="md-nav__title" for="__nav_2">
          <span class="md-nav__icon md-icon"></span>
          PHP API
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../php/pages/" class="md-nav__link">
        Pages
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/database-objects/" class="md-nav__link">
        Database Objects
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/database-access/" class="md-nav__link">
        Database Access
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/exceptions/" class="md-nav__link">
        Exceptions
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
      
      <label class="md-nav__link" for="__nav_2_5">
        API
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="API" data-md-level="2">
        <label class="md-nav__title" for="__nav_2_5">
          <span class="md-nav__icon md-icon"></span>
          API
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../php/api/caches/" class="md-nav__link">
        Caches
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/comments/" class="md-nav__link">
        Comments
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/cronjobs/" class="md-nav__link">
        Cronjobs
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/events/" class="md-nav__link">
        Events
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
      
      <label class="md-nav__link" for="__nav_2_5_5">
        Form Builder
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
        <label class="md-nav__title" for="__nav_2_5_5">
          <span class="md-nav__icon md-icon"></span>
          Form Builder
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../php/api/form_builder/overview/" class="md-nav__link">
        Overview
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/form_builder/structure/" class="md-nav__link">
        Structure
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
        Fields
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
        Validation and Data
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
        Dependencies
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
        Package Installation Plugins
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/user_activity_points/" class="md-nav__link">
        User Activity Points
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/user_notifications/" class="md-nav__link">
        User Notifications
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/api/sitemaps/" class="md-nav__link">
        Sitemaps
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/code-style/" class="md-nav__link">
        Code Style
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/apps/" class="md-nav__link">
        Apps
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../php/gdpr/" class="md-nav__link">
        GDPR
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
      
      <label class="md-nav__link" for="__nav_3">
        Languages, Templates & CSS
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
        <label class="md-nav__title" for="__nav_3">
          <span class="md-nav__icon md-icon"></span>
          Languages, Templates & CSS
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../view/languages/" class="md-nav__link">
        Languages
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../view/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../view/css/" class="md-nav__link">
        CSS
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--active md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" checked>
      
      <label class="md-nav__link" for="__nav_4">
        JavaScript API
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="JavaScript API" data-md-level="1">
        <label class="md-nav__title" for="__nav_4">
          <span class="md-nav__icon md-icon"></span>
          JavaScript API
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../general-usage/" class="md-nav__link">
        General Usage
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--active md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_2" type="checkbox" id="__nav_4_2" checked>
      
      <label class="md-nav__link" for="__nav_4_2">
        New API
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="New API" data-md-level="2">
        <label class="md-nav__title" for="__nav_4_2">
          <span class="md-nav__icon md-icon"></span>
          New API
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../new-api_writing-a-module/" class="md-nav__link">
        Writing a module
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../new-api_data-structures/" class="md-nav__link">
        Data Structures
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../new-api_core/" class="md-nav__link">
        Core Functions
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../new-api_dom/" class="md-nav__link">
        DOM
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../new-api_events/" class="md-nav__link">
        Event Handling
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../new-api_ajax/" class="md-nav__link">
        Ajax
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../new-api_dialogs/" class="md-nav__link">
        Dialogs
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
      
        
        <label class="md-nav__link md-nav__link--active" for="__toc">
          Browser and Screen Sizes
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="./" class="md-nav__link md-nav__link--active">
        Browser and Screen Sizes
      </a>
      
        
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#uiscreen" class="md-nav__link">
    Ui/Screen
  </a>
  
    <nav class="md-nav" aria-label="Ui/Screen">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#supported-aliases" class="md-nav__link">
    Supported Aliases
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#onquery-string-callbacks-object-string" class="md-nav__link">
    on(query: string, callbacks: Object): string
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#removequery-string-uuid-string" class="md-nav__link">
    remove(query: string, uuid: string)
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#isquery-string-boolean" class="md-nav__link">
    is(query: string): boolean
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#scrolldisable" class="md-nav__link">
    scrollDisable()
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#scrollenable" class="md-nav__link">
    scrollEnable()
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#environment" class="md-nav__link">
    Environment
  </a>
  
    <nav class="md-nav" aria-label="Environment">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#browser-string" class="md-nav__link">
    browser(): string
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#platform-string" class="md-nav__link">
    platform(): string
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

    <li class="md-nav__item">
      <a href="../new-api_ui/" class="md-nav__link">
        User Interface
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../legacy-api/" class="md-nav__link">
        Legacy API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../helper-functions/" class="md-nav__link">
        Helper Functions
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../code-snippets/" class="md-nav__link">
        Code Snippets
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
      
      <label class="md-nav__link" for="__nav_5">
        Package Components
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Package Components" data-md-level="1">
        <label class="md-nav__title" for="__nav_5">
          <span class="md-nav__icon md-icon"></span>
          Package Components
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../package/package-xml/" class="md-nav__link">
        package.xml
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
      
      <label class="md-nav__link" for="__nav_5_2">
        PIPs
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="PIPs" data-md-level="2">
        <label class="md-nav__title" for="__nav_5_2">
          <span class="md-nav__icon md-icon"></span>
          PIPs
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../package/pip/" class="md-nav__link">
        Overview
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/acl-option/" class="md-nav__link">
        aclOption
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/acp-menu/" class="md-nav__link">
        acpMenu
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
        acpSearchProvider
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/acp-template/" class="md-nav__link">
        acpTemplate
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/bbcode/" class="md-nav__link">
        bbcode
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/box/" class="md-nav__link">
        box
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/clipboard-action/" class="md-nav__link">
        clipboardAction
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/core-object/" class="md-nav__link">
        coreObject
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/cronjob/" class="md-nav__link">
        cronjob
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/event-listener/" class="md-nav__link">
        eventListener
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/file/" class="md-nav__link">
        file
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/language/" class="md-nav__link">
        language
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/media-provider/" class="md-nav__link">
        mediaProvider
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/menu/" class="md-nav__link">
        menu
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/menu-item/" class="md-nav__link">
        menuItem
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/object-type/" class="md-nav__link">
        objectType
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/object-type-definition/" class="md-nav__link">
        objectTypeDefinition
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/option/" class="md-nav__link">
        option
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/page/" class="md-nav__link">
        page
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/pip/" class="md-nav__link">
        pip
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/script/" class="md-nav__link">
        script
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/smiley/" class="md-nav__link">
        smiley
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/sql/" class="md-nav__link">
        sql
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/style/" class="md-nav__link">
        style
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/template/" class="md-nav__link">
        template
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/template-listener/" class="md-nav__link">
        templateListener
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/user-group-option/" class="md-nav__link">
        userGroupOption
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/user-menu/" class="md-nav__link">
        userMenu
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/user-notification-event/" class="md-nav__link">
        userNotificationEvent
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/user-option/" class="md-nav__link">
        userOption
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
        userProfileMenu
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../../package/database-php-api/" class="md-nav__link">
        Database PHP API
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
      
      <label class="md-nav__link" for="__nav_6">
        Migration
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Migration" data-md-level="1">
        <label class="md-nav__title" for="__nav_6">
          <span class="md-nav__icon md-icon"></span>
          Migration
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
      
      <label class="md-nav__link" for="__nav_6_1">
        Migrating from WSC 5.3
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
        <label class="md-nav__title" for="__nav_6_1">
          <span class="md-nav__icon md-icon"></span>
          Migrating from WSC 5.3
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../migration/wsc53/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc53/session/" class="md-nav__link">
        Session Handling and Authentication
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc53/javascript/" class="md-nav__link">
        JavaScript
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc53/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc53/libraries/" class="md-nav__link">
        Third Party Libraries
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
      
      <label class="md-nav__link" for="__nav_6_2">
        Migrating from WSC 5.2
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
        <label class="md-nav__title" for="__nav_6_2">
          <span class="md-nav__icon md-icon"></span>
          Migrating from WSC 5.2
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../migration/wsc52/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc52/templates/" class="md-nav__link">
        Templates and Languages
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc52/libraries/" class="md-nav__link">
        Third Party Libraries
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
      
      <label class="md-nav__link" for="__nav_6_3">
        Migrating from WSC 3.1
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
        <label class="md-nav__title" for="__nav_6_3">
          <span class="md-nav__icon md-icon"></span>
          Migrating from WSC 3.1
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../migration/wsc31/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
      
      <label class="md-nav__link" for="__nav_6_4">
        Migrating from WSC 3.0
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
        <label class="md-nav__title" for="__nav_6_4">
          <span class="md-nav__icon md-icon"></span>
          Migrating from WSC 3.0
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../migration/wsc30/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc30/javascript/" class="md-nav__link">
        JavaScript API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc30/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc30/css/" class="md-nav__link">
        CSS
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wsc30/package/" class="md-nav__link">
        Package Components
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
      
      <label class="md-nav__link" for="__nav_6_5">
        Migrating from WCF 2.1
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
        <label class="md-nav__title" for="__nav_6_5">
          <span class="md-nav__icon md-icon"></span>
          Migrating from WCF 2.1
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../migration/wcf21/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wcf21/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wcf21/css/" class="md-nav__link">
        CSS
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../migration/wcf21/package/" class="md-nav__link">
        Package Components
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
      
      <label class="md-nav__link" for="__nav_7">
        Tutorials
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
        <label class="md-nav__title" for="__nav_7">
          <span class="md-nav__icon md-icon"></span>
          Tutorials
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
      
      <label class="md-nav__link" for="__nav_7_1">
        Tutorial Series
        <span class="md-nav__icon md-icon"></span>
      </label>
      <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
        <label class="md-nav__title" for="__nav_7_1">
          <span class="md-nav__icon md-icon"></span>
          Tutorial Series
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../tutorial/series/overview/" class="md-nav__link">
        Overview
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../tutorial/series/part_1/" class="md-nav__link">
        Part 1
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../tutorial/series/part_2/" class="md-nav__link">
        Part 2
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../tutorial/series/part_3/" class="md-nav__link">
        Part 3
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

        </ul>
      </nav>
    </li>
  

  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#uiscreen" class="md-nav__link">
    Ui/Screen
  </a>
  
    <nav class="md-nav" aria-label="Ui/Screen">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#supported-aliases" class="md-nav__link">
    Supported Aliases
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#onquery-string-callbacks-object-string" class="md-nav__link">
    on(query: string, callbacks: Object): string
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#removequery-string-uuid-string" class="md-nav__link">
    remove(query: string, uuid: string)
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#isquery-string-boolean" class="md-nav__link">
    is(query: string): boolean
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#scrolldisable" class="md-nav__link">
    scrollDisable()
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#scrollenable" class="md-nav__link">
    scrollEnable()
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#environment" class="md-nav__link">
    Environment
  </a>
  
    <nav class="md-nav" aria-label="Environment">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#browser-string" class="md-nav__link">
    browser(): string
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#platform-string" class="md-nav__link">
    platform(): string
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          <div class="md-content" data-md-component="content">
            <article class="md-content__inner md-typeset">
              
                
                <h1 id="browser-and-screen-sizes-javascript-api">Browser and Screen Sizes - JavaScript API<a class="headerlink" href="#browser-and-screen-sizes-javascript-api" title="Permanent link">#</a></h1>
<h2 id="uiscreen"><code>Ui/Screen</code><a class="headerlink" href="#uiscreen" title="Permanent link">#</a></h2>
<p>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.</p>
<p>The <code>Ui/Screen</code> 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.</p>
<h3 id="supported-aliases">Supported Aliases<a class="headerlink" href="#supported-aliases" title="Permanent link">#</a></h3>
<p>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.</p>
<table>
<thead>
<tr>
<th>Alias</th>
<th>Media Query</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>screen-xs</code></td>
<td><code>(max-width: 544px)</code></td>
</tr>
<tr>
<td><code>screen-sm</code></td>
<td><code>(min-width: 545px) and (max-width: 768px)</code></td>
</tr>
<tr>
<td><code>screen-sm-down</code></td>
<td><code>(max-width: 768px)</code></td>
</tr>
<tr>
<td><code>screen-sm-up</code></td>
<td><code>(min-width: 545px)</code></td>
</tr>
<tr>
<td><code>screen-sm-md</code></td>
<td><code>(min-width: 545px) and (max-width: 1024px)</code></td>
</tr>
<tr>
<td><code>screen-md</code></td>
<td><code>(min-width: 769px) and (max-width: 1024px)</code></td>
</tr>
<tr>
<td><code>screen-md-down</code></td>
<td><code>(max-width: 1024px)</code></td>
</tr>
<tr>
<td><code>screen-md-up</code></td>
<td><code>(min-width: 769px)</code></td>
</tr>
<tr>
<td><code>screen-lg</code></td>
<td><code>(min-width: 1025px)</code></td>
</tr>
</tbody>
</table>
<h3 id="onquery-string-callbacks-object-string"><code>on(query: string, callbacks: Object): string</code><a class="headerlink" href="#onquery-string-callbacks-object-string" title="Permanent link">#</a></h3>
<p>Registers a set of callback functions for the provided media query, the possible
keys are <code>match</code>, <code>unmatch</code> and <code>setup</code>. The method returns a randomly generated
UUIDv4 that is used to identify these callbacks and allows them to be removed
via <code>.remove()</code>.</p>
<h3 id="removequery-string-uuid-string"><code>remove(query: string, uuid: string)</code><a class="headerlink" href="#removequery-string-uuid-string" title="Permanent link">#</a></h3>
<p>Removes all callbacks for a media query that match the UUIDv4 that was previously
obtained from the call to <code>.on()</code>.</p>
<h3 id="isquery-string-boolean"><code>is(query: string): boolean</code><a class="headerlink" href="#isquery-string-boolean" title="Permanent link">#</a></h3>
<p>Tests if the provided media query currently matches and returns true on match.</p>
<h3 id="scrolldisable"><code>scrollDisable()</code><a class="headerlink" href="#scrolldisable" title="Permanent link">#</a></h3>
<p>Temporarily prevents the page from being scrolled, until <code>.scrollEnable()</code> is
called.</p>
<h3 id="scrollenable"><code>scrollEnable()</code><a class="headerlink" href="#scrollenable" title="Permanent link">#</a></h3>
<p>Enables page scrolling again, unless another pending action has also prevented
the page scrolling.</p>
<h2 id="environment"><code>Environment</code><a class="headerlink" href="#environment" title="Permanent link">#</a></h2>
<div class="admonition warning">
<p class="admonition-title">The <code>Environment</code> 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!</p>
</div>
<p>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.</p>
<h3 id="browser-string"><code>browser(): string</code><a class="headerlink" href="#browser-string" title="Permanent link">#</a></h3>
<p>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.</p>
<p>Possible values:
 - <code>chrome</code> (includes Opera 15+ and Vivaldi)
 - <code>firefox</code>
 - <code>safari</code>
 - <code>microsoft</code> (Internet Explorer and Edge)
 - <code>other</code> (default)</p>
<h3 id="platform-string"><code>platform(): string</code><a class="headerlink" href="#platform-string" title="Permanent link">#</a></h3>
<p>Attempts to detect the browser platform using user agent sniffing.</p>
<p>Possible values:
 - <code>ios</code>
 - <code>android</code>
 - <code>windows</code> (IE Mobile)
 - <code>mobile</code> (generic mobile device)
 - <code>desktop</code> (default)</p>
                
              
            </article>
          </div>
        </div>
      </main>
      
        
<footer class="md-footer">
  
    <nav class="md-footer__inner md-grid" aria-label="Footer">
      
        <a href="../new-api_dialogs/" class="md-footer__link md-footer__link--prev" rel="prev">
          <div class="md-footer__button md-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
          </div>
          <div class="md-footer__title">
            <div class="md-ellipsis">
              <span class="md-footer__direction">
                Previous
              </span>
              Dialogs
            </div>
          </div>
        </a>
      
      
        <a href="../new-api_ui/" class="md-footer__link md-footer__link--next" rel="next">
          <div class="md-footer__title">
            <div class="md-ellipsis">
              <span class="md-footer__direction">
                Next
              </span>
              User Interface
            </div>
          </div>
          <div class="md-footer__button md-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
          </div>
        </a>
      
    </nav>
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-footer-copyright">
        
          <div class="md-footer-copyright__highlight">
            Copyright © 2020 WoltLab GmbH
          </div>
        
        Made with
        <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
          Material for MkDocs
        </a>
        
      </div>
      <div class="md-footer-copyright">
	<a href="https://www.woltlab.com/legal-notice/">Legal Notice</a> 
	<a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
</div>
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    <script id="__config" type="application/json">{"base": "../..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}, "search": "../../assets/javascripts/workers/search.fb4a9340.min.js", "version": {"provider": "mike"}}</script>
    
    
      <script src="../../assets/javascripts/bundle.5cf3e710.min.js"></script>
      
    
  </body>
</html>