检测视口方向，如果方向为竖屏，则显示警告消息，提示用户进行操作说明。

$(window).on("orientationchange",function( event ){
    alert(screen.orientation.type)
});

我不同意最受欢迎的答案。使用 screen 而不是 window

    if(screen.innerHeight > screen.innerWidth){
    alert("Please use Landscape!");
}

以下是正确的方法。如果你使用window.height计算，将在Android上遇到困难。当键盘打开时，窗口会缩小。所以请使用屏幕而不是窗口。

screen.orientation.type是一个好的答案，但对于IE浏览器则不是。 https://caniuse.com/#search=screen.orientation

经过一些尝试，我发现旋转一个支持方向感知的设备将总是触发浏览器窗口的 resize 事件。因此，在您的 resize 处理程序中，只需调用一个类似于以下函数的函数：

function is_landscape() {
  return (window.innerWidth > window.innerHeight);
}

iOS在方向改变时不会更新screen.width和screen.height。Android在方向改变时不会更新window.orientation。

我的解决方案：

var isAndroid = /(android)/i.test(navigator.userAgent);

if(isAndroid)
{
    if(screen.width < screen.height){
        //portrait mode on Android
    }
} else {
    if(window.orientation == 0){
        //portrait mode iOS and other devices
    }
}

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    alert("the orientation has changed");
}, false);

var orientation = window.screen.orientation.angle;

这仍然是一项实验性技术，您可以在此处查看浏览器兼容性。

通过以下方式（在js代码中的任何时候）获取方向：

window.orientation

当window.orientation返回0或180时，您处于竖屏模式；当返回90或270时，则为横屏模式。

//see also https://dev59.com/JHRB5IYBdhLWcg3wXmVI
//see also http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
/*
Be wary of this:
While you can just hook up to the standard window resize event, you'll find that in IE, the event is fired once for every X and once for every Y axis movement, resulting in a ton of events being fired which might have a performance impact on your site if rendering is an intensive task.
*/

//setup 
window.onresize = function(event) {
    window_resize(event);
}

//timeout wrapper points with doResizeCode as callback
function window_resize(e) { 
     window.clearTimeout(resizeTimeoutId); 
     resizeTimeoutId = window.setTimeout('doResizeCode();', 10); 
}

//wrapper for height/width check
function doResizeCode() {
    if(window.innerHeight > window.innerWidth){
        alert("Please view in landscape");
    }
}

有些设备不提供 orientationchange 事件，但会触发窗口的 resize 事件：

// Listen for resize changes
window.addEventListener("resize", function() {
    // Get screen size (inner/outerWidth, inner/outerHeight)

}, false);

有一种方法可以使用 screen.orientation 来检测用户是否将设备翻转到纵向模式。

只需要使用以下代码：

screen.orientation.onchange = function () {
     var type = screen.orientation.type;
     if (type.match(/portrait/)) {
         alert('Please flip to landscape, to use this app!');
     }
}

以下是我发现的最佳方法，基于David Walsh的文章（在移动设备上检测方向变化）

if ( window.matchMedia("(orientation: portrait)").matches ) {  
   alert("Please use Landscape!") 
}

解释：

Window.matchMedia() 是一种本地方法，它允许您定义媒体查询规则并在任何时候检查其有效性。

我发现将 onchange 监听器附加到该方法的返回值上很有用。例如：

var mediaQueryRule = window.matchMedia("(orientation: portrait)")
mediaQueryRule.onchange = function(){ alert("screen orientation changed") }