Question

我想＆＃39;旋转＆＃39;当用户将手机放在风景中时，我的网站会在90度以下，以阻止他们尽可能地使用手机上的风景。这在javascript中是否可行（我会在<head>部分中运行）？

由于

Answer 1

非jQuery方式。除非你真的需要，否则不要将页面重量增加90kb！

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)";
    }
});

另外，要注意这个用户体验。它可能会严重惹恼您的用户，除非他们期待它。是绝对必要的吗？

Answer 2

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

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

不要忘记添加jquery库。

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

编辑：

如果您只使用javascript：

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

防止用户在手机上观看景观

2 个答案: