latest/javascript/new-api_browser/index.html

   1
   2 <!doctype html>
   3 <html lang="en" class="no-js">
   4   <head>
   5
   6       <meta charset="utf-8">
   7       <meta name="viewport" content="width=device-width,initial-scale=1">
   8
   9
  10
  11
  12       <link rel="shortcut icon" href="../../assets/default.favicon.ico">
  13       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.0.5">
  14
  15
  16
  17         <title>Browser and Screen Sizes - WoltLab Suite Documentation</title>
  18
  19
  20
  21       <link rel="stylesheet" href="../../assets/stylesheets/main.77f3fd56.min.css">
  22
  23
  24         <link rel="stylesheet" href="../../assets/stylesheets/palette.7fa14f5b.min.css">
  25
  26
  27
  28           <meta name="theme-color" content="#009485">
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38       <link rel="stylesheet" href="../../stylesheets/extra.css">
  39
  40
  41
  42
  43
  44   </head>
  45
  46
  47
  48
  49
  50
  51
  52     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  53
  54
  55
  56     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  57     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  58     <label class="md-overlay" for="__drawer"></label>
  59     <div data-md-component="skip">
  60
  61
  62         <a href="#browser-and-screen-sizes-javascript-api" class="md-skip">
  63           Skip to content
  64         </a>
  65
  66     </div>
  67     <div data-md-component="announce">
  68
  69         <aside class="md-announce">
  70           <div class="md-announce__inner md-grid md-typeset">
  71
  72     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  73
  74           </div>
  75         </aside>
  76
  77     </div>
  78
  79
  80
  81 <header class="md-header" data-md-component="header">
  82   <nav class="md-header__inner md-grid" aria-label="Header">
  83     <a href="../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation">
  84
  85   <img src="../../assets/logo.png" alt="logo">
  86
  87     </a>
  88     <label class="md-header__button md-icon" for="__drawer">
  89       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
  90     </label>
  91     <div class="md-header__title" data-md-component="header-title">
  92       <div class="md-header__ellipsis">
  93         <div class="md-header__topic">
  94           <span class="md-ellipsis">
  95             WoltLab Suite Documentation
  96           </span>
  97         </div>
  98         <div class="md-header__topic" data-md-component="header-topic">
  99           <span class="md-ellipsis">
 100
 101               Browser and Screen Sizes
 102
 103           </span>
 104         </div>
 105       </div>
 106     </div>
 107     <div class="md-header__options">
 108
 109     </div>
 110
 111       <label class="md-header__button md-icon" for="__search">
 112         <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>
 113       </label>
 114
 115 <div class="md-search" data-md-component="search" role="dialog">
 116   <label class="md-search__overlay" for="__search"></label>
 117   <div class="md-search__inner" role="search">
 118     <form class="md-search__form" name="search">
 119       <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>
 120       <label class="md-search__icon md-icon" for="__search">
 121         <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>
 122         <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>
 123       </label>
 124       <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
 125         <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>
 126       </button>
 127     </form>
 128     <div class="md-search__output">
 129       <div class="md-search__scrollwrap" data-md-scrollfix>
 130         <div class="md-search-result" data-md-component="search-result">
 131           <div class="md-search-result__meta">
 132             Initializing search
 133           </div>
 134           <ol class="md-search-result__list"></ol>
 135         </div>
 136       </div>
 137     </div>
 138   </div>
 139 </div>
 140
 141
 142       <div class="md-header__source">
 143
 144 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 145   <div class="md-source__icon md-icon">
 146
 147     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05L244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 148   </div>
 149   <div class="md-source__repository">
 150     GitHub
 151   </div>
 152 </a>
 153       </div>
 154
 155   </nav>
 156 </header>
 157
 158     <div class="md-container" data-md-component="container">
 159
 160
 161
 162
 163       <main class="md-main" data-md-component="main">
 164         <div class="md-main__inner md-grid">
 165
 166
 167
 168               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 169                 <div class="md-sidebar__scrollwrap">
 170                   <div class="md-sidebar__inner">
 171
 172
 173
 174
 175
 176 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 177   <label class="md-nav__title" for="__drawer">
 178     <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation">
 179
 180   <img src="../../assets/logo.png" alt="logo">
 181
 182     </a>
 183     WoltLab Suite Documentation
 184   </label>
 185
 186     <div class="md-nav__source">
 187
 188 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 189   <div class="md-source__icon md-icon">
 190
 191     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05L244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 192   </div>
 193   <div class="md-source__repository">
 194     GitHub
 195   </div>
 196 </a>
 197     </div>
 198
 199   <ul class="md-nav__list" data-md-scrollfix>
 200
 201
 202
 203
 204
 205
 206
 207
 208     <li class="md-nav__item">
 209       <a href="../../getting-started/" class="md-nav__link">
 210         Getting Started
 211       </a>
 212     </li>
 213
 214
 215
 216
 217
 218
 219
 220
 221
 222
 223
 224     <li class="md-nav__item md-nav__item--nested">
 225
 226
 227         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
 228
 229       <label class="md-nav__link" for="__nav_2">
 230         PHP API
 231         <span class="md-nav__icon md-icon"></span>
 232       </label>
 233       <nav class="md-nav" aria-label="PHP API" data-md-level="1">
 234         <label class="md-nav__title" for="__nav_2">
 235           <span class="md-nav__icon md-icon"></span>
 236           PHP API
 237         </label>
 238         <ul class="md-nav__list" data-md-scrollfix>
 239
 240
 241
 242
 243
 244     <li class="md-nav__item">
 245       <a href="../../php/pages/" class="md-nav__link">
 246         Pages
 247       </a>
 248     </li>
 249
 250
 251
 252
 253
 254
 255
 256     <li class="md-nav__item">
 257       <a href="../../php/database-objects/" class="md-nav__link">
 258         Database Objects
 259       </a>
 260     </li>
 261
 262
 263
 264
 265
 266
 267
 268     <li class="md-nav__item">
 269       <a href="../../php/database-access/" class="md-nav__link">
 270         Database Access
 271       </a>
 272     </li>
 273
 274
 275
 276
 277
 278
 279
 280     <li class="md-nav__item">
 281       <a href="../../php/exceptions/" class="md-nav__link">
 282         Exceptions
 283       </a>
 284     </li>
 285
 286
 287
 288
 289
 290
 291
 292
 293     <li class="md-nav__item md-nav__item--nested">
 294
 295
 296         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
 297
 298       <label class="md-nav__link" for="__nav_2_5">
 299         API
 300         <span class="md-nav__icon md-icon"></span>
 301       </label>
 302       <nav class="md-nav" aria-label="API" data-md-level="2">
 303         <label class="md-nav__title" for="__nav_2_5">
 304           <span class="md-nav__icon md-icon"></span>
 305           API
 306         </label>
 307         <ul class="md-nav__list" data-md-scrollfix>
 308
 309
 310
 311
 312
 313     <li class="md-nav__item">
 314       <a href="../../php/api/caches/" class="md-nav__link">
 315         Caches
 316       </a>
 317     </li>
 318
 319
 320
 321
 322
 323
 324
 325     <li class="md-nav__item">
 326       <a href="../../php/api/comments/" class="md-nav__link">
 327         Comments
 328       </a>
 329     </li>
 330
 331
 332
 333
 334
 335
 336
 337     <li class="md-nav__item">
 338       <a href="../../php/api/cronjobs/" class="md-nav__link">
 339         Cronjobs
 340       </a>
 341     </li>
 342
 343
 344
 345
 346
 347
 348
 349     <li class="md-nav__item">
 350       <a href="../../php/api/events/" class="md-nav__link">
 351         Events
 352       </a>
 353     </li>
 354
 355
 356
 357
 358
 359
 360
 361
 362     <li class="md-nav__item md-nav__item--nested">
 363
 364
 365         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 366
 367       <label class="md-nav__link" for="__nav_2_5_5">
 368         Form Builder
 369         <span class="md-nav__icon md-icon"></span>
 370       </label>
 371       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 372         <label class="md-nav__title" for="__nav_2_5_5">
 373           <span class="md-nav__icon md-icon"></span>
 374           Form Builder
 375         </label>
 376         <ul class="md-nav__list" data-md-scrollfix>
 377
 378
 379
 380
 381
 382     <li class="md-nav__item">
 383       <a href="../../php/api/form_builder/overview/" class="md-nav__link">
 384         Overview
 385       </a>
 386     </li>
 387
 388
 389
 390
 391
 392
 393
 394     <li class="md-nav__item">
 395       <a href="../../php/api/form_builder/structure/" class="md-nav__link">
 396         Structure
 397       </a>
 398     </li>
 399
 400
 401
 402
 403
 404
 405
 406     <li class="md-nav__item">
 407       <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
 408         Fields
 409       </a>
 410     </li>
 411
 412
 413
 414
 415
 416
 417
 418     <li class="md-nav__item">
 419       <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
 420         Validation and Data
 421       </a>
 422     </li>
 423
 424
 425
 426
 427
 428
 429
 430     <li class="md-nav__item">
 431       <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
 432         Dependencies
 433       </a>
 434     </li>
 435
 436
 437
 438         </ul>
 439       </nav>
 440     </li>
 441
 442
 443
 444
 445
 446
 447
 448     <li class="md-nav__item">
 449       <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
 450         Package Installation Plugins
 451       </a>
 452     </li>
 453
 454
 455
 456
 457
 458
 459
 460     <li class="md-nav__item">
 461       <a href="../../php/api/user_activity_points/" class="md-nav__link">
 462         User Activity Points
 463       </a>
 464     </li>
 465
 466
 467
 468
 469
 470
 471
 472     <li class="md-nav__item">
 473       <a href="../../php/api/user_notifications/" class="md-nav__link">
 474         User Notifications
 475       </a>
 476     </li>
 477
 478
 479
 480
 481
 482
 483
 484     <li class="md-nav__item">
 485       <a href="../../php/api/sitemaps/" class="md-nav__link">
 486         Sitemaps
 487       </a>
 488     </li>
 489
 490
 491
 492         </ul>
 493       </nav>
 494     </li>
 495
 496
 497
 498
 499
 500
 501
 502     <li class="md-nav__item">
 503       <a href="../../php/code-style/" class="md-nav__link">
 504         Code Style
 505       </a>
 506     </li>
 507
 508
 509
 510
 511
 512
 513
 514     <li class="md-nav__item">
 515       <a href="../../php/apps/" class="md-nav__link">
 516         Apps
 517       </a>
 518     </li>
 519
 520
 521
 522
 523
 524
 525
 526     <li class="md-nav__item">
 527       <a href="../../php/gdpr/" class="md-nav__link">
 528         GDPR
 529       </a>
 530     </li>
 531
 532
 533
 534         </ul>
 535       </nav>
 536     </li>
 537
 538
 539
 540
 541
 542
 543
 544
 545
 546
 547
 548     <li class="md-nav__item md-nav__item--nested">
 549
 550
 551         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
 552
 553       <label class="md-nav__link" for="__nav_3">
 554         Languages, Templates & CSS
 555         <span class="md-nav__icon md-icon"></span>
 556       </label>
 557       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 558         <label class="md-nav__title" for="__nav_3">
 559           <span class="md-nav__icon md-icon"></span>
 560           Languages, Templates & CSS
 561         </label>
 562         <ul class="md-nav__list" data-md-scrollfix>
 563
 564
 565
 566
 567
 568     <li class="md-nav__item">
 569       <a href="../../view/languages/" class="md-nav__link">
 570         Languages
 571       </a>
 572     </li>
 573
 574
 575
 576
 577
 578
 579
 580     <li class="md-nav__item">
 581       <a href="../../view/templates/" class="md-nav__link">
 582         Templates
 583       </a>
 584     </li>
 585
 586
 587
 588
 589
 590
 591
 592     <li class="md-nav__item">
 593       <a href="../../view/css/" class="md-nav__link">
 594         CSS
 595       </a>
 596     </li>
 597
 598
 599
 600         </ul>
 601       </nav>
 602     </li>
 603
 604
 605
 606
 607
 608
 609
 610
 611
 612
 613
 614
 615
 616     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 617
 618
 619         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" checked>
 620
 621       <label class="md-nav__link" for="__nav_4">
 622         JavaScript API
 623         <span class="md-nav__icon md-icon"></span>
 624       </label>
 625       <nav class="md-nav" aria-label="JavaScript API" data-md-level="1">
 626         <label class="md-nav__title" for="__nav_4">
 627           <span class="md-nav__icon md-icon"></span>
 628           JavaScript API
 629         </label>
 630         <ul class="md-nav__list" data-md-scrollfix>
 631
 632
 633
 634
 635
 636     <li class="md-nav__item">
 637       <a href="../general-usage/" class="md-nav__link">
 638         General Usage
 639       </a>
 640     </li>
 641
 642
 643
 644
 645
 646
 647
 648
 649
 650
 651     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 652
 653
 654         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_2" type="checkbox" id="__nav_4_2" checked>
 655
 656       <label class="md-nav__link" for="__nav_4_2">
 657         New API
 658         <span class="md-nav__icon md-icon"></span>
 659       </label>
 660       <nav class="md-nav" aria-label="New API" data-md-level="2">
 661         <label class="md-nav__title" for="__nav_4_2">
 662           <span class="md-nav__icon md-icon"></span>
 663           New API
 664         </label>
 665         <ul class="md-nav__list" data-md-scrollfix>
 666
 667
 668
 669
 670
 671     <li class="md-nav__item">
 672       <a href="../new-api_writing-a-module/" class="md-nav__link">
 673         Writing a module
 674       </a>
 675     </li>
 676
 677
 678
 679
 680
 681
 682
 683     <li class="md-nav__item">
 684       <a href="../new-api_data-structures/" class="md-nav__link">
 685         Data Structures
 686       </a>
 687     </li>
 688
 689
 690
 691
 692
 693
 694
 695     <li class="md-nav__item">
 696       <a href="../new-api_core/" class="md-nav__link">
 697         Core Functions
 698       </a>
 699     </li>
 700
 701
 702
 703
 704
 705
 706
 707     <li class="md-nav__item">
 708       <a href="../new-api_dom/" class="md-nav__link">
 709         DOM
 710       </a>
 711     </li>
 712
 713
 714
 715
 716
 717
 718
 719     <li class="md-nav__item">
 720       <a href="../new-api_events/" class="md-nav__link">
 721         Event Handling
 722       </a>
 723     </li>
 724
 725
 726
 727
 728
 729
 730
 731     <li class="md-nav__item">
 732       <a href="../new-api_ajax/" class="md-nav__link">
 733         Ajax
 734       </a>
 735     </li>
 736
 737
 738
 739
 740
 741
 742
 743     <li class="md-nav__item">
 744       <a href="../new-api_dialogs/" class="md-nav__link">
 745         Dialogs
 746       </a>
 747     </li>
 748
 749
 750
 751
 752
 753
 754
 755
 756
 757     <li class="md-nav__item md-nav__item--active">
 758
 759       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
 760
 761
 762
 763
 764         <label class="md-nav__link md-nav__link--active" for="__toc">
 765           Browser and Screen Sizes
 766           <span class="md-nav__icon md-icon"></span>
 767         </label>
 768
 769       <a href="./" class="md-nav__link md-nav__link--active">
 770         Browser and Screen Sizes
 771       </a>
 772
 773
 774 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 775
 776
 777
 778
 779
 780     <label class="md-nav__title" for="__toc">
 781       <span class="md-nav__icon md-icon"></span>
 782       Table of contents
 783     </label>
 784     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 785
 786         <li class="md-nav__item">
 787   <a href="#uiscreen" class="md-nav__link">
 788     Ui/Screen
 789   </a>
 790
 791     <nav class="md-nav" aria-label="Ui/Screen">
 792       <ul class="md-nav__list">
 793
 794           <li class="md-nav__item">
 795   <a href="#supported-aliases" class="md-nav__link">
 796     Supported Aliases
 797   </a>
 798
 799 </li>
 800
 801           <li class="md-nav__item">
 802   <a href="#onquery-string-callbacks-object-string" class="md-nav__link">
 803     on(query: string, callbacks: Object): string
 804   </a>
 805
 806 </li>
 807
 808           <li class="md-nav__item">
 809   <a href="#removequery-string-uuid-string" class="md-nav__link">
 810     remove(query: string, uuid: string)
 811   </a>
 812
 813 </li>
 814
 815           <li class="md-nav__item">
 816   <a href="#isquery-string-boolean" class="md-nav__link">
 817     is(query: string): boolean
 818   </a>
 819
 820 </li>
 821
 822           <li class="md-nav__item">
 823   <a href="#scrolldisable" class="md-nav__link">
 824     scrollDisable()
 825   </a>
 826
 827 </li>
 828
 829           <li class="md-nav__item">
 830   <a href="#scrollenable" class="md-nav__link">
 831     scrollEnable()
 832   </a>
 833
 834 </li>
 835
 836       </ul>
 837     </nav>
 838
 839 </li>
 840
 841         <li class="md-nav__item">
 842   <a href="#environment" class="md-nav__link">
 843     Environment
 844   </a>
 845
 846     <nav class="md-nav" aria-label="Environment">
 847       <ul class="md-nav__list">
 848
 849           <li class="md-nav__item">
 850   <a href="#browser-string" class="md-nav__link">
 851     browser(): string
 852   </a>
 853
 854 </li>
 855
 856           <li class="md-nav__item">
 857   <a href="#platform-string" class="md-nav__link">
 858     platform(): string
 859   </a>
 860
 861 </li>
 862
 863       </ul>
 864     </nav>
 865
 866 </li>
 867
 868     </ul>
 869
 870 </nav>
 871
 872     </li>
 873
 874
 875
 876
 877
 878
 879
 880     <li class="md-nav__item">
 881       <a href="../new-api_ui/" class="md-nav__link">
 882         User Interface
 883       </a>
 884     </li>
 885
 886
 887
 888         </ul>
 889       </nav>
 890     </li>
 891
 892
 893
 894
 895
 896
 897
 898     <li class="md-nav__item">
 899       <a href="../legacy-api/" class="md-nav__link">
 900         Legacy API
 901       </a>
 902     </li>
 903
 904
 905
 906
 907
 908
 909
 910     <li class="md-nav__item">
 911       <a href="../helper-functions/" class="md-nav__link">
 912         Helper Functions
 913       </a>
 914     </li>
 915
 916
 917
 918
 919
 920
 921
 922     <li class="md-nav__item">
 923       <a href="../code-snippets/" class="md-nav__link">
 924         Code Snippets
 925       </a>
 926     </li>
 927
 928
 929
 930         </ul>
 931       </nav>
 932     </li>
 933
 934
 935
 936
 937
 938
 939
 940
 941
 942
 943
 944     <li class="md-nav__item md-nav__item--nested">
 945
 946
 947         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
 948
 949       <label class="md-nav__link" for="__nav_5">
 950         Package Components
 951         <span class="md-nav__icon md-icon"></span>
 952       </label>
 953       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
 954         <label class="md-nav__title" for="__nav_5">
 955           <span class="md-nav__icon md-icon"></span>
 956           Package Components
 957         </label>
 958         <ul class="md-nav__list" data-md-scrollfix>
 959
 960
 961
 962
 963
 964     <li class="md-nav__item">
 965       <a href="../../package/package-xml/" class="md-nav__link">
 966         package.xml
 967       </a>
 968     </li>
 969
 970
 971
 972
 973
 974
 975
 976
 977     <li class="md-nav__item md-nav__item--nested">
 978
 979
 980         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
 981
 982       <label class="md-nav__link" for="__nav_5_2">
 983         PIPs
 984         <span class="md-nav__icon md-icon"></span>
 985       </label>
 986       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
 987         <label class="md-nav__title" for="__nav_5_2">
 988           <span class="md-nav__icon md-icon"></span>
 989           PIPs
 990         </label>
 991         <ul class="md-nav__list" data-md-scrollfix>
 992
 993
 994
 995
 996
 997     <li class="md-nav__item">
 998       <a href="../../package/pip/" class="md-nav__link">
 999         Overview
