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旋转你的身体或包装

$(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()

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

1 个答案: