Отключить ландшафтную ориентацию для мобильных пользователей на отзывчивом веб-сайте

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