1000       </a>
1001     </li>
1002
1003
1004
1005
1006
1007
1008
1009     <li class="md-nav__item">
1010       <a href="../../package/pip/acl-option/" class="md-nav__link">
1011         aclOption
1012       </a>
1013     </li>
1014
1015
1016
1017
1018
1019
1020
1021     <li class="md-nav__item">
1022       <a href="../../package/pip/acp-menu/" class="md-nav__link">
1023         acpMenu
1024       </a>
1025     </li>
1026
1027
1028
1029
1030
1031
1032
1033     <li class="md-nav__item">
1034       <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
1035         acpSearchProvider
1036       </a>
1037     </li>
1038
1039
1040
1041
1042
1043
1044
1045     <li class="md-nav__item">
1046       <a href="../../package/pip/acp-template/" class="md-nav__link">
1047         acpTemplate
1048       </a>
1049     </li>
1050
1051
1052
1053
1054
1055
1056
1057     <li class="md-nav__item">
1058       <a href="../../package/pip/bbcode/" class="md-nav__link">
1059         bbcode
1060       </a>
1061     </li>
1062
1063
1064
1065
1066
1067
1068
1069     <li class="md-nav__item">
1070       <a href="../../package/pip/box/" class="md-nav__link">
1071         box
1072       </a>
1073     </li>
1074
1075
1076
1077
1078
1079
1080
1081     <li class="md-nav__item">
1082       <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1083         clipboardAction
1084       </a>
1085     </li>
1086
1087
1088
1089
1090
1091
1092
1093     <li class="md-nav__item">
1094       <a href="../../package/pip/core-object/" class="md-nav__link">
1095         coreObject
1096       </a>
1097     </li>
1098
1099
1100
1101
1102
1103
1104
1105     <li class="md-nav__item">
1106       <a href="../../package/pip/cronjob/" class="md-nav__link">
1107         cronjob
1108       </a>
1109     </li>
1110
1111
1112
1113
1114
1115
1116
1117     <li class="md-nav__item">
1118       <a href="../../package/pip/event-listener/" class="md-nav__link">
1119         eventListener
1120       </a>
1121     </li>
1122
1123
1124
1125
1126
1127
1128
1129     <li class="md-nav__item">
1130       <a href="../../package/pip/file/" class="md-nav__link">
1131         file
1132       </a>
1133     </li>
1134
1135
1136
1137
1138
1139
1140
1141     <li class="md-nav__item">
1142       <a href="../../package/pip/language/" class="md-nav__link">
1143         language
1144       </a>
1145     </li>
1146
1147
1148
1149
1150
1151
1152
1153     <li class="md-nav__item">
1154       <a href="../../package/pip/media-provider/" class="md-nav__link">
1155         mediaProvider
1156       </a>
1157     </li>
1158
1159
1160
1161
1162
1163
1164
1165     <li class="md-nav__item">
1166       <a href="../../package/pip/menu/" class="md-nav__link">
1167         menu
1168       </a>
1169     </li>
1170
1171
1172
1173
1174
1175
1176
1177     <li class="md-nav__item">
1178       <a href="../../package/pip/menu-item/" class="md-nav__link">
1179         menuItem
1180       </a>
1181     </li>
1182
1183
1184
1185
1186
1187
1188
1189     <li class="md-nav__item">
1190       <a href="../../package/pip/object-type/" class="md-nav__link">
1191         objectType
1192       </a>
1193     </li>
1194
1195
1196
1197
1198
1199
1200
1201     <li class="md-nav__item">
1202       <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1203         objectTypeDefinition
1204       </a>
1205     </li>
1206
1207
1208
1209
1210
1211
1212
1213     <li class="md-nav__item">
1214       <a href="../../package/pip/option/" class="md-nav__link">
1215         option
1216       </a>
1217     </li>
1218
1219
1220
1221
1222
1223
1224
1225     <li class="md-nav__item">
1226       <a href="../../package/pip/page/" class="md-nav__link">
1227         page
1228       </a>
1229     </li>
1230
1231
1232
1233
1234
1235
1236
1237     <li class="md-nav__item">
1238       <a href="../../package/pip/pip/" class="md-nav__link">
1239         pip
1240       </a>
1241     </li>
1242
1243
1244
1245
1246
1247
1248
1249     <li class="md-nav__item">
1250       <a href="../../package/pip/script/" class="md-nav__link">
1251         script
1252       </a>
1253     </li>
1254
1255
1256
1257
1258
1259
1260
1261     <li class="md-nav__item">
1262       <a href="../../package/pip/smiley/" class="md-nav__link">
1263         smiley
1264       </a>
1265     </li>
1266
1267
1268
1269
1270
1271
1272
1273     <li class="md-nav__item">
1274       <a href="../../package/pip/sql/" class="md-nav__link">
1275         sql
1276       </a>
1277     </li>
1278
1279
1280
1281
1282
1283
1284
1285     <li class="md-nav__item">
1286       <a href="../../package/pip/style/" class="md-nav__link">
1287         style
1288       </a>
1289     </li>
1290
1291
1292
1293
1294
1295
1296
1297     <li class="md-nav__item">
1298       <a href="../../package/pip/template/" class="md-nav__link">
1299         template
1300       </a>
1301     </li>
1302
1303
1304
1305
1306
1307
1308
1309     <li class="md-nav__item">
1310       <a href="../../package/pip/template-listener/" class="md-nav__link">
1311         templateListener
1312       </a>
1313     </li>
1314
1315
1316
1317
1318
1319
1320
1321     <li class="md-nav__item">
1322       <a href="../../package/pip/user-group-option/" class="md-nav__link">
1323         userGroupOption
1324       </a>
1325     </li>
1326
1327
1328
1329
1330
1331
1332
1333     <li class="md-nav__item">
1334       <a href="../../package/pip/user-menu/" class="md-nav__link">
1335         userMenu
1336       </a>
1337     </li>
1338
1339
1340
1341
1342
1343
1344
1345     <li class="md-nav__item">
1346       <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1347         userNotificationEvent
1348       </a>
1349     </li>
1350
1351
1352
1353
1354
1355
1356
1357     <li class="md-nav__item">
1358       <a href="../../package/pip/user-option/" class="md-nav__link">
1359         userOption
1360       </a>
1361     </li>
1362
1363
1364
1365
1366
1367
1368
1369     <li class="md-nav__item">
1370       <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1371         userProfileMenu
1372       </a>
1373     </li>
1374
1375
1376
1377         </ul>
1378       </nav>
1379     </li>
1380
1381
1382
1383
1384
1385
1386
1387     <li class="md-nav__item">
1388       <a href="../../package/database-php-api/" class="md-nav__link">
1389         Database PHP API
1390       </a>
1391     </li>
1392
1393
1394
1395         </ul>
1396       </nav>
1397     </li>
1398
1399
1400
1401
1402
1403
1404
1405
1406
1407
1408
1409     <li class="md-nav__item md-nav__item--nested">
1410
1411
1412         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1413
1414       <label class="md-nav__link" for="__nav_6">
1415         Migration
1416         <span class="md-nav__icon md-icon"></span>
1417       </label>
1418       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1419         <label class="md-nav__title" for="__nav_6">
1420           <span class="md-nav__icon md-icon"></span>
1421           Migration
1422         </label>
1423         <ul class="md-nav__list" data-md-scrollfix>
1424
1425
1426
1427
1428
1429
1430     <li class="md-nav__item md-nav__item--nested">
1431
1432
1433         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1434
1435       <label class="md-nav__link" for="__nav_6_1">
1436         Migrating from WSC 5.3
1437         <span class="md-nav__icon md-icon"></span>
1438       </label>
1439       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1440         <label class="md-nav__title" for="__nav_6_1">
1441           <span class="md-nav__icon md-icon"></span>
1442           Migrating from WSC 5.3
1443         </label>
1444         <ul class="md-nav__list" data-md-scrollfix>
1445
1446
1447
1448
1449
1450     <li class="md-nav__item">
1451       <a href="../../migration/wsc53/php/" class="md-nav__link">
1452         PHP API
1453       </a>
1454     </li>
1455
1456
1457
1458
1459
1460
1461
1462     <li class="md-nav__item">
1463       <a href="../../migration/wsc53/session/" class="md-nav__link">
1464         Session Handling and Authentication
1465       </a>
1466     </li>
1467
1468
1469
1470
1471
1472
1473
1474     <li class="md-nav__item">
1475       <a href="../../migration/wsc53/javascript/" class="md-nav__link">
1476         JavaScript
1477       </a>
1478     </li>
1479
1480
1481
1482
1483
1484
1485
1486     <li class="md-nav__item">
1487       <a href="../../migration/wsc53/templates/" class="md-nav__link">
1488         Templates
1489       </a>
1490     </li>
1491
1492
1493
1494
1495
1496
1497
1498     <li class="md-nav__item">
1499       <a href="../../migration/wsc53/libraries/" class="md-nav__link">
1500         Third Party Libraries
1501       </a>
1502     </li>
1503
1504
1505
1506         </ul>
1507       </nav>
1508     </li>
1509
1510
1511
1512
1513
1514
1515
1516
1517     <li class="md-nav__item md-nav__item--nested">
1518
1519
1520         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1521
1522       <label class="md-nav__link" for="__nav_6_2">
1523         Migrating from WSC 5.2
1524         <span class="md-nav__icon md-icon"></span>
1525       </label>
1526       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1527         <label class="md-nav__title" for="__nav_6_2">
1528           <span class="md-nav__icon md-icon"></span>
1529           Migrating from WSC 5.2
1530         </label>
1531         <ul class="md-nav__list" data-md-scrollfix>
1532
1533
1534
1535
1536
1537     <li class="md-nav__item">
1538       <a href="../../migration/wsc52/php/" class="md-nav__link">
1539         PHP API
1540       </a>
1541     </li>
1542
1543
1544
1545
1546
1547
1548
1549     <li class="md-nav__item">
1550       <a href="../../migration/wsc52/templates/" class="md-nav__link">
1551         Templates and Languages
1552       </a>
1553     </li>
1554
1555
1556
1557
1558
1559
1560
1561     <li class="md-nav__item">
1562       <a href="../../migration/wsc52/libraries/" class="md-nav__link">
1563         Third Party Libraries
1564       </a>
1565     </li>
1566
1567
1568
1569         </ul>
1570       </nav>
1571     </li>
1572
1573
1574
1575
1576
1577
1578
1579
1580     <li class="md-nav__item md-nav__item--nested">
1581
1582
1583         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1584
1585       <label class="md-nav__link" for="__nav_6_3">
1586         Migrating from WSC 3.1
1587         <span class="md-nav__icon md-icon"></span>
1588       </label>
1589       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1590         <label class="md-nav__title" for="__nav_6_3">
1591           <span class="md-nav__icon md-icon"></span>
1592           Migrating from WSC 3.1
1593         </label>
1594         <ul class="md-nav__list" data-md-scrollfix>
1595
1596
1597
1598
1599
1600     <li class="md-nav__item">
1601       <a href="../../migration/wsc31/php/" class="md-nav__link">
1602         PHP API
1603       </a>
1604     </li>
1605
1606
1607
1608         </ul>
1609       </nav>
1610     </li>
1611
1612
1613
1614
1615
1616
1617
1618
1619     <li class="md-nav__item md-nav__item--nested">
1620
1621
1622         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1623
1624       <label class="md-nav__link" for="__nav_6_4">
1625         Migrating from WSC 3.0
1626         <span class="md-nav__icon md-icon"></span>
1627       </label>
1628       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1629         <label class="md-nav__title" for="__nav_6_4">
1630           <span class="md-nav__icon md-icon"></span>
1631           Migrating from WSC 3.0
1632         </label>
1633         <ul class="md-nav__list" data-md-scrollfix>
1634
1635
1636
1637
1638
1639     <li class="md-nav__item">
1640       <a href="../../migration/wsc30/php/" class="md-nav__link">
1641         PHP API
1642       </a>
1643     </li>
1644
1645
1646
1647
1648
1649
1650
1651     <li class="md-nav__item">
1652       <a href="../../migration/wsc30/javascript/" class="md-nav__link">
1653         JavaScript API
1654       </a>
1655     </li>
1656
1657
1658
1659
1660
1661
1662
1663     <li class="md-nav__item">
1664       <a href="../../migration/wsc30/templates/" class="md-nav__link">
1665         Templates
1666       </a>
1667     </li>
1668
1669
1670
1671
1672
1673
1674
1675     <li class="md-nav__item">
1676       <a href="../../migration/wsc30/css/" class="md-nav__link">
1677         CSS
1678       </a>
1679     </li>
1680
1681
1682
1683
1684
1685
1686
1687     <li class="md-nav__item">
1688       <a href="../../migration/wsc30/package/" class="md-nav__link">
1689         Package Components
1690       </a>
1691     </li>
1692
1693
1694
1695         </ul>
1696       </nav>
1697     </li>
1698
1699
1700
1701
1702
1703
1704
1705
1706     <li class="md-nav__item md-nav__item--nested">
1707
1708
1709         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1710
1711       <label class="md-nav__link" for="__nav_6_5">
1712         Migrating from WCF 2.1
1713         <span class="md-nav__icon md-icon"></span>
1714       </label>
1715       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1716         <label class="md-nav__title" for="__nav_6_5">
1717           <span class="md-nav__icon md-icon"></span>
1718           Migrating from WCF 2.1
1719         </label>
1720         <ul class="md-nav__list" data-md-scrollfix>
1721
1722
1723
1724
1725
1726     <li class="md-nav__item">
1727       <a href="../../migration/wcf21/php/" class="md-nav__link">
1728         PHP API
1729       </a>
1730     </li>
1731
1732
1733
1734
1735
1736
1737
1738     <li class="md-nav__item">
1739       <a href="../../migration/wcf21/templates/" class="md-nav__link">
1740         Templates
1741       </a>
1742     </li>
1743
1744
1745
1746
1747
1748
1749
1750     <li class="md-nav__item">
1751       <a href="../../migration/wcf21/css/" class="md-nav__link">
1752         CSS
1753       </a>
1754     </li>
1755
1756
1757
1758
1759
1760
1761
1762     <li class="md-nav__item">
1763       <a href="../../migration/wcf21/package/" class="md-nav__link">
1764         Package Components
1765       </a>
1766     </li>
1767
1768
1769
1770         </ul>
1771       </nav>
1772     </li>
1773
1774
1775
1776         </ul>
1777       </nav>
1778     </li>
1779
1780
1781
1782
1783
1784
1785
1786
1787
1788
1789
1790     <li class="md-nav__item md-nav__item--nested">
1791
1792
1793         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1794
1795       <label class="md-nav__link" for="__nav_7">
1796         Tutorials
1797         <span class="md-nav__icon md-icon"></span>
1798       </label>
1799       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1800         <label class="md-nav__title" for="__nav_7">
1801           <span class="md-nav__icon md-icon"></span>
1802           Tutorials
1803         </label>
1804         <ul class="md-nav__list" data-md-scrollfix>
1805
1806
1807
1808
1809
1810
1811     <li class="md-nav__item md-nav__item--nested">
1812
1813
1814         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
1815
1816       <label class="md-nav__link" for="__nav_7_1">
1817         Tutorial Series
1818         <span class="md-nav__icon md-icon"></span>
1819       </label>
1820       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1821         <label class="md-nav__title" for="__nav_7_1">
1822           <span class="md-nav__icon md-icon"></span>
1823           Tutorial Series
1824         </label>
1825         <ul class="md-nav__list" data-md-scrollfix>
1826
1827
1828
1829
1830
1831     <li class="md-nav__item">
1832       <a href="../../tutorial/series/overview/" class="md-nav__link">
1833         Overview
1834       </a>
1835     </li>
1836
1837
1838
1839
1840
1841
1842
1843     <li class="md-nav__item">
1844       <a href="../../tutorial/series/part_1/" class="md-nav__link">
1845         Part 1
1846       </a>
1847     </li>
1848
1849
1850
1851
1852
1853
1854
1855     <li class="md-nav__item">
1856       <a href="../../tutorial/series/part_2/" class="md-nav__link">
1857         Part 2
1858       </a>
1859     </li>
1860
1861
1862
1863
1864
1865
1866
1867     <li class="md-nav__item">
1868       <a href="../../tutorial/series/part_3/" class="md-nav__link">
1869         Part 3
1870       </a>
1871     </li>
1872
1873
1874
1875         </ul>
1876       </nav>
1877     </li>
1878
1879
1880
1881         </ul>
1882       </nav>
1883     </li>
1884
1885
1886
1887   </ul>
1888 </nav>
1889                   </div>
1890                 </div>
1891               </div>
1892
1893
1894
1895               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
1896                 <div class="md-sidebar__scrollwrap">
1897                   <div class="md-sidebar__inner">
1898
1899 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
1900
1901
1902
1903
1904
1905     <label class="md-nav__title" for="__toc">
1906       <span class="md-nav__icon md-icon"></span>
1907       Table of contents
1908     </label>
1909     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
1910
1911         <li class="md-nav__item">
1912   <a href="#uiscreen" class="md-nav__link">
1913     Ui/Screen
1914   </a>
1915
1916     <nav class="md-nav" aria-label="Ui/Screen">
1917       <ul class="md-nav__list">
1918
1919           <li class="md-nav__item">
1920   <a href="#supported-aliases" class="md-nav__link">
1921     Supported Aliases
1922   </a>
1923
1924 </li>
1925
1926           <li class="md-nav__item">
1927   <a href="#onquery-string-callbacks-object-string" class="md-nav__link">
1928     on(query: string, callbacks: Object): string
1929   </a>
1930
1931 </li>
1932
1933           <li class="md-nav__item">
1934   <a href="#removequery-string-uuid-string" class="md-nav__link">
1935     remove(query: string, uuid: string)
1936   </a>
1937
1938 </li>
1939
1940           <li class="md-nav__item">
1941   <a href="#isquery-string-boolean" class="md-nav__link">
1942     is(query: string): boolean
1943   </a>
1944
1945 </li>
1946
1947           <li class="md-nav__item">
1948   <a href="#scrolldisable" class="md-nav__link">
1949     scrollDisable()
1950   </a>
1951
1952 </li>
1953
1954           <li class="md-nav__item">
1955   <a href="#scrollenable" class="md-nav__link">
1956     scrollEnable()
1957   </a>
1958
1959 </li>
1960
1961       </ul>
1962     </nav>
1963
1964 </li>
1965
1966         <li class="md-nav__item">
1967   <a href="#environment" class="md-nav__link">
1968     Environment
1969   </a>
1970
1971     <nav class="md-nav" aria-label="Environment">
1972       <ul class="md-nav__list">
1973
1974           <li class="md-nav__item">
1975   <a href="#browser-string" class="md-nav__link">
1976     browser(): string
1977   </a>
1978
1979 </li>
1980
1981           <li class="md-nav__item">
1982   <a href="#platform-string" class="md-nav__link">
1983     platform(): string
1984   </a>
1985
1986 </li>
1987
1988       </ul>
1989     </nav>
1990
1991 </li>
1992
1993     </ul>
1994
1995 </nav>
1996                   </div>
1997                 </div>
1998               </div>
1999
2000
2001           <div class="md-content" data-md-component="content">
2002             <article class="md-content__inner md-typeset">
2003
2004
2005                   <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/javascript/new-api_browser.md" title="Edit this page" class="md-content__button md-icon">
2006                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
2007                   </a>
2008
2009
2010                 <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>
2011 <h2 id="uiscreen"><code>Ui/Screen</code><a class="headerlink" href="#uiscreen" title="Permanent link">#</a></h2>
2012 <p>CSS offers powerful media queries that alter the layout depending on the screen
2013 sizes, including but not limited to changes between landscape and portrait mode
2014 on mobile devices.</p>
2015 <p>The <code>Ui/Screen</code> module exposes a consistent interface to execute JavaScript code
2016 based on the same media queries that are available in the CSS code already. It
2017 features support for unmatching and executing code when a rule matches for the
2018 first time during the page lifecycle.</p>
2019 <h3 id="supported-aliases">Supported Aliases<a class="headerlink" href="#supported-aliases" title="Permanent link">#</a></h3>
2020 <p>You can pass in custom media queries, but it is strongly recommended to use the
2021 built-in media queries that match the same dimensions as your CSS.</p>
2022 <table>
2023 <thead>
2024 <tr>
2025 <th>Alias</th>
2026 <th>Media Query</th>
2027 </tr>
2028 </thead>
2029 <tbody>
2030 <tr>
2031 <td><code>screen-xs</code></td>
2032 <td><code>(max-width: 544px)</code></td>
2033 </tr>
2034 <tr>
2035 <td><code>screen-sm</code></td>
2036 <td><code>(min-width: 545px) and (max-width: 768px)</code></td>
2037 </tr>
2038 <tr>
2039 <td><code>screen-sm-down</code></td>
2040 <td><code>(max-width: 768px)</code></td>
2041 </tr>
2042 <tr>
2043 <td><code>screen-sm-up</code></td>
2044 <td><code>(min-width: 545px)</code></td>
2045 </tr>
2046 <tr>
2047 <td><code>screen-sm-md</code></td>
2048 <td><code>(min-width: 545px) and (max-width: 1024px)</code></td>
2049 </tr>
2050 <tr>
2051 <td><code>screen-md</code></td>
2052 <td><code>(min-width: 769px) and (max-width: 1024px)</code></td>
2053 </tr>
2054 <tr>
2055 <td><code>screen-md-down</code></td>
2056 <td><code>(max-width: 1024px)</code></td>
2057 </tr>
2058 <tr>
2059 <td><code>screen-md-up</code></td>
2060 <td><code>(min-width: 769px)</code></td>
2061 </tr>
2062 <tr>
2063 <td><code>screen-lg</code></td>
2064 <td><code>(min-width: 1025px)</code></td>
2065 </tr>
2066 </tbody>
2067 </table>
2068 <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>
2069 <p>Registers a set of callback functions for the provided media query, the possible
2070 keys are <code>match</code>, <code>unmatch</code> and <code>setup</code>. The method returns a randomly generated
2071 UUIDv4 that is used to identify these callbacks and allows them to be removed
2072 via <code>.remove()</code>.</p>
2073 <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>
2074 <p>Removes all callbacks for a media query that match the UUIDv4 that was previously
2075 obtained from the call to <code>.on()</code>.</p>
2076 <h3 id="isquery-string-boolean"><code>is(query: string): boolean</code><a class="headerlink" href="#isquery-string-boolean" title="Permanent link">#</a></h3>
2077 <p>Tests if the provided media query currently matches and returns true on match.</p>
2078 <h3 id="scrolldisable"><code>scrollDisable()</code><a class="headerlink" href="#scrolldisable" title="Permanent link">#</a></h3>
2079 <p>Temporarily prevents the page from being scrolled, until <code>.scrollEnable()</code> is
2080 called.</p>
2081 <h3 id="scrollenable"><code>scrollEnable()</code><a class="headerlink" href="#scrollenable" title="Permanent link">#</a></h3>
2082 <p>Enables page scrolling again, unless another pending action has also prevented
2083 the page scrolling.</p>
2084 <h2 id="environment"><code>Environment</code><a class="headerlink" href="#environment" title="Permanent link">#</a></h2>
2085 <div class="admonition warning">
2086 <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>
2087 </div>
2088 <p>Sometimes it may be necessary to alter the behavior of your code depending on
2089 the browser platform (e. g. mobile devices) or based on a specific browser in
2090 order to work-around some quirks.</p>
2091 <h3 id="browser-string"><code>browser(): string</code><a class="headerlink" href="#browser-string" title="Permanent link">#</a></h3>
2092 <p>Attempts to detect browsers based on their technology and supported CSS vendor
2093 prefixes, and although somewhat reliable for major browsers, it is highly
2094 recommended to use feature detection instead.</p>
2095 <p>Possible values:
2096  - <code>chrome</code> (includes Opera 15+ and Vivaldi)
2097  - <code>firefox</code>
2098  - <code>safari</code>
2099  - <code>microsoft</code> (Internet Explorer and Edge)
2100  - <code>other</code> (default)</p>
2101 <h3 id="platform-string"><code>platform(): string</code><a class="headerlink" href="#platform-string" title="Permanent link">#</a></h3>
2102 <p>Attempts to detect the browser platform using user agent sniffing.</p>
2103 <p>Possible values:
2104  - <code>ios</code>
2105  - <code>android</code>
2106  - <code>windows</code> (IE Mobile)
2107  - <code>mobile</code> (generic mobile device)
2108  - <code>desktop</code> (default)</p>
2109
2110
2111
2112
2113 <hr>
2114 <div class="md-source-date">
2115   <small>
2116
2117       Last update: 2021-01-08
2118
2119   </small>
2120 </div>
2121
2122
2123
2124
2125
2126
2127
2128
2129             </article>
2130           </div>
2131         </div>
2132       </main>
2133
2134
2135 <footer class="md-footer">
2136
2137     <nav class="md-footer__inner md-grid" aria-label="Footer">
2138
2139         <a href="../new-api_dialogs/" class="md-footer__link md-footer__link--prev" rel="prev">
2140           <div class="md-footer__button md-icon">
2141             <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>
2142           </div>
2143           <div class="md-footer__title">
2144             <div class="md-ellipsis">
2145               <span class="md-footer__direction">
2146                 Previous
2147               </span>
2148               Dialogs
2149             </div>
2150           </div>
2151         </a>
2152
2153
2154         <a href="../new-api_ui/" class="md-footer__link md-footer__link--next" rel="next">
2155           <div class="md-footer__title">
2156             <div class="md-ellipsis">
2157               <span class="md-footer__direction">
2158                 Next
2159               </span>
2160               User Interface
2161             </div>
2162           </div>
2163           <div class="md-footer__button md-icon">
2164             <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>
2165           </div>
2166         </a>
2167
2168     </nav>
2169
2170   <div class="md-footer-meta md-typeset">
2171     <div class="md-footer-meta__inner md-grid">
2172       <div class="md-footer-copyright">
2173
2174           <div class="md-footer-copyright__highlight">
2175             Copyright © 2020 WoltLab GmbH
2176           </div>
2177
2178         Made with
2179         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2180           Material for MkDocs
2181         </a>
2182
2183       </div>
2184       <div class="md-footer-copyright">
2185         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2186         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2187 </div>
2188     </div>
2189   </div>
2190 </footer>
2191
2192     </div>
2193     <div class="md-dialog" data-md-component="dialog">
2194       <div class="md-dialog__inner md-typeset"></div>
2195     </div>
2196     <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>
2197
2198
2199       <script src="../../assets/javascripts/bundle.5cf3e710.min.js"></script>
2200
2201
2202   </body>
2203 </html>