1

I used a .js to avoid landscape view from mobile device. I edited a white full-screen image saying "this site is not thought to be viewed in landscape mode, please turn your device" to be shown each time I rotate my device from portrait to landscape. It works except when I load a page and I'm already in landscape mode. Any idea on how to fix it? Thanks

<script>
(function() {
    'use strict';

    var isMobile = {
        Android: function() {
            return navigator.userAgent.match(/Android/i);
        },
        BlackBerry: function() {
            return navigator.userAgent.match(/BlackBerry/i);
        },
        iOS: function() {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        },
        Opera: function() {
            return navigator.userAgent.match(/Opera Mini/i);
        },
        Windows: function() {
            return navigator.userAgent.match(/IEMobile/i);
        },
        any: function() {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
        }
    };
    if (isMobile.any()) {
        doOnOrientationChange();
        window.addEventListener('resize', doOnOrientationChange, 'false');
    }

    function doOnOrientationChange() {
        var a = document.getElementById('alert');
        var b = document.body;
        var w = b.offsetWidth;
        var h = b.offsetHeight;
        (w / h > 1) ? (a.className = 'show', b.className = 'full-body') : (a.className = 'hide', b.className = '');
    }
})();
</script>

Update :

I tried adding window.orientation to the script but something is wrong

if (orientation === "landscape-primary") {
    doOnOrientationChange();
    window.addEventListener('resize',doOnOrientationChange,'false');
}

window.onload(doOnOrientationChange());
Luigi
  • 151
  • 1
  • 11
  • 2
    How about calling the script `onload`? – Kolja May 31 '15 at 21:38
  • it sounds good! but I don't know how to do! – Luigi May 31 '15 at 21:49
  • This should answer: http://stackoverflow.com/questions/588040/window-onload-vs-document-onload – Kolja May 31 '15 at 21:50
  • sorry, I'm not able to add this script, where do I have to add it in the code? However thanks for the answer! – Luigi May 31 '15 at 21:57
  • look into `window.orientation` https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation if this value is landscape initially, call your `doOnOrientationChange()` method – mpallansch May 31 '15 at 21:59
  • Thanks, I tried but without success. I'm going to post the code that I tried in the question – Luigi May 31 '15 at 22:08
  • How about `window.onload(doOnOrientationChange());` outside your function – Kolja Jun 01 '15 at 06:35
  • Thanks, I tried to add `window.onload(doOnOrientationChange());` (I uploaded the question with this string) but it still doesn't work! `@ koljanep` – Luigi Jun 01 '15 at 20:31

1 Answers1

1

You need to move the doOnOrientationChange() function outside of the other one, and then call it on pageload. Like this it should work:

<script>
function checkMobile() {
    var isMobile = false;
    if (navigator.userAgent.match(/Android/i)
     || navigator.userAgent.match(/BlackBerry/i)
     || navigator.userAgent.match(/iPhone|iPad|iPod/i)
     || navigator.userAgent.match(/Opera Mini/i)
     || navigator.userAgent.match(/IEMobile/i)) {
            isMobile = true;
        }
    return isMobile;
}
function doOnOrientationChange() {
    var a = document.getElementById('alert');
    var b = document.body;
    var w = b.offsetWidth;
    var h = b.offsetHeight;
    if (checkMobile()) {
        (w / h > 1) ? (a.className = 'show', b.className = 'full-body') : (a.className = 'hide', b.className = '');
    } else {
        a.className = 'hide';
        b.className = '';
    }
}
window.onload = doOnOrientationChange();
window.addEventListener('resize', doOnOrientationChange, 'false');
</script>
Kolja
  • 860
  • 4
  • 10
  • 30
  • Thank you very much `@koljanep`. I tried your suggested code but something weird happened. I think it's due to the fact I'm using FullPage.js and it interferes. With this code I cannot scroll the pages in the mobile view and I can't see the site neither from a computer because of the appearing of the white full page saying "this site is not thought to be viewed in landscape mode, please turn your device". – Luigi Jun 02 '15 at 21:09
  • Is there someone able to help me? – Luigi Jun 04 '15 at 23:39
  • @Luigi what happens now with this script? You say it is not working. Does it do anything? – Kolja Jun 05 '15 at 09:08
  • the white alert splash page (inserted with the HTML `
    Qhis site is not thought to be viewed in landscape mode, please turn your device
    `) doesn't appear no more neither turning the device from portrait from landscape neither loading the page in landscape view     – Luigi Jun 05 '15 at 12:51
  • @Luigi I edited my answer once more. I had more time so I tested it and for the it works. Let me know – Kolja Jun 05 '15 at 18:24
  • @Luigi where did you put your js code? in the header or in the body? – Kolja Jun 06 '15 at 13:20
  • @kiljanep in the end of the body – Luigi Jun 06 '15 at 14:04