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