12/25/2014

Window orientation detection

Ref

I think the following codes would be useful when I want to make iDangerous swiper responsive to toggle mode between vertical and horizontal.

CSS3 :
@media screen and (orientation:landscape)
{
   body
   {
      background: red;
   }
}



window.watchMedia closely resembles CSS syntax:
if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode
}

if (window.matchMedia("(orientation: landscape)").matches) {
   // you're in LANDSCAPE mode
}

Other (dirty) fixes.
if (screen.height > screen.width){
    alert("Please use Landscape!");
}

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
  // Announce the new orientation number
  alert(window.orientation);
}, false);





No comments: