有一种方法可以检测用户是否使用screen.orientation将设备切换到竖屏模式

只需使用下面的代码:

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

现在，当用户翻转设备时，onchange将被触发，当用户使用纵向模式时，警报将弹出。

关于window有一点需要注意。方向是，如果你不在移动设备上，它将返回未定义。一个好的检查方向的函数是这样的，其中x是window。orientation:

//check for orientation
function getOrientation(x){
  if (x===undefined){
    return 'desktop'
  } else {
    var y;
    x < 0 ? y = 'landscape' : y = 'portrait';
    return y;
  }
}

这样称呼它:

var o = getOrientation(window.orientation);
window.addEventListener("orientationchange", function() {
  o = getOrientation(window.orientation);
  console.log(o);
}, false);

这是对之前答案的扩展。我发现的最好的解决方案是创建一个无害的CSS属性，它只在满足CSS3媒体查询时出现，然后用JS测试该属性。

例如，在CSS中你会有:

@media screen only and (orientation:landscape)
{
    //  Some innocuous rule here
    body
    {
        background-color: #fffffe;
    }
}
@media screen only and (orientation:portrait)
{
    //  Some innocuous rule here
    body
    {
        background-color: #fffeff;
    }
}

然后转到JavaScript(我使用jQuery是为了好玩)。颜色声明可能很奇怪，所以您可能想使用其他方法，但这是我发现的最简单的测试方法。然后，您可以使用resize事件来进行切换。把它们放在一起:

function detectOrientation(){
    //  Referencing the CSS rules here.
    //  Change your attributes and values to match what you have set up.
    var bodyColor = $("body").css("background-color");
    if (bodyColor == "#fffffe") {
        return "landscape";
    } else
    if (bodyColor == "#fffeff") {
        return "portrait";
    }
}
$(document).ready(function(){
    var orientation = detectOrientation();
    alert("Your orientation is " + orientation + "!");
    $(document).resize(function(){
        orientation = detectOrientation();
        alert("Your orientation is " + orientation + "!");
    });
});

最好的部分是，在我写这个答案的时候，它似乎对桌面界面没有任何影响，因为它们(通常)没有(似乎)向页面传递任何朝向参数。

CCS只

@media (max-width: 1024px) and (orientation: portrait){ /* tablet and smaller */
  body:after{
    position: absolute;
    z-index: 9999;
    width: 100%;
    top: 0;
    bottom: 0;
    content: "";
    background: #212121 url(http://i.stack.imgur.com/sValK.png) 0 0 no-repeat; /* replace with an image that tells the visitor to rotate the device to landscape mode */
    background-size: 100% auto;
    opacity: 0.95;
  }
}

在某些情况下，你可能想要添加一小段代码，以便在访问者旋转设备后重新加载到页面，这样CSS就能正确呈现:

window.onorientationchange = function() { 
    var orientation = window.orientation; 
        switch(orientation) { 
            case 0:
            case 90:
            case -90: window.location.reload(); 
            break; } 
};

如果您有最新的浏览器窗口。定向可能行不通。在这种情况下，使用下面的代码获取角度

var orientation = window.screen.orientation.angle;

这仍然是一个实验技术，你可以在这里检查浏览器兼容性

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

jQuery Mobile有一个事件来处理这个属性的变化…如果你想警告如果有人旋转后-定向变化

另外，在谷歌搜索之后，看看窗外。方向(我相信是用度来衡量的…)

编辑:在移动设备上，如果你打开键盘，那么上面可能会失败，所以可以使用屏幕。availHeight和屏幕。availWidth，即使打开键盘也能给出适当的高度和宽度。

if(screen.availHeight > screen.availWidth){
    alert("Please use Landscape!");
}