防止用户在手机上横向查看网站答案

【问题标题】：Preventing user viewing site in landscape on mobile phone防止用户在手机上横向查看网站
【发布时间】：2015-07-06 10:27:45
【问题描述】：

当用户将手机置于横向模式时，我想将我的网站“旋转”90 度，以尽可能阻止他们在手机上使用横向模式。这在 javascript 中是否可行（我会在 <head> 部分运行）？

谢谢

【问题讨论】：

标签： javascript html rotation head

【解决方案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)";
    }
});

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

【讨论】：

【解决方案2】：

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

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

【讨论】：