Detect Mobile Orientation (Overlay for Portrait)

orientation.svg

portraitoverlay.js

  var updateorientation = function (){

    var classname = '',
    mql = window.matchMedia("(orientation: portrait)"),
    top = 100;

    function handleOrientationChange(mql) {
      if (mql.matches) {
        if ($('#overlay').length === 0) {
          window.scrollTo(0, 1);
          $('body').append('<div id="overlay" style="width: 100%; height:' + $(document).height() + 'px; max-height: 100%; max-width: 100%; position: absolute; background-color: white; top: 0; left: 0; z-index: 999999999999; background-image: url(/assets/images/orientation.svg); background-repeat: no-repeat; background-position: center center; background-size: 20%;"><span style="top: ' + top + 'px; margin-top: 30%; float: none; text-align: center; display: block;">Bitte halten Sie Ihr Tablet quer.</span></div>');
        }
      } else {
        $('#overlay').remove();
      }
    }

    var mql = window.matchMedia("(orientation: portrait)");
    mql.addListener(handleOrientationChange);
    handleOrientationChange(mql);

    if (mql.matches) {
      if ($('#overlay').length === 0) {
        window.scrollTo(0, 1);
        $('body').append('<div id="overlay" style="width: 100%; height:' + $(document).height() + 'px; max-height: 100%; max-width: 100%; position: absolute; background-color: white; top: 0; left: 0; z-index: 999999999999; background-image: url(/assets/images/orientation.svg); background-repeat: no-repeat; background-position: center center; background-size: 20%;"><span style="top: ' + top + 'px; margin-top: 30%; float: none; text-align: center; display: block;">Bitte halten Sie Ihr Tablet quer.</span></div>');
      }
    } else {
      $('#overlay').remove();
    }

  };

  updateorientation();