html - 在响应式网站中为移动用户禁用横向定位

我有一个网站，这是响应（有一个单独的移动媒体查询）。它在纵向上看起来很棒，但在横向上却很糟糕，所以我们希望在修复之前禁用移动设备的横向（至少是android和ios）。我试着用vieport meta tag来实现这一点，但效果不大，只是显示了正确的缩放比例，不允许用户缩放，但仍然允许更改方向。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

我怎样才能达到这样的效果呢？

最佳答案

我唯一能想到的解决办法，就是根据window.orientation旋转你的身体或包裹物。

$(window).bind("orientationchange", function(){
    var orientation = window.orientation;
    var new_orientation = (orientation) ? 0 : 180 + orientation;
    $('body').css({
        "-webkit-transform": "rotate(" + new_orientation + "deg)"
    });
});

这是一个危险的方法，但认为这是唯一的方法。
也可以绑定到窗口大小调整事件。

$(window).bind("resize", function()

关于html - 在响应式网站中为移动用户禁用横向定位，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26424067/