如何限制网站的横向模式

Question

我有我的网站，想要阻止横向模式。我想让用户限制在potrait模式，因为我有自定义标题，在固定位置使用大约100px的屏幕空间。

另外，我希望这适用于屏幕宽度低于777像素的设备。

伙计们，请让我知道是否可能，如果是，那么如何。当我使用已用于将其标记为重复的代码时，我会在屏幕截图中遇到此问题。

Answer 1

使用css媒体查询显示转动设备的标志：

#turn{
display:none;
z-index:100;
position:fixed;
}
@media (orientation:landscape){
#turn{
display:block;
}
}

<div id="turn">
Please turn your device
</div>

Answer 2

我想你可以尝试这样的事情：

@media (orientation: landscape) and (max-width: 777px) {
  html {
    transform: rotateZ(90deg);
  }
}

但是显示要旋转的消息会更加用户友好。有些人发现很难使用肖像模式。

Answer 3

如果您愿意，可以使用javascript解决此问题。 出于测试目的，您可以将以下代码添加到页面中：

window.onresize = function (event) {
    console.log('resizing!');
    console.log(`new size: w${window.innerWidth} h${window.innerHeight}`);
    if(window.innerWidth < 777) {
        // do something
    }
    if(window.innerWidth > window.innerHeight) {
        // do something
    }
}

window.innerWidth和window.innerHeight返回的值是一个数字，因此您可以使用它进行计算。