Detect Mobile Orientation (Overlay for Portrait)

orientation.svg

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iMzJweCIgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHdpZHRoPSIzMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5NiA5NikiPjxwYXRoIGQ9Ik0tNjUuMzExLTkyLjcwMmMwLTAuODU3LTAuNjk1LTEuNTUxLTEuNTUxLTEuNTUxaC0xMS4xMzZjLTAuODU2LDAtMS41NTMsMC42OTQtMS41NTMsMS41NTF2MTEuNjAxaDAuODg1di05Ljg0OGgxMi40NzIgICB2MTcuODQ0aC0xLjc2M3Y0LjQ0NWgxLjA5NWMwLjg1NiwwLDEuNTUxLTAuNjk1LDEuNTUxLTEuNTUxVi05Mi43MDJMLTY1LjMxMS05Mi43MDJ6IE0tNjcuNzMtOTIuMzdoLTkuMzk4ICAgYy0wLjE4LDAtMC4zMjYtMC4xNDYtMC4zMjYtMC4zMjZjMC0wLjE4LDAuMTQ2LTAuMzI2LDAuMzI2LTAuMzI2aDkuMzk4YzAuMTgsMCwwLjMyNSwwLjE0NiwwLjMyNSwwLjMyNiAgIEMtNjcuNDA1LTkyLjUxNi02Ny41NTMtOTIuMzctNjcuNzMtOTIuMzd6Ii8+PHBhdGggZD0iTS02OS4wOTgtNjcuMjk4di0xMS4xMzZjMC0wLjg1Ny0wLjY5NC0xLjU1MS0xLjU1MS0xLjU1MWgtMjIuNDljLTAuODU2LDAtMS41NTEsMC42OTQtMS41NTEsMS41NTF2MTEuMTM2ICAgYzAsMC44NTYsMC42OTMsMS41NTEsMS41NTEsMS41NTFoMjIuNDlDLTY5Ljc5Mi02NS43NDctNjkuMDk4LTY2LjQ0MS02OS4wOTgtNjcuMjk4eiBNLTcwLjMyNy03Ny41NjZ2OS4zOTkgICBjMCwwLjE4LTAuMTQ2LDAuMzI2LTAuMzI1LDAuMzI2Yy0wLjE4MywwLTAuMzI2LTAuMTQ2LTAuMzI2LTAuMzI2di05LjM5OWMwLTAuMTgsMC4xNDUtMC4zMjYsMC4zMjYtMC4zMjYgICBDLTcwLjQ3NS03Ny44OTMtNzAuMzI3LTc3Ljc0Ni03MC4zMjctNzcuNTY2eiBNLTkzLjU2OC03Mi44NjZjMC0wLjUxNSwwLjQxOC0wLjkzMywwLjkzNC0wLjkzM3MwLjkzNCwwLjQxOCwwLjkzNCwwLjkzMyAgIHMtMC40MTgsMC45MzMtMC45MzQsMC45MzNTLTkzLjU2OC03Mi4zNTItOTMuNTY4LTcyLjg2NnogTS05MC4yNDMtNjYuNjMxdi0xMi40NzFILTcyLjR2MTIuNDcxSC05MC4yNDN6Ii8+PC9nPjwvc3ZnPg==

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();