Question

So i found some handy code on SO about checking oreintation on android devices, that worked great for loading style sheets based on the rotation of the device, but my issue now is that if the device is already “landscape” (90 / -90 in the JS) then it ignores the rules from the code below, so i need the code below to run onload, i have attempted it but it seems i just cant get it right.

Help please ?

        //detect orientation change
    var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
        window.addEventListener(orientationEvent, function() {
            if(window.orientation == 90) {

                $('link[title=android]')[0].disabled=true;
                $("head").append($("<link title='android_90' rel='stylesheet' href='css/android_90.css' type='text/css' />"));
            } else if (window.oreintation == -90) {

                $('link[title=android]')[0].disabled=true;
                $("head").append($("<link title='android_90' rel='stylesheet' href='css/android_90.css' type='text/css' />"));
            } else if (window.oreintation == 0){

                $('link[title=android_90]')[0].disabled=true;
                $("head").append($("<link title='android' rel='stylesheet' href='css/android.css' type='text/css' />"));
            } else if (window.oreintation == 180){

                $('link[title=android_90]')[0].disabled=true;
                $("head").append($("<link title='android' rel='stylesheet' href='css/android.css' type='text/css' />"));
            }
        }, false);

        //check on window.load
        $(document).ready(function () {
          if(window.orientation == 90) {

                $('link[title=android]')[0].disabled=true;
                $("head").append($("<link title='android_90' rel='stylesheet' href='css/android_90.css' type='text/css' />"));
            } else if (window.oreintation == -90) {

                $('link[title=android]')[0].disabled=true;
                $("head").append($("<link title='android_90' rel='stylesheet' href='css/android_90.css' type='text/css' />"));
            } else if (window.oreintation == 0){

                $('link[title=android_90]')[0].disabled=true;
                $("head").append($("<link title='android' rel='stylesheet' href='css/android.css' type='text/css' />"));
            } else if (window.oreintation == 180){

                $('link[title=android_90]')[0].disabled=true;
                $("head").append($("<link title='android' rel='stylesheet' href='css/android.css' type='text/css' />"));
            }
        });

Answer 1

Ok,

as I said in the comment, there is a condition problem :

if(window.orientation == 90)

with the double =

Don’t be too hard with yourself, Practice makes perfect

Edit : I’m not too sure about : $('link[title=android]')[0]

would have used $('link[title=android]').get(0) instead