detect and react to orientationchange or resize properly

by Ercan Cicek

HTML

<div class="anim">
Please resize your window or rotate your smart device
</div>

CSS

div {
  font-family: "verdana";
  font-size: 18pt;
}

.anim {
  animation-name: blink;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

JavaScript

$(function init() {
  if (navigator.userAgent.indexOf('iPad') !== -1 || navigator.userAgent.indexOf('CriOS') !== -1) {
    window.addEventListener('orientationchange', function() { setText("orientationchange triggered"); });
  } else {
    $(window).resize(function() { setText("resize triggered"); });
  }
});

function setText(txt) {
  $("div").text(txt).removeClass("anim");
};