强制横向模式锁定仅允许纵向 [重复]答案

【问题标题】：Force Landscape mode lock allowing Portrait Only [duplicate]强制横向模式锁定仅允许纵向 [重复]
【发布时间】：2015-08-20 12:03:44
【问题描述】：

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

【问题讨论】：

您在一小时前发布了Lock Device Landscape Orientation。这个问题和那个有什么不同？

标签： javascript android css jquery-mobile

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

【讨论】：