orientationchange fires before the window resize event, which is not ideal when you need to resize content for the new viewport dimensions. This fix will allow you to handle orientation changes after the page has resized

afterorientationchange

window.addEventListener("orientationchange", function() {
   var orientationChange = function(evt) {
      //Put your code here
      if (window.matchMedia("(orientation: landscape)").matches) {
         alert("landscape");
      }
      else {
         alert("portrait");
      }
      window.removeEventListener('resize', orientationChange);
   }
   window.addEventListener('resize', orientationChange);
}, false);