移动设备检测方向锁定在javascript / HTML5中

Question

我有一个正在开发的html5网络游戏，该游戏要求移动设备处于横向模式。 因为我不能在某些设备/浏览器（Safari）上强制旋转，以强制横向移动，所以我只是使用下面的CSS旋转html内容。

我遇到的问题是，在移动设备（iPhone）上，如果用户将其设备锁定在“人像模式”下，则会与体验混乱（浏览器框架不会旋转以匹配其横向内容）。 我需要显示一条消息，让他们知道他们需要解锁设备的肖像锁定功能。我无法确定是否存在任何JavaScript方法来检测其移动设备是否明确锁定为人像模式。我发现旧文章（2015年）说不可能，但我希望功能支持有所改善。我确实查看了Screen Orientations API，但是默认方向与显式锁定方向不同。

我的CSS强制景观：

@media only screen and (max-device-width: 1024px) and orientation:portrait) {
    body {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
    }
}