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

Question

我有一个响应式网站(有一个单独的移动媒体查询)。它在纵向方向上看起来很棒，但在横向方向上却一团糟，因此我们希望在修复它之前禁用移动设备(至少 Android 和 iOS)的横向方向。我尝试使用 vieport 元标记这样做，但它并没有做太多，除了显示正确的缩放并且不允许用户缩放，但仍然允许改变方向。

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

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

Answer 1

我能想出的唯一解决方法是根据 window.orientation

旋转您的 body 或包装器

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

这是一种冒险的方式，但认为这是唯一的方式。

或者，您可以绑定(bind)到窗口调整大小事件。

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