在响应式网站中为移动用户禁用横向答案

【问题标题】：Disable landscape orientation for mobile users in responsive website在响应式网站中为移动用户禁用横向
【发布时间】：2014-12-12 23:32:30
【问题描述】：

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

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

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

【问题讨论】：

标签： html mobile screen-orientation

【解决方案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()

【讨论】：