强制横向模式锁定仅允许纵向

Question

谁能告诉我什么是最好的解决方案，不允许在移动设备上使用横向模式，并强制使用Javascript，Jquery，CSS或任何东西锁定它，同时查看任何网页。

Answer 1

您可以检查宽度是否大于高度，这是景观。

你可以用这种方式检查窗口调整大小是横向的还是纵向的--并相应地操作，就像在整个页面上放置一个固定的div一样。

如下所示：

$(window).resize(function(){  //event onWindowResize
    if($(window).width() < $(window).height()) //So, portrait
        $("<div />").css({
            position: "fixed",
            width: "100%",
            height: "100%",
            top: 0,
            left: 0
        }).addClass("locked-for-portrait").text("Please use our website in landscape mode (turn your phone 90 degrees)").appendTo("body");  //add a fixed div over your page.
    else //So, landscape.
        $(".locked-for-portrait").remove(); //Remove the div - if it's on the page.
});

$(document).ready(function(){
    $(window).resize(); //trigger the resize once on pageload
});

在新的浏览器API中，可以使用网页锁定方向。但目前它仍处于实验阶段，不能在大多数浏览器上运行。(参见https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation)