CODEWITHSUNDEEP
javascripthtmlrotationhead
dwinnbrown
dwinnbrown

Reputation: 4009

Preventing user viewing site in landscape on mobile phone

I would like to 'rotate' my site by 90 deg when the user puts their phone in landscape in order to discourage them from using landscape on a phone as much as possible. Is this possible in javascript (I would run in the <head> section)?

Thanks

Upvotes: 0

Views: 68

Answers (2)

Jonathon Blok
Jonathon Blok

Reputation: 749

The non-jQuery way. Don't increase your page weight by 90kb unless you really need to!

window.addEventListener('resize', function(){
    if (window.innerHeight < window.innerWidth){
         document.body.style.transform = "rotate(90deg)";
         document.body.style.webkitTransform = "rotate(90deg)";
         document.body.style.mozTransform = "rotate(90deg)";
    }
});

Also, beware of the UX of this. It may seriously annoy your users unless they are expecting it. Is it absolutely necessary?

Upvotes: 1

J261
J261

Reputation: 672

$(window).resize(function(){
     if($(this).height() < $(this).width()){
          $("body").css("transform","rotate(90deg)");
     }
});

DOC: https://api.jquery.com/resize/

And don't forget to add the jquery library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

EDIT:

if you are using just javascript:

window.onresize = function(e) {
     var w = this.innerWidth;
     var h = this.innerHeight;
     if(h < w){
          document.getElementsByTagName("body")[0].style.transform = "rotate(90deg)";
     }
};

Upvotes: 0

Related Questions