jQuery Portrait/Landscape Modus mithilfe von window.orientation

01/12/2016 16:04 CaptainSmile#1
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: [Only registered and activated users can see links. Click Here To Register...]

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

Code:
        $(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();
        });
01/12/2016 20:04 Menan#2
Eventuell hilft dir das hier weiter:

[Only registered and activated users can see links. Click Here To Register...]

Musst eben deinen Pagecontent in nem Div haben, damit das funktioniert... Sollte ja aber kein Problem sein das umzusetzen!
01/13/2016 23:12 Icetea#3
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.

[Only registered and activated users can see links. Click Here To Register...]

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'
01/15/2016 16:37 CaptainSmile#4
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:
Code:
        $(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);
        });