[JS] jQuery Portrait/Landscape Modus mithilfe von window.orientation

[CaptainSmile]

Hallo liebe Community,
ich war jetzt schon längere Zeit nichtmehr aktiv, allerdings habe ich eine durchaus wichtige Frage bzw. ein durchaus wichtiges Problem.
Für ein größeres Schulprojekt in einem Projektkurs arbeite ich derzeit an einer Internetseite, die auch soweit funktioniert. Es fehlen noch einige kleinere Fehler und unter anderem auch eine Mobile Anpassung, da ich aber das Design so konstruiert habe, dass die Seite ausschließlich im Portrait Modus dargestellt werden soll (also Hochkant), muss ich nun einen kleinen Script haben, welcher dem Nutzer sagt, er soll das Handy/Tablet wieder zurück drehen. Soweit so gut.
Da ich Javascript + jQuery nur nebenbei nutze und somit nur Grundlagen und Syntax kenne, habe ich mich nach einer Lösung umgeschaut. Ich bin auch fündig geworden:

Allerdings funktioniert es einfach nicht. Wahrscheinlich mache ich einfach einen Fehler, aber diesen finde ich schlicht und ergreifend nicht.

        $(document).ready(function($){
            var check_orientation = function() {
                if (typeof window.orientation == 'undefined') {
                    // not a mobile device
                    return true;
                }

                if (Math.abs(window.orientation) != 0) {
                    // landscape mode
                    $('#overlay').fadeIn().bind('touchstart', function(e) {
                        e.preventDefault();
                    });
                    return false;
                } else {
                    // portrait mode
                    $('#overlay').fadeOut();
                    return true;
                }
            };

            $('body').bind('orientationchange', function(e) {
                check_orientation();
            });
            check_orientation();
        });

[Menan]

Eventuell hilft dir das hier weiter:



Musst eben deinen Pagecontent in nem Div haben, damit das funktioniert... Sollte ja aber kein Problem sein das umzusetzen!

[Icetea]

Ist meines Wissens nach auch anderweitig möglich, wenn es das ist, für was ich es halte. Kannst Dir es ja mal anschauen und uns mitteilen, ob es so geklappt hat.



In Chrome ist es möglich, bei den anderen Browsern weiß ich es nicht, lässt sich aber leicht überprüfen.

Liebe Grüße,
Icetea'

[CaptainSmile]

Vielen Dank für eure Hilfe. Habe es jetzt doch lieber selber geschrieben bzw. herausgefunden. Funktioniert super, habe bisher keine inkompatibilität im Bezug auf irgendwelche Browser entdecken können.

Für alle, die es interessiert:

        $(document).ready(function() {
            // only allow portrait mode
            if (typeof window.orientation == 'undefined') {
                // not a mobile device
                return true;
            }

            if (Math.abs(window.orientation) != 0) {
                // landscape at loading page
                $('#overlay').css("display", "block");
            }

            window.addEventListener("orientationchange", function() {
                // check window orientation
                if (Math.abs(window.orientation) != 0) {
                    // landscape mode (black)
                    $('#overlay').css("display", "block").bind("touchstart", function(e) {
                        e.preventDefault();
                    });
                } else {
                    // portrait mode
                    $('#overlay').fadeOut();
                }
            }, false);
        });