阻止用户在移动设备上横向查看网站 phone

Question

当用户将他们的 phone 横向放置时，我想 'rotate' 我的网站倾斜 90 度，以尽可能阻止他们在 phone 上使用横向.这在 javascript 中是否可行（我会在 <head> 部分中运行）？

谢谢

Answer 1

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

Answer 2

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

此外，请注意其用户体验。除非他们期望它，否则它可能会严重惹恼您的用户。绝对有必要吗？

阻止用户在移动设备上横向查看网站 phone

Preventing user viewing site in landscape on mobile phone

html

javascript

rotation

head