Meta tags:
description= JavaScript Screen Orientation API: screen.orientation lesen, das change-Event nutzen und die Ausrichtung mit Fullscreen sperren oder entsperren.;
Headings (most frequently used words):
die, aktuelle, ausrichtung, bildschirmausrichtung, javascript, screen, orientation, api, lesen, auf, ausrichtungsänderungen, reagieren, sperren, entsperren, best, practices, verwandte, themen, übungen, prüfen,
Text of the page (most frequently used words):
und (60), #orientation (42), die (40), api (36), screen (32), das (29), sie (29), #javascript (21), dom (19), ausrichtung (18), lernen (15), den (14), lock (14), auf (13), mit (12), oder (12), ein (12), sperren (11), event (10), wird (10), landscape (10), für (9), lesen (9), eine (9), script (9), html (8), web (8), der (8), div (8), document (8), methoden (8), css (7), aktuelle (7), fullscreen (7), button (7), unlock (7), function (7), string (7), primary (7), tools (6), bildschirmausrichtung (6), vollbild (6), des (6), bei (6), layout (6), btn (6), ist (6), portrait (6), change (6), objekt (6), w3docs (5), code (5), übungen (5), modus (5), kann (5), dem (5), and (5), promise (5), meisten (5), browser (5), einem (5), kopieren (5), getelementbyid (5), funktioniert (5), error (5), async (5), angle (5), type (5), eigenschaften (5), events (5), formatter (5), color (5), alle (4), über (4), json (4), generator (4), reagieren (4), ermöglicht (4), werden (4), sich (4), rotation (4), window (4), verwenden (4), diese (4), media (4), sperre (4), immer (4), addeventlistener (4), console (4), bildschirm (4), app (4), await (4), wenn (4), nur (4), von (4), the (4), shadow (4), fetch (4), einführung (4), encoder (3), editor (3), quizze (3), php (3), best (3), entsperren (3), this (3), page (3), prüfen (3), webanwendungen (3), einen (3), sind (3), kontext (3), abgelehnt (3), einer (3), click (3), zurück (3), aus (3), var (3), nicht (3), dokument (3), showorientation (3), check (3), flag (3), data (3), objekte (3), funktionen (3), operatoren (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), probier (2), python (2), java (2), git (2), bücher (2), snippets (2), verwandte (2), themen (2), practices (2), ausrichtungsänderungen (2), history (2), push (2), geräten (2), erzwingen (2), gerätebildschirms (2), änderungen (2), behandelt (2), welche (2), aussagen (2), zutreffend (2), ändern (2), scrolling (2), vor (2), dass (2), sicheren (2), https (2), benötigt (2), localhost (2), styling (2), bevorzugen (2), ohne (2), aktive (2), anfrage (2), ablehnung (2), desktops (2), verlassen (2), nie (2), darauf (2), behandeln (2), unlockorientation (2), log (2), gerät (2), gibt (2), vollbilds (2), unterstützt (2), desktop (2), zum (2), davon (2), ausrichtungs (2), wert (2), browsern (2), array (2), muss (2), locklandscape (2), catch (2), try (2), zwei (2), voraussetzungen (2), spiel (2), querformat (2), videoplayer (2), alte (2), strong (2), status (2), current (2), load (2), output (2), neu (2), selbst (2), canvas (2), displayorientation (2), alert (2), greifen (2), geräts (2), secondary (2), möchten (2), benötigen (2), müssen (2), nutzen (2), workers (2), file (2), suche (2), muster (2), quantoren (2), anker (2), flags (2), components (2), animationen (2), url (2), microtasks (2), formulare (2), benutzerdefinierte (2), ereignisse (2), styles (2), klassen (2), arrays (2), generatoren (2), advanced (2), fehlerbehandlung (2), promises (2), chaining (2), erweitern (2), handling (2), class (2), prototypes (2), interaktive (2), elemente (2), property (2), object (2), arrow (2), new (2), syntax (2), variablen (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, entwickler, gemacht, sprache, datenschutzrichtlinie, kontakt, uns, unternehmen, üben, kostenlose, tutorials, beispiele, seit, 2014, next, previous, yes, was, helpful, helligkeit, steuern, können, orientationchange, erkannt, bestimmten, erkennen, übung, viewport, dimensionen, sizes, erforderlich, bevor, gesperrt, aufruf, denken, daran, feature, detection, durchführen, behalten, verhalten, ausrichtungswert, tatsächlich, wechseln, zuerst, abgelehntes, ignorieren, unbehandelten, konsole, fangen, schlägt, fehl, einstellungen, deaktiviert, daher, kernfunktionalität, kombinieren, jede, übersteht, als, effort, unlocked, hebt, zuvor, gesetzte, lässt, wieder, folgen, synchron, nichts, löscht, ebenfalls, automatisch, hauptsächlich, mobilen, plattformen, insbesondere, chrome, android, stellen, bereit, lehnen, jedoch, gehen, fehlschlagen, gestalten, jeder, übergebene, einzelner, sein, einigen, akzeptabler, werte, durch, benutzergeste, ausgelöst, wie, etwa, oben, gezeigten, klick, message, failed, locked, then, requestfullscreen, enter, first, locking, requires, aufgelöst, angewendet, plattform, verbietet, nach, erfolgreichen, aufrufen, außerhalb, ähnlichem, notsupportederror, befinden, wichtig, zwingt, gewählte, richtige, werkzeug, beim, abspielen, kippen, soll, moderne, ersatz, veraltete, zahl, neuem, onorientationchange, update, whenever, device, rotates, textcontent, löst, wann, wechselt, lauschen, logik, erneut, auszuführen, zeichnen, pausieren, größen, berechnen, enthält, keine, zusätzlichen, daten, neuen, zustand, handler, aufrecht, gehaltenen, mobiltelefon, sehen, typischerweise, winkel, vierteldrehung, gedreht, monitore, melden, not, supported, else, read, direkt, drehung, grad, relativ, zur, natürlichen, 270, 180, beschreibt, besitzt, schreibgeschützte, anpassen, regel, überhaupt, kein, queries, ausführen, alternative, bereitgestellt, globalen, verfügbar, screenorientation, einschränkungen, sicherer, sinnvolle, fallbacks, freigeben, deren, seite, vier, dinge, wissen, webseite, unterstützten, bestimmte, nützlich, spiele, kamera, apps, alles, abhängt, hoch, gehalten, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, webgl, battery, animations, apis, regexp, sticky, position, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, name, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, anfang, ende, unicode, klasse, zeichenklassen, regex, regular, expressions, slots, komposition, template, element, custom, elements, animation, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, server, sent, xmlhttprequest, ursprungsübergreifende, anfragen, abbruch, download, fortschritt, formdata, network, requests, references, loop, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, ressourcen, laden, onload, onerror, scripts, defer, domcontentloaded, beforeunload, unload, resource, loading, ereignis, methode, submit, clipboard, input, cut, copy, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, auslösen, standard, browseraktionen, delegation, bubbling, capturing, introduction, koordinaten, fenstergrößen, scrollen, verändern, attribute, knoteneigenschaften, typ, tag, inhalt, getelement, queryselector, browserumgebung, spezifikationen, streams, filereader, blob, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, kommunikation, popups, frames, windows, polyfills, transpiler, bigint, currying, eval, proxy, reflect, miscellaneous, dynamische, imports, export, import, module, modules, iteratoren, generators, iteration, promisification, callbacks, fehler, mixins, checking, instanceof, eingebaute, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, native, prototypale, vererbung, inheritance, widgets, performance, optimierung, debugging, barrierefreiheit, kompatibilität, manipulationsbibliotheken, fortgeschrittene, techniken, manipulationstechniken, traversieren, arbeiten, manipulieren, auswählen, knoten, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, settimeout, setinterval, nfe, globales, scope, rest, parameter, spread, rekursion, stack, tojson, datum, uhrzeit, destructuring, assignment, keys, values, entries, weakmap, weakset, map, set, iterables, strings, math, zahlen, primitiven, types, optional, konstruktor, operator, primitiv, konvertierung, symbol, typen, garbage, collection, objektmethoden, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, use, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,
Text of the page (random words):
javascript screen orientation api w3docs w3docs bücher html lernen css lernen javascript lernen git lernen java lernen php lernen python lernen kurse quizze übungen snippets tools general tools html editor password generator html encoder code diff json beautifier alle 13 color tools color picker color converter color mixer color hex colors hsl alle 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder alle 19 code formatters javascript formatter css formatter html formatter json formatter php formatter w3docs durchsuchen k de english en deutsch de русский ru français fr español es português pt italiano it anmelden javascript lernen javascript basic einführung javascript verwenden js kommentare js mit dom js use strict js variablen js datentypen js typkonvertierungen js interaktive funktionen js operatoren js vergleichsoperatoren js logische operatoren js nullish coalescing js bedingte operatoren js switch js schleifen js funktionen js funktionsausdrücke js arrow functions js es6 objects the basics js objects js objekte kopieren js objektmethoden this js garbage collection js symbol typen js objekt zu primitiv konvertierung js konstruktor operator new js optional chaining data types js methoden von primitiven js zahlen js math js strings js arrays js array methoden js iterables js map und set js weakmap und weakset js object keys values entries js destructuring assignment js datum und uhrzeit js json methoden tojson advanced functions js rekursion und stack js rest parameter und spread syntax js variablen scope js das alte var js globales objekt js function objekt nfe js die new function syntax js settimeout und setinterval js dekoratoren und weiterleitung call apply js debounce throttle js function binding js arrow funktionen vertieft js closures object properties configuration js property flags und deskriptoren js property getter und setter javascript html dom dom einführung die dom knoten dom elemente auswählen den dom manipulieren arbeiten mit styles im dom event handling im dom dom traversieren dom manipulationstechniken formulare im dom verwenden fortgeschrittene dom techniken dom manipulationsbibliotheken dom browser kompatibilität dom barrierefreiheit debugging und tools performance optimierung interaktive elemente und widgets prototypes inheritance js prototypale vererbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api javascript screen orientation api javascript screen orientation api screen orientation lesen das change event nutzen und die ausrichtung mit fullscreen sperren oder entsperren die screen orientation api ermöglicht es einer webseite die aktuelle ausrichtung des geräts zu lesen auf änderungen zu reagieren und auf unterstützten geräten den bildschirm auf eine bestimmte ausrichtung zu sperren sie ist nützlich für spiele videoplayer kamera apps und alles bei dem das layout davon abhängt ob das gerät im hoch oder querformat gehalten wird diese seite behandelt die vier dinge die sie wissen müssen um sie zu nutzen die aktuelle ausrichtung mit screen orientation lesen deren type und angle auf rotation mit dem change event reagieren eine ausrichtung mit lock erzwingen und mit unlock freigeben die voraussetzungen und einschränkungen ein sicherer kontext fullscreen zum sperren und sinnvolle fallbacks die api wird über screen orientation bereitgestellt ein screenorientation objekt das am globalen screen objekt verfügbar ist es funktioniert nur in einem sicheren kontext https oder localhost css alternative wenn sie nur das layout bei rotation anpassen möchten benötigen sie in der regel überhaupt kein javascript verwenden sie css media queries media orientation portrait und media orientation landscape greifen sie auf diese api zurück wenn sie den ausrichtungs wert im script benötigen code bei rotation ausführen möchten oder den bildschirm sperren müssen die aktuelle ausrichtung lesen screen orientation besitzt zwei schreibgeschützte eigenschaften type ein string der die ausrichtung beschreibt portrait primary portrait secondary landscape primary oder landscape secondary angle die drehung in grad relativ zur natürlichen ausrichtung des geräts 0 90 180 oder 270 aktuelle ausrichtung prüfen um die aktuelle ausrichtung zu lesen greifen sie direkt auf diese eigenschaften zu script read the current screen orientation function displayorientation if screen orientation alert type screen orientation type n angle screen orientation angle else alert screen orientation api is not supported document getelementbyid check btn addeventlistener click displayorientation script div button id check btn check orientation button div kopieren probier es selbst bei einem aufrecht gehaltenen mobiltelefon sehen sie typischerweise portrait primary mit einem winkel von 0 um eine vierteldrehung gedreht wird es zu landscape primary bei 90 die meisten desktop monitore melden landscape primary und ändern sich nie auf ausrichtungsänderungen reagieren das screen orientation objekt löst ein change event aus wann immer die ausrichtung wechselt lauschen sie darauf um layout logik erneut auszuführen ein canvas neu zu zeichnen ein spiel zu pausieren oder größen neu zu berechnen das event selbst enthält keine zusätzlichen daten lesen sie den neuen zustand aus screen orientation im handler script var output document getelementbyid orientation status function showorientation output textcontent screen orientation type screen orientation angle update on load and whenever the device rotates showorientation screen orientation addeventlistener change showorientation script div p current orientation strong id orientation status strong p div kopieren das change event ist der moderne ersatz für das alte window onorientationchange event und die veraltete window orientation zahl bevorzugen sie screen orientation in neuem code die bildschirmausrichtung sperren screen orientation lock zwingt den bildschirm in eine gewählte ausrichtung es ist das richtige werkzeug für ein vollbild spiel das nur im querformat funktioniert oder einen videoplayer der beim abspielen nicht kippen soll zwei voraussetzungen sind wichtig das dokument muss sich im vollbild modus befinden das sperren funktioniert nur nach einer erfolgreichen fullscreen api anfrage das aufrufen von lock außerhalb des vollbilds wird in den meisten browsern mit einem notsupportederror oder ähnlichem abgelehnt lock gibt ein promise zurück es wird aufgelöst wenn die sperre angewendet wird und abgelehnt wenn die ausrichtung nicht unterstützt wird die plattform es verbietet die meisten desktops oder das dokument nicht im vollbild ist behandeln sie die ablehnung immer script var app document getelementbyid app async function locklandscape try 1 enter fullscreen first locking requires it await app requestfullscreen 2 then lock to landscape await screen orientation lock landscape primary console log orientation locked to landscape catch error console error lock failed error message document getelementbyid lock btn addeventlistener click locklandscape script div id app button id lock btn go fullscreen lock to landscape button div kopieren der an lock übergebene ausrichtungs string kann ein einzelner wert sein portrait landscape portrait primary oder in einigen browsern ein array akzeptabler werte das sperren muss durch eine benutzergeste ausgelöst werden wie etwa den oben gezeigten button klick wo es funktioniert das sperren wird hauptsächlich auf mobilen plattformen unterstützt insbesondere chrome android die meisten desktop browser stellen screen orientation zum lesen bereit lehnen lock jedoch ab gehen sie immer davon aus dass es fehlschlagen kann und gestalten sie ein layout das in jeder ausrichtung funktioniert die bildschirmausrichtung entsperren screen orientation unlock hebt eine zuvor gesetzte sperre auf und lässt den bildschirm dem gerät wieder folgen es ist synchron und gibt nichts zurück das verlassen des vollbilds löscht eine aktive sperre ebenfalls automatisch script function unlockorientation if screen orientation screen orientation unlock screen orientation unlock console log orientation unlocked document getelementbyid unlock btn addeventlistener click unlockorientation script div button id unlock btn unlock orientation button div kopieren best practices behandeln sie das sperren als best effort es schlägt auf den meisten desktops fehl und kann in den browser einstellungen deaktiviert werden verlassen sie sich daher nie darauf für die kernfunktionalität kombinieren sie es mit einem layout das jede ausrichtung übersteht fangen sie das promise immer ab ein abgelehntes lock das sie ignorieren wird zu einer unbehandelten ablehnung in der konsole wechseln sie zuerst in den vollbild modus eine sperre ohne eine aktive vollbild anfrage wird abgelehnt bevorzugen sie css für das layout verwenden sie media orientation für das styling und behalten sie diese api für verhalten vor das den ausrichtungswert tatsächlich in javascript benötigt feature detection durchführen prüfen sie if screen orientation und if screen orientation lock vor dem aufruf und denken sie daran dass die api einen sicheren kontext https oder localhost benötigt verwandte themen javascript fullscreen api erforderlich bevor die ausrichtung gesperrt werden kann javascript window sizes and scrolling viewport dimensionen lesen die sich bei rotation ändern übungen übung welche aussagen über die javascript screen orientation api sind zutreffend welche aussagen über die javascript screen orientation api sind zutreffend sie ermöglicht es webanwendungen die aktuelle ausrichtung des gerätebildschirms zu erkennen die api ermöglicht es webanwendungen die bildschirmausrichtung auf einen bestimmten modus zu sperren änderungen der bildschirmausrichtung können mit dem orientationchange event erkannt und behandelt werden die api kann die helligkeit des gerätebildschirms steuern sie ermöglicht es webanwendungen den vollbild modus auf geräten zu erzwingen prüfen was this page helpful yes no previous push api next history api on this page die aktuelle ausrichtung lesen auf ausrichtungsänderungen reagieren die bildschirmausrichtung sperren die bildschirmausrichtung entsperren best practices verwandte themen übungen w3docs kostenlose tutorials beispiele übungen snippets und quizze für das web seit 2014 bücher html lernen css lernen javascript lernen git lernen java lernen php lernen python lernen üben übungen quizze probier editor tools html editor password generator html encoder code diff json beautifier unternehmen über uns kontakt datenschutzrichtlinie sprache english deutsch русский français español português italiano 2026 w3docs alle rechte vorbehalten für entwickler gemacht
|